/*
  EDDIT.AI brand layer, shared by every page: fonts, colour tokens from the
  clients' brand guide (docs/Eddit Branding.zip, 2026-10-12) and the few
  helpers Tailwind cannot express. brand-theme.js maps Tailwind's palette onto
  these, so pages written against slate/indigo render on brand without edits.

  Guide palette: charcoal #0B0F0E, signature green #00E676, gray #9CA3AF,
  off-white #F7F8F7.
*/

/*
  Self-hosted for the same reason Tailwind is vendored: a third party we
  cannot integrity-check has no business in the critical render path.
  Latin subset only — a missing glyph falls back per-character anyway.
*/
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/bebas-neue-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/barlow-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/barlow-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/barlow-700.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  --radius: 0.75rem;
  --background: #0B0F0E;
  --foreground: #F7F8F7;
  /*
    Ink and card are also needed at partial alpha, and color-mix() is
    unsupported before Safari 16.2. Kept as sRGB channels so the alpha
    variants are plain rgb() and every browser gets them.
  */
  --ink-rgb: 5 7 6;
  --card-rgb: 18 24 22;
  --card: rgb(var(--card-rgb));
  --card-foreground: #F7F8F7;
  --primary: #00E676;
  --primary-foreground: #0B0F0E;
  --secondary: #1E2724;
  --secondary-foreground: #F7F8F7;
  --muted: #1A2220;
  --muted-foreground: #9CA3AF;
  --accent: #00C866;
  --border: #2A3430;
  --ring: #00E676;
  --ink: rgb(var(--ink-rgb));
  --gradient-green: linear-gradient(120deg, #FFFFFF 0%, #B9F8D6 45%, #00E676 100%);
  --glow-green: 0 0 60px -10px rgb(0 230 118 / 0.5);
  --font-display: "Bebas Neue", "Archivo Black", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
}

/* Applied per element rather than to h1/h2/h3: a descendant selector would
   outrank Tailwind's tracking-* and font-* utilities without saying so, and
   Bebas Neue is all-caps, so every heading has to opt in deliberately. */
.font-display {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

.text-gradient-green {
  background-image: var(--gradient-green);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.glow-green { box-shadow: var(--glow-green); }

.bg-card-soft { background-color: rgb(var(--card-rgb) / 0.6); }
.text-foreground-soft { color: rgb(247 248 247 / 0.8); }

/* Form controls take the dark scheme; the native file button and select
   arrow otherwise stay light. */
input, select, textarea { color-scheme: dark; }

/* The plain call-to-action button, for markup that does not spell out the
   utilities (the Dropbox import buttons). */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.75rem 1.25rem;
  background-color: var(--primary);
  color: var(--primary-foreground);
  font-weight: 500;
  transition: filter 150ms;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* Signed-in app shell (index.html #demo once a session is active). */
.app-nav-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
  border-radius: 0.5rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.875rem;
  color: rgb(247 248 247 / 0.8);
  transition: background-color 150ms, color 150ms;
}
.app-nav-item:hover { background-color: var(--secondary); color: var(--foreground); }
.app-nav-item[aria-current="page"] {
  background-color: var(--secondary);
  color: var(--primary);
  box-shadow: inset 2px 0 0 var(--primary);
}
.project-tab {
  white-space: nowrap;
  padding: 0.6rem 0.75rem;
  color: var(--muted-foreground);
  border-bottom: 2px solid transparent;
}
.project-tab:hover { color: var(--foreground); }
.project-tab[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }

/* The dashboard uses the full width; the step-by-step screens stay readable. */
#demo.is-app main { max-width: 80rem; }
#demo.is-app main > :not(#myProjects):not(#templatesPage):not(.fixed) { max-width: 48rem; margin-left: auto; margin-right: auto; }
/* In the app the header spans the window, so the footer does too: its logo
   lines up with the header logo and its links end under "Sign out". */
body.is-app .site-footer-inner { max-width: none; }

.wizard-step { color: var(--muted-foreground); }
.wizard-step[data-state="current"] { color: var(--foreground); font-weight: 600; }
.wizard-step[data-state="current"] .wizard-step-dot,
.wizard-step[data-state="done"] .wizard-step-dot {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}