/* Gorban design tokens — every colour, size and timing the skill uses.
   Load the fonts first:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Geist:wght@500;600&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   (Pages that show the customer-logo row also load Antonio 400, Cabin 600 and Farro 500.) */
:root {
  color-scheme: dark;

  /* ── Surfaces (darkest → lightest) ── */
  --bg: #0A0A0B;           /* page */
  --panel: #111113;        /* header pill, section panels, mock frames */
  --card: #161618;         /* cards, mock shells, inputs */
  --panel-2: #1C1C1F;      /* nested mock tray, table heads */
  --raised: #232327;       /* active segment, social buttons, avatars fallback */
  --inverse: #F4F4F5;      /* the one light surface: white button */
  --btn-1: #2A2A2E;        /* dark pill button gradient, top */
  --btn-2: #151517;        /* dark pill button gradient, bottom */

  /* ── Text ── */
  --ink: #F4F4F5;          /* headings, primary text */
  --ink-deep: #FFFFFF;     /* inner-page H1s */
  --body: #A1A1AA;         /* paragraphs, table text */
  --muted: #86868F;        /* fine print, footer headings (≥4.5:1 on every surface up to --panel-2) */
  --placeholder: #8A8A93;
  --on-inverse: #0A0A0B;   /* text on the light surface */

  /* ── Lines (1.5px hairlines unless noted) ── */
  --line: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.10);
  --line-3: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.18);  /* hover borders */
  --grid-line: rgba(255, 255, 255, 0.06);    /* chart grid inside mocks */

  /* ── Brand slots (filled per build by palette/palette.py → palette.css; demo values below) ──
     One bright accent. Neutrals above and the status colours below never change. */
  --accent: #FF6A1F;       /* accent ON DARK: active states, highlights, key numbers, chart lines */
  --accent-fill: #FF6A1F;  /* accent as a FILL with --on-accent text: featured plan, badges, check dots */
  --accent-2: #FFB13D;     /* second brand colour: "On track" bar, logo highlight */
  --accent-3: #FF4D12;     /* deep end of the logo gradient */
  --accent-glow: #FF8A1F;  /* hero button underline, edge-bar stop 2 */
  --accent-on-dark: #FF8E60; /* accent as small TEXT (pills, tags, deltas, active nav): lighter, so it stays crisp on
                                accent-tinted pills too. Fills, bars, dots and glows keep --accent / --accent-fill. */
  --accent-rgb: 255, 106, 31;       /* --accent as r, g, b for rgba() glows */
  --accent-glow-rgb: 255, 138, 31;  /* --accent-glow as r, g, b */
  --accent-wash: rgba(var(--accent-rgb), 0.12);   /* tinted pills, tags */
  --accent-ring: rgba(var(--accent-rgb), 0.35);   /* focus ring, selection */
  /* The signature 8px edge bar on the very top and bottom of every page: a light → deep accent ramp */
  --edge-1: #FFC24D;
  --edge-3: #FF5A1F;
  --edge-4: #FF3D2E;
  --edge: linear-gradient(90deg, var(--edge-1) 0%, var(--accent-glow) 33%, var(--edge-3) 69%, var(--edge-4) 100%);
  --on-accent: #0A0A0B;    /* text on --accent-fill: whichever of white / near-black passes 4.5:1 on it
                              (demo orange is too bright for white text; the palette sets this per build) */

  /* ── Data colours — ONLY inside product mockups (pipeline stages): brand slots too ── */
  --royal: #1470EF;     /* Discovery, Approved */
  --violet: #6927DA;    /* Proposal */
  --magenta: #F23D94;   /* Negotiation, Pending */
  --cyan: #21CCEE;      /* Closed won */
  /* Stage pills draw their TEXT from these colours lifted to at least oklch L .68 (see .stage in gorban.css),
     so deep violets/blues stay readable on dark while the dot and tint keep the vivid colour. */
  /* ── Status colours — fixed, never palette slots ── */
  --pink: #F83D69;      /* negative trend, "at risk", spend */
  --orange: #FF3C00;    /* churn / negative in small sparklines */
  --green: #16C12A;     /* positive trend */

  /* ── Fonts ── */
  --font-display: "Geist", "Inter", system-ui, sans-serif;   /* headings only, weight 500 */
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* ── Radii ── */
  --r-panel: 32px;   /* big panels, mock frames */
  --r-header: 24px;
  --r-shell: 20px;   /* product mock shell */
  --r-card: 16px;
  --r-field: 12px;
  --r-inner: 8px;
  --r-pill: 100px;

  /* ── Spacing / layout ── */
  --content: 1060px;   /* main column */
  --guide: 1201px;     /* distance between the two vertical guide lines */
  --gutter: 16px;
  --section-gap: 128px;

  /* ── Shadows (rare: tooltips, lifted cards, chips) ── */
  --shadow-chip: 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 6px 16px rgba(0, 0, 0, 0.6);
  --shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.5);

  /* ── Motion ── */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);    /* expo-out: long, soft settle */
  --e-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-reveal: 1s;
  --rv-y: 28px;                               /* reveal rise distance */
}

/* ── Type scale (Geist 500 for headings with tight negative tracking; Inter for the rest) ── */
.t-h1 { font-family: var(--font-display); font-weight: 500; font-size: 64px; line-height: 1.1; letter-spacing: -3.5px; }
.t-h2 { font-family: var(--font-display); font-weight: 500; font-size: 44px; line-height: 1.2; letter-spacing: -3px; }
.t-h3 { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 1.4; letter-spacing: -1.5px; }
.t-h4 { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.4; letter-spacing: -1px; }
.t-20b { font-family: var(--font-body); font-weight: 600; font-size: 20px; line-height: 1.7; }
.t-18b { font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 1.7; letter-spacing: -0.3px; }
.t-18m { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.7; }
.t-16  { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.7; }
.t-16m { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.7; }
.t-14  { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.7; }
.t-14m { font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 1.7; }
.t-12  { font-family: var(--font-body); font-weight: 400; font-size: 12px; line-height: 1.7; }

@media (max-width: 760px) {
  .t-h1 { font-size: 44px; letter-spacing: -2.4px; }
  .t-h2 { font-size: 34px; letter-spacing: -2px; }
  .t-h3 { font-size: 28px; letter-spacing: -1.2px; }
}

/* ── Motion off: reduced motion + ?static (the JS adds .static to <html>) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.static *, .static *::before, .static *::after { transition: none !important; animation: none !important; }