/**
 * Promptla brand tokens — Charcoal & Signal Orange
 * ============================================================================
 *
 * THE single source of truth for this site's identity. It mirrors
 * `src/styles/brand.css` in the product (`Promptla/frontend/admin-dashboard`),
 * so the marketing site and the app stay on one palette. When the product
 * rebrands, port the primitives in this file and every surface follows.
 *
 * Three layers, in order:
 *
 *   1. PRIMITIVES — bare HSL triplets with no baked-in alpha, named and valued
 *      exactly as they are in the product. Because they carry no alpha, any of
 *      them can be tinted where it is used: `hsl(var(--primary) / 0.18)`. That
 *      is what allows `site.css` to hold no colour literals of its own.
 *   2. INK — the product's permanently-charcoal sidebar palette. Every dark
 *      surface on this site (the CTA panel, the countdown, the prompt
 *      showcase, the hero flow mock, the "never" strip) draws from it. Orange
 *      shifts to its lighter value there for the same reason it does in the
 *      app: `#C9430E` goes muddy on charcoal.
 *   3. ROLE ALIASES — the names `site.css` actually consumes (`--brand`,
 *      `--surface`, `--text`). Kept as a layer so that changing a primitive
 *      repaints the whole site without touching a component rule.
 *
 * Two rules keep this file the only place identity lives:
 *
 *   - `site.css` carries no palette literal. Every colour there is
 *     `var(--role)` or `hsl(var(--primitive) / alpha)`. The one exception is
 *     translucent pure white and black, which are structural rather than
 *     palette — the frosted nav capsule, the modal scrim, the low-alpha fills
 *     inside the dark panels — and would be wrong to tint.
 *   - A token that needs to be overridden in a local scope (see
 *     `.app-mock-sidebar`) must be overridden by the name that is CONSUMED,
 *     not the primitive behind it. `var()` inside a custom property resolves
 *     on the element that declares it, so redefining `--fg-muted` on a
 *     descendant does not flow through to `--text-muted: hsl(var(--fg-muted))`
 *     up on `:root`. This bit the app once; the aliases below are flat for
 *     exactly that reason.
 */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --primary: 17 87% 42%; /* #C9430E signal orange */
  --primary-soft: 22 85% 92%; /* #FCE7DB */
  --primary-foreground: 0 0% 100%;
  --primary-strong: 17 87% 34%; /* #A2360B */

  /* --- Neutral surfaces -------------------------------------------------- */
  --surface-canvas: 60 6% 97%; /* #F7F7F6 page background */
  --surface-lowest: 0 0% 100%; /* #FFFFFF panels and cards */
  --surface-low: 60 3% 94%; /* #EFEFEE inputs, wells, tracks */
  --surface-high: 60 3% 88%; /* #E2E2E0 */
  --surface-dim: 60 3% 78%; /* #C8C8C5 */

  /* --- Ink on light ------------------------------------------------------ */
  --fg: 200 6% 10%; /* #17191A */
  --fg-muted: 214 3% 40%; /* #63666A */
  --fg-faint: 214 3% 55%; /* #8A8D91 */

  /* --- Hairlines --------------------------------------------------------- */
  --outline: 60 3% 88%; /* #E2E2E0 */
  --outline-strong: 60 3% 78%; /* #C8C8C5 */

  /* --- Status ------------------------------------------------------------ */
  /* Warning is pushed yellow-ward so it cannot be mistaken for brand orange. */
  --success: 151 66% 29%; /* #197A4B */
  --warning: 42 100% 27%; /* #8A6100 */
  --danger: 0 68% 42%; /* #B32222 */

  /* --- Charcoal (the product's sidebar ink, used by every dark section) --- */
  --ink-deep: 200 10% 6%; /* #0E1011 */
  --ink-bg: 200 5% 11%; /* #1B1D1E */
  --ink-raised: 200 5% 15%; /* #242728 */
  --ink-text: 60 3% 93%; /* #EDEDEC */
  --ink-muted: 180 1% 61%; /* #9A9C9C */
  --ink-hair: 195 4% 18%; /* #2B2E2F */
  --ink-hair-strong: 200 5% 22%; /* #35393B */
  --ink-active-bg: 20 30% 14%; /* #2E2019 */
  --ink-primary: 22 90% 57%; /* #F4762E — orange, legible on charcoal */
  --ink-success: 151 50% 50%; /* #3FBE80 */
  --ink-warning: 45 67% 54%; /* #D9B23C */
  --ink-danger: 2 83% 65%; /* #F0605A */

  /* --- Typography -------------------------------------------------------- */
  /* Loaded from Google Fonts in each page's <head>. */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Archivo", "Inter", system-ui, sans-serif;

  /* --- Geometry ---------------------------------------------------------- */
  --radius: 0.5rem;
  --radius-xs: calc(var(--radius) - 0.25rem); /* 4px — bars, ticks, micro-tiles */
  --radius-sm: calc(var(--radius) - 0.125rem); /* 6px — buttons, tabs, inputs */
  --radius-md: var(--radius); /* 8px — rows, wells, icon tiles */
  --radius-lg: calc(var(--radius) + 0.25rem); /* 12px — cards */
  --radius-xl: calc(var(--radius) + 0.5rem); /* 16px — full-width panels */

  /* --- Elevation --------------------------------------------------------- */
  --shadow-soft: 0 18px 44px -20px hsl(var(--fg) / 0.16);
  --shadow-lift: 0 30px 60px -28px hsl(var(--fg) / 0.24);
  --shadow-hover: 0 40px 80px -32px hsl(var(--fg) / 0.28);

  /* --- Role aliases consumed by site.css --------------------------------- */
  --brand: hsl(var(--primary));
  --brand-strong: hsl(var(--primary-strong));
  --brand-soft: hsl(var(--primary-soft));
  --surface: hsl(var(--surface-canvas));
  --surface-raised: hsl(var(--surface-lowest));
  --surface-sunken: hsl(var(--surface-low));
  --surface-dark: hsl(var(--ink-deep));
  --surface-dark-2: hsl(var(--ink-bg));
  --text: hsl(var(--fg));
  --text-muted: hsl(var(--fg-muted));
  --text-faint: hsl(var(--fg-faint));
  --border: hsl(var(--outline));
  --border-strong: hsl(var(--outline-strong));
}