/* PathBits design tokens.
 *
 * This file is the single source of colour, type, radius and motion for the
 * app. A copy of the CANONICAL BLOCK below also lives in the marketing site
 * (pathbits-marketing-site/src/app/tokens.css), which re-exports it through
 * Tailwind's `@theme inline`. Keep the two in sync by hand -- the palette
 * drifted once already, which is how `--accent-hover` ended up equal to
 * `--accent-primary` here and dead on every hover in the app.
 *
 * Load order does not matter. Custom properties resolve at computed-value
 * time, so a component may read `var(--ink)` from a stylesheet Propshaft
 * happens to serve earlier than this one.
 *
 * ── CANONICAL BLOCK START ───────────────────────────────────────────────── */

/* Light is the base. Dark redefines values only, never structure, so every
   component can style through a token and get both themes for free. */
:root {
  /* Surfaces. Content sits *lighter* than its ground here -- a page on a
     table -- which is the inverse of the dark theme's card-on-black. */
  --ground: #EDEDE8;
  --raised: #F8F8F5;
  --raised-hover: #F1F1EC;
  --sunk: #E3E3DC;
  --field: #FBFBF9;
  --overlay: rgba(22, 24, 28, 0.45);

  /* Ink. Three weights, all of which clear 4.5:1 on --ground, so secondary
     text never has to be expressed as an opacity. */
  --ink: #16181C;
  --ink-soft: #4A4E55;
  --ink-faint: #63686E;
  --on-leaf: #F4F6F2;

  /* Rules. Hairlines do the work card borders and box shadows used to. */
  --rule: #D6D6CE;
  --rule-soft: #E2E2DA;
  --rule-strong: #C2C2B8;

  /* The only accent. Success reuses it rather than introducing a second
     green, so the page never carries more than one hue. */
  --leaf: #33523F;
  --leaf-hover: #243B2D;
  --leaf-lift: #E1E8DF;
  --leaf-edge: #C6D4C4;

  /* Status. Semantic only -- these are not decoration and must not be
     reached for as accents. */
  --danger: #8C2F26;
  --danger-hover: #6E241D;
  --danger-lift: #F6E7E4;
  --danger-edge: #E3C7C1;
  --on-danger: #FBF4F3;
  --warn: #8A5A20;
  --warn-lift: #F2E8D8;
  --warn-edge: #E0CDAE;

  /* Shadows are tinted with ink rather than pure black: on a warm-neutral
     ground a black shadow reads as grey dirt. */
  --shadow-light: rgba(22, 24, 28, 0.06);
  --shadow-medium: rgba(22, 24, 28, 0.12);
}

/* The un-stamped default: most viewers never set an explicit theme, so
   prefers-color-scheme is the only signal. Guarded so an explicit light
   choice still beats a dark OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #15161A;
    --raised: #1C1E23;
    --raised-hover: #23262C;
    --sunk: #101115;
    --field: #101115;
    --overlay: rgba(6, 7, 9, 0.66);

    --ink: #E9E9E2;
    --ink-soft: #B0B3AC;
    --ink-faint: #8A8E88;
    --on-leaf: #12180F;

    --rule: #2C2F35;
    --rule-soft: #23262B;
    --rule-strong: #3A3E45;

    --leaf: #9BBA84;
    --leaf-hover: #B2CD9D;
    --leaf-lift: #1F2A20;
    --leaf-edge: #33452F;

    --danger: #E9A79E;
    --danger-hover: #F2BDB5;
    --danger-lift: #2A1A17;
    --danger-edge: #4A2A24;
    --on-danger: #1A0F0D;
    --warn: #D9AE73;
    --warn-lift: #2A2317;
    --warn-edge: #4A3A22;

    --shadow-light: rgba(0, 0, 0, 0.4);
    --shadow-medium: rgba(0, 0, 0, 0.6);
  }
}

/* Repeated for the explicit stamp so a future in-app toggle wins in both
   directions. Nothing reads these blocks directly; components read the
   tokens. */
:root[data-theme="dark"] {
  --ground: #15161A;
  --raised: #1C1E23;
  --raised-hover: #23262C;
  --sunk: #101115;
  --field: #101115;
  --overlay: rgba(6, 7, 9, 0.66);

  --ink: #E9E9E2;
  --ink-soft: #B0B3AC;
  --ink-faint: #8A8E88;
  --on-leaf: #12180F;

  --rule: #2C2F35;
  --rule-soft: #23262B;
  --rule-strong: #3A3E45;

  --leaf: #9BBA84;
  --leaf-hover: #B2CD9D;
  --leaf-lift: #1F2A20;
  --leaf-edge: #33452F;

  --danger: #E9A79E;
  --danger-hover: #F2BDB5;
  --danger-lift: #2A1A17;
  --danger-edge: #4A2A24;
  --on-danger: #1A0F0D;
  --warn: #D9AE73;
  --warn-lift: #2A2317;
  --warn-edge: #4A3A22;

  --shadow-light: rgba(0, 0, 0, 0.4);
  --shadow-medium: rgba(0, 0, 0, 0.6);
}

/* Type, radius and motion do not change between themes. */
:root {
  --font-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-read: "Newsreader", Georgia, "Times New Roman", serif;
  --font-data: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fixed rem scale. Replaces the compounding `em` ladder, where a 0.9em
     inside a 0.9em silently produced a third size nobody chose. */
  --fs-2xs: 0.6875rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.1875rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;

  /* Two radii, down from the five (3/4/5/6/8px) that were in use. */
  --radius-sm: 3px;
  --radius: 6px;
  --radius-pill: 999px;

  --ease: 160ms cubic-bezier(0.2, 0, 0, 1);
  --ease-slow: 260ms cubic-bezier(0.2, 0, 0, 1);

  /* Reading measure: about 65 characters of Newsreader at --fs-lg, which is
     the comfortable range for continuous prose. A fixed length rather than
     `ch` so the title, the summary and the body all align on it -- `ch`
     resolves against each element's own font and would not.

     Prose is the one thing the old single 1200px container could not do. */
  --measure: 40rem;
}

/* Legacy names, kept as aliases so the component stylesheets in both repos
   flip with the palette instead of being rewritten in one pass. New work
   should use the semantic names above; these can be retired file by file. */
:root {
  --bg-primary: var(--ground);
  --bg-secondary: var(--raised);
  --bg-tertiary: var(--raised);
  --bg-accent: var(--sunk);
  --card-hover: var(--raised-hover);

  --border-primary: var(--rule-soft);
  --border-secondary: var(--rule);

  --text-primary: var(--ink);
  --text-secondary: var(--ink);
  --text-tertiary: var(--ink-soft);
  --text-muted: var(--ink-faint);

  --accent-primary: var(--leaf);
  --accent-hover: var(--leaf-hover);

  --badge-color: var(--sunk);

  --toast-success-bg: var(--leaf-lift);
  --toast-error-bg: var(--danger-lift);
}

/* ── CANONICAL BLOCK END ─────────────────────────────────────────────────── */

/* App-only. The marketing site has no fixed navbar of its own height. */
:root {
  --focus-ring: var(--leaf);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Height of the fixed navbar. Anything that has to clear it reads this
     instead of repeating 60px. */
  --navbar-height: 60px;
}