/* AutOn — the system, repainted to "AutOn v1" (Claude Design, 16 Sep 2026).
 *
 * Every value below was read out of `AutOn v1.dc.html`, not chosen. Where a
 * comment gives a count, that is how many times the value appears in the
 * design — which is how the load-bearing colours were told apart from the
 * incidental ones.
 *
 * Three things changed from the previous system, and they change everything:
 *
 *   1. The ground is WARM PAPER (#F5F5F1), not cool grey. White surfaces sit
 *      on it, and the borders are warm too — the design never once uses a
 *      neutral grey border.
 *   2. The accent is FOREST GREEN (#4C7F5E), and it means "this is fine, this
 *      is the product working". Attention is a SEPARATE colour, amber #B4682E,
 *      and it means "held for you". The old system spent one terracotta on
 *      both jobs, which is why nothing on screen could distinguish "good" from
 *      "needs you".
 *   3. Numbers are set in IBM Plex Mono at weight 500 — 27px, 30px, 40px. The
 *      big figures are a MONO signature, not a heavy grotesque. This is the
 *      single most distinctive thing about the design and the easiest to lose.
 *
 * Uppercase tracked labels (10–11px, .08–.1em) are used 48 times as the
 * section-label system. That is the brief's own choice and it is followed.
 */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* ---------------------------------------------------------------- type */
  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* THIS WAS NOT A SCALE, IT WAS A CENSUS.
     The sizes were taken from whatever the handoff happened to use, ranked by
     how often each appeared — which produced --t-sm 12, --t-base 12.5, --t-md
     13 and --t-lg 13.5. Four named levels inside 1.5px. Nobody can tell those
     apart, so marking something as "md" rather than "sm" communicated nothing
     and every screen read as one flat wash of small text.

     The names are all kept, because 322 classes are written against them. The
     values now step by a real ratio, so a level is something a reader can
     actually see. The quiet end is untouched — provenance and eyebrows are
     meant to recede, and making them bigger would just add noise. */
  --t-micro: 10px;
  --t-prov: 10.5px;
  --t-label: 11px;
  --t-xs: 11.5px;
  --t-sm: 12px;
  --t-base: 13px;
  --t-md: 14px;
  --t-lg: 15.5px;
  --t-xl: 18px;
  --t-2xl: 22px;
  --t-3xl: 27px;
  --t-h1: 34px;
  --t-h1-lg: 40px;
  --t-num: 30px;
  --t-num-lg: 38px;
  --t-num-xl: 52px;

  /* The hero figure. AutOn has no photography — the mono numbers ARE its
     imagery, and this is the one place they are allowed to behave like it.
     One per screen, never two. */
  --t-hero: 68px;

  /* The old scale's top three names, kept alive and pointed at the new one.
     `.stat-v--lg`, `.stat-v--xl` and `.ptitle--lg` in app.css are still written
     against them, and an undefined var() does not fall back — it invalidates
     the declaration and the figure inherits body size. These three lines are
     what keep every big number on every screen at its mono size. */
  --t-4xl: var(--t-num-lg);
  --t-5xl: var(--t-num-xl);

  --lh-tight: 1.15;
  --lh-snug: 1.5;
  --lh-body: 1.6;
  --lh-read: 1.65;

  /* Tracking. Negative on headlines, positive on the uppercase labels. */
  --tr-h1: -.02em;
  --tr-num: -.03em;
  --tr-tight: -.01em;
  --tr-label: .08em;
  --tr-eyebrow: .1em;

  /* --------------------------------------------------------------- ground */
  --ground: #F5F5F1;      /* 38 — the page */
  --surface: #FFFFFF;     /* 72 — every card */
  --surface-2: #FBFBF9;   /* 35 — card footers, the quiet inset */
  --paper: #FFFFFF;
  --hover: #F0EFE9;       /*  7 — the hover, and the active nav pill */

  --ink: #1C1B17;         /* 63 — text, and the dark button */
  --ink-2: #2C2A24;       /* 13 — the dark button's hover */
  --ink-3: #4A4840;       /*  2 — the resting nav item */
  --on-dark: #FBFBF9;     /* text on ink */
  --on-dark-2: #E6E4DC;   /* body text on ink */

  --muted: #6E6C63;       /* 90 — body copy that is not the point */
  --quiet: #77746A;       /* 86 — labels, provenance, mono asides */
  --faint: #8A877C;       /* 20 — the second half of a two-tone headline */
  --fainter: #A9A69B;

  --divider: #E8E7E1;     /* 66 — the card border */
  --hairline: #EDECE6;    /* 55 — inside a card */
  --hairline-2: #F2F1EC;  /* 13 — between table rows */
  --crumb: #D6D4CB;

  /* ---------------------------------------------------------- the accent */
  /* Green means the product is working: on pace, verified, done, allowed. */
  --accent: #4C7F5E;      /* 34 */
  --accent-700: #3E6B4E;  /*  3 */
  --accent-300: #93C4A5;  /*  5 — the mark's pupil, labels on ink */
  --accent-100: #C7DACD;  /*  1 — a finished stage's bar */
  --accent-50: #EAF2EC;   /*  7 — the soft pill */
  --select: #DDE8DF;

  /* ------------------------------------------------------------ held/warn */
  /* Amber means a person has to do something. It is never decoration. */
  --held: #B4682E;        /* 11 — the dot, the icon */
  --held-ink: #8F5322;    /*  9 — the label */
  --held-deep: #5F3A18;   /*  1 — body copy inside a held card */
  --held-bd: #F0DDC9;     /*  6 */
  --held-bg: #FBEFE5;     /*  5 */

  --stop: #A8453A;
  --stop-bg: #FBE3E0;

  /* ------------------------------------------------------------ semantic */
  --good: var(--accent-700);
  --good-bg: var(--accent-50);
  --warn: var(--held-ink);
  --warn-bg: var(--held-bg);
  --flat: var(--quiet);
  --flat-bg: var(--hover);

  /* ------------------------------------------------------------- avatars */
  --av-bg: #E4E7E2;
  --av-bd: #D6DAD4;

  /* ------------------------------------------------------------- neutrals
     Kept so 19 screens keep rendering, but repointed onto the warm ramp —
     there is no cool grey anywhere in this design. */
  --n100: #F5F5F1;
  --n200: #F0EFE9;
  --n300: #E8E7E1;
  --n400: #D6D4CB;
  --n500: #A9A69B;
  --n600: #77746A;
  --n700: #6E6C63;
  --n800: #4A4840;
  --n900: #1C1B17;

  /* --------------------------------------------------- back-compat aliases
     The old palette had ONE accent doing two jobs. Splitting it is the point
     of this repaint, so the old names are pointed at the job they did most
     often in the screens that use them: terracotta was "a person must look at
     this", and sage was "this is fine". */
  --terra-50: var(--held-bg);
  --terra-100: var(--held-bd);
  --terra-200: var(--held-bd);
  --terra-300: var(--held);
  --terra: var(--held);
  --terra-600: var(--held-ink);
  --terra-700: var(--held-ink);
  --terra-800: var(--held-ink);
  --terra-900: var(--held-deep);

  --sage-50: var(--accent-50);
  --sage-100: var(--accent-50);
  --sage-200: var(--accent-100);
  --sage-300: var(--accent-300);
  --sage: var(--accent);
  --sage-700: var(--accent-700);
  --sage-800: var(--accent-700);
  --sage-900: var(--accent-700);

  /* ---------------------------------------------------------------- space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 14px;
  --s5: 16px; --s6: 18px; --s7: 22px; --s8: 32px; --s9: 40px;

  /* ---------------------------------------------------------------- radii
     999px (72) and 16px (41) carry the design. Everything is a pill or a
     generously rounded card; there are no square corners anywhere. */
  --r-pill: 999px;
  --r-card: 16px;
  --r-pane: 18px;
  --r-tile: 14px;
  --r-chip: 12px;
  --r-item: 10px;
  --r-btn: 11px;
  --r-tag: 5px;
  --r-app: 18px;
  --r-mark: 12px;

  /* ------------------------------------------------------------ elevation
     One shadow family, rgb(28 27 23). e1 is on almost every card (28 uses);
     e2 lifts a pane; e3 is the one card that must be looked at. */
  --e1: 0 1px 2px rgb(28 27 23 / .04);
  --e2: 0 1px 2px rgb(28 27 23 / .04), 0 10px 28px -18px rgb(28 27 23 / .14);
  --e3: 0 2px 6px rgb(28 27 23 / .06), 0 24px 56px -30px rgb(28 27 23 / .34);
  --e-composer: 0 2px 4px rgb(28 27 23 / .04), 0 18px 44px -24px rgb(28 27 23 / .28);
  --e-pop: 0 2px 4px rgb(28 27 23 / .05), 0 20px 48px -24px rgb(28 27 23 / .34);
  --e-app: 0 1px 3px rgb(28 27 23 / .05), 0 20px 50px rgb(28 27 23 / .08);

  /* --------------------------------------------------------------- layout */
  /* The glass dock, shut and open. vw rather than %: see css/dock.css. */
  --dock-shut: max(56px, 5vw);
  --dock-open: max(220px, 20vw);
  --top-h: 60px;
  --tabs-h: 55px;   /* the sticky .tabs strip, measured: what a pinned pane sits under */

  /* Motion lives in css/motion.css, which defines --fast and --med from a
     real curve and duration scale. Nothing here should redefine them. */
  --pad-x: 22px;

}


::selection { background: var(--select); }

}