/* Capability Actual — design tokens.
   Warm neutrals, near-black, burnished orange. Nothing new gets added here
   without a reason; the palette is the brand. */

:root {
  --bg: #f2ebdd;
  --surface: #faf7f0;
  --fg: #171717;
  --fg-dim: #4a4842;
  --muted: #6c6961;
  --border: #d5cdbf;
  --accent: #c9652d;
  --accent-hover: #a94d22;
  /* The brand orange does not pass WCAG AA in the two roles that carry text:
     3.90:1 under the white of a .btn or .cta, 3.29:1 as accent text on cream.
     Built Capable hit the same wall on the same hex and split it by role, and
     tokens.css above says to keep the two in step — so the same split lands
     here. --accent keeps every decorative job (borders, dots, rules, the
     active panel edge); these two carry text. Nothing is repainted. */
  --accent-strong: #ad4f22;   /* a fill under white — 5.36:1 */
  --accent-strong-hover: #8f411f;
  --accent-text: #9f471e;     /* accent-coloured text on cream — 4.89:1 worst */
  /* The hero is near-black in both themes, so accent text on it needs the
     light orange whichever theme is active. It is a gradient, and the lighter
     stop (#1d1b17) is the one that decides: --accent measures 4.41 there and
     fails, which a flat-colour reading of --hero-bg (4.60) hides. */
  --accent-on-dark: #e07a44;   /* 5.76:1 against the lighter stop */

  --hero-bg: #171717;
  --hero-bg-2: #1d1b17;
  --hero-fg: #f2ebdd;
  --hero-dim: #a8a291;
  --hero-border: #33322c;

  --shadow: 0 1px 2px rgba(21, 21, 19, 0.05), 0 8px 24px rgba(21, 21, 19, 0.06);

  --sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --head: "Archivo", "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Strong ease-out for press feedback. The built-in `ease` is too weak for
     motion the user is looking straight at. Not theme-dependent. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* ---------------------------------------------------------------
     Shared with Built Capable: the same token names, the same 12px
     floor, the same radius roles, the same motion vocabulary. Someone
     clicking from this page into the app should not feel the seam.

     The step values differ on purpose — this is a page you read and
     that is a tool you operate, so the body size is set for reading.
     What is shared is the system, not the numbers.
     --------------------------------------------------------------- */

  /* type — nothing renders below --t-micro on any screen */
  --t-micro: 12px;  /* mono labels, kickers, tags */
  --t-small: 13px;  /* notes, form hints, fine print */
  --t-body: 15px;   /* secondary body */
  --t-lead: 16px;   /* main body and lede */
  --t-h4: 19px;     /* card titles */
  --t-h3: 21px;     /* sub-headings */
  /* Display sizes stay as clamps on their own rules; a scale that reaches
     the hero is a scale nobody reads off. */

  /* shape — by role, not by which rule happened to need a corner */
  --r-sm: 8px;      /* inputs, chips, small controls */
  --r-md: 12px;     /* buttons, cards, panels */
  --r-lg: 18px;     /* larger surfaces */
  --r-pill: 999px;  /* things that are genuinely pill-shaped */
  --r-circle: 50%;  /* dots and round marks */

  /* motion — one easing, three durations */
  --ease: var(--ease-out);
  --dur-fast: .14s;
  --dur: .22s;
  --dur-slow: .34s;

  /* An internal divider is not the edge of an object and should not weigh
     the same as one. */
  --hairline: #e4ddce;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #171717;
    --surface: #20201d;
    --fg: #f2ebdd;
    --fg-dim: #d3ccbc;
    --muted: #928c7d;
    --border: #33322d;
    --accent: #e07a44;
    --accent-hover: #ec8c57;
    --accent-strong: #e07a44;
    --accent-strong-hover: #ec8c57;
    --accent-text: #e07a44;

    --hero-bg: #0f0e0c;
    --hero-bg-2: #17150f;
    --hero-fg: #f2ebdd;
    --hero-dim: #8f897a;
    --hero-border: #2b2a24;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
    --hairline: #26251f;
  }
}

:root[data-theme="dark"] {
  --bg: #171717;
  --surface: #20201d;
  --fg: #f2ebdd;
  --fg-dim: #d3ccbc;
  --muted: #928c7d;
  --border: #33322d;
  --accent: #e07a44;
  --accent-hover: #ec8c57;
  --accent-strong: #e07a44;
  --accent-strong-hover: #ec8c57;
  --accent-text: #e07a44;

  --hero-bg: #0f0e0c;
  --hero-bg-2: #17150f;
  --hero-fg: #f2ebdd;
  --hero-dim: #8f897a;
  --hero-border: #2b2a24;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
  --hairline: #26251f;
}

/* ---------------------------------------------------------------
   Shared palette, carried over from the first pass on this branch.
   The product apps import or copy these names; the page itself uses
   the semantic tokens above. Keep the two in step.
   --------------------------------------------------------------- */
:root {
  --ca-cream: #f2ebdd;
  --ca-cream-2: #faf7f0;
  --ca-black: #171717;
  --ca-black-2: #0f0e0c;
  --ca-ink: #171717;
  --ca-ink-dim: #4a4842;
  --ca-muted: #6c6961;
  --ca-border: #d5cdbf;
  --ca-accent: #c9652d;
  --ca-accent-hover: #a94d22;
  --ca-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ca-head: "Archivo", "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --ca-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ca-radius: var(--r-md);
}