@layer base {
  :root {
    /* Paper surfaces — brand pass: no cream tint, no paper texture. The
       former warm off-whites all collapse to near-white neutrals; cards
       read as cards via shadow/hairline, not via colour. */
    --paper: #fcfcfc;
    --paper-edge: #e3e3e3;
    --paper-texture: none;
    --paper-warm: #fafafa;
    --paper-warm-2: #f5f5f5;
    --paper-shadow: rgba(0, 0, 0, 0.12);
    --paper-deep-shadow: rgba(0, 0, 0, 0.18);

    /* Masonite clipboard */
    --board: #6b4f33;
    --board-2: #5a4128;
    --board-grain: rgba(0, 0, 0, 0.06);
    --board-edge: #3d2b1a;

    /* Metal clip */
    --clip: #b8b8b8;
    --clip-2: #8e8e8e;
    --clip-shadow: #5a5a5a;

    /* Page surface — was the warm "desk" beige; in the brand pass the
       app sits on white. (Name kept so the ~3 consumers don't churn.) */
    --desk: #ffffff;
    --desk-2: #fafafa;

    /* Cork — warm tan with mottled spots. Used as the scene background
       beneath the beige clipboard paper. */
    --cork: #3a2818;
    --cork-2: #2c1d10;
    --cork-shadow: rgba(80, 50, 20, 0.18);

    /* Ink */
    --ink: #1a1a1a;
    --ink-soft: #4a4a4a;
    --ink-faint: #8c8c8c;

    /* Tonal accents — were forest-green (arrive) and dusk-blue (depart).
       In the brand pass they collapse to one neutral grey set: the two
       cards are still distinct sections, but colour isn't doing that work
       anymore — layout and labels are. Pink is reserved for the single
       "sparkle" per screen (see --pink), not for section tinting. */
    --arrive: var(--ink);
    --arrive-soft: #f0f0f0;
    --arrive-paper: #fafafa;
    --arrive-line: rgba(0, 0, 0, 0.11);
    --arrive-ring: rgba(0, 0, 0, 0.09);
    /* Was the Circle slate-blue used for primary CTAs. Brand pass: neutral
       near-black, so CTAs read as the ink-stamp .btn everywhere. */
    --slate: var(--ink);
    --slate-hover: #000000;

    --depart: var(--ink);
    --depart-soft: #f0f0f0;
    --depart-paper: #fafafa;
    --depart-line: rgba(0, 0, 0, 0.11);
    --depart-ring: rgba(0, 0, 0, 0.09);

    /* Required-field accent — same red Circle uses for danger/required. */
    --required: #c44;

    /* Due-date accent — a warm ochre that harmonizes with the cork/paper
       warmth. Reads as a gentle reminder, not the red error/danger of
       --required. */
    --due: #a06d24;

    /* Confirmation green — scoped to "paid / attached / done" success
       states in the to-do experience, where a positive signal reassures
       (payment legitimacy especially). The only green in the system. */
    --paid: #2e7d57;
    --paid-soft: #eef6f1;
    --paid-line: #cfe5da;

    /* ── Brand-parity (Corkins Exchange letterpress system) ──
       The one accent. Sampled from the TCX invitation PDF (the solid
       magenta circle); pin the exact CMYK/RGB once Brenda's source files
       arrive. Everything else in the brand pass resolves to white / black /
       grey — this is the only colour that earns a place.
       Used today by: brand.css primitives (.brand-ring / .brand-x /
       .brand-rule). The surface pass will route the green/blue/purple
       accents through here or through neutrals. */
    --pink: #FF00C7;
    --pink-soft: #ffe3f8;   /* ~8% pink on white — soft washes */
    --pink-tag-bg: rgba(255, 0, 199, 0.12);  /* translucent magenta — small tags (in N days) */

    /* Glass — for buttons that float over the landscape backdrop.
       Light frosted-white look. The backdrop-filter dims whatever is
       behind via `brightness(0.78)` so white text stays legible even
       when a paper card scrolls into view. */
    --glass-bg:           rgba(255, 255, 255, 0.14);
    --glass-bg-hover:     rgba(255, 255, 255, 0.24);
    --glass-border:       rgba(255, 255, 255, 0.55);
    --glass-border-hover: rgba(255, 255, 255, 0.78);
    --glass-highlight:    rgba(255, 255, 255, 0.30);
    --glass-blur:         blur(12px) brightness(0.78) saturate(135%);

    /* Status pip washes — were five tinted washes (host gold, flag red,
       pending amber, etc.). Brand pass: one neutral grey wash for most,
       and the genuinely-active "new" pip picks up --pink-soft in
       tone-cards.css. --pip-flag stays a warm red (it's a real warning,
       not decoration). */
    --pip-host-bg: #ededed;
    --pip-host-fg: #555555;

    /* "You are hosting" band — bands stay black in the brand system
       (the pink is reserved for "starts in N days", some section heads,
       the today line). --soft is the pale wash for the steward-note
       variant. */
    --host-purple:      var(--ink);
    --host-purple-soft: #f0f0f0;

    --pip-flag-bg: #f8d7d2;
    --pip-flag-fg: #a13b2c;
    --pip-pending-bg: #f3f3f3;
    --pip-pending-fg: #555555;

    /* Type stack — ABC Prophet display + system sans body, no serif, no mono.
       ABC Prophet italic stands in for the original EB Garamond italic
       moments; sans with heavy tracking stands in for the original IBM Plex
       Mono caption moments. */
    --display: 'ABC Prophet', 'Inter', system-ui, -apple-system, sans-serif;
    --sans: system-ui, -apple-system, 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* No script type — brand pass. --hand kept as an alias of --display so
       the handful of `var(--hand)` call sites render as light display
       sans (italic where they want a "personal" feel). */
    --hand: 'ABC Prophet', 'Inter', system-ui, -apple-system, sans-serif;

    --weight-normal: 300;
    --weight-medium: 400;
    --weight-semibold: 500;
    --weight-bold: 500;

    /* Hover affordances — one shared set so every clickable card / row /
       list-item highlights identically on hover ("a touch stronger" than
       the old scattered 0.03–0.05 washes). Routed through tokens so the
       whole app stays consistent and we can dial the feel in one place. */
    --hover-wash: rgba(0, 0, 0, 0.07);          /* default row/card hover fill */
    --hover-wash-strong: rgba(0, 0, 0, 0.10);   /* denser fill for icon buttons */
    --hover-edge: rgba(0, 0, 0, 0.12);          /* hairline that appears on hover */

    --leading-tight: 1.2;
    --leading-normal: 1.55;
    --leading-relaxed: 1.7;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 48px;
    --space-9: 64px;

    /* Brand pass: hard corners. Cards, tags, stamps, buttons — all square.
       (Pills that want a full round still use a literal 999px.) */
    --radius-xs: 0;
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --radius-xl: 0;

    /* Shadows — paper-on-desk */
    --shadow-card:
      0 1px 0 rgba(0,0,0,0.05),
      0 4px 10px rgba(0,0,0,0.10);
    --shadow-paper:
      0 1px 0 rgba(0,0,0,0.05),
      0 6px 14px rgba(0,0,0,0.18),
      0 18px 30px rgba(0,0,0,0.12);
    --shadow-paper-deep:
      0 1px 0 rgba(0,0,0,0.05),
      0 18px 40px rgba(0,0,0,0.14),
      0 50px 90px rgba(0,0,0,0.08);

    /* Tracked-cap label sizing — replaces the mono caption family */
    --cap-xs: 9px;
    --cap-sm: 10px;
    --cap-md: 11px;
    --cap-lg: 12px;
    --tracking-cap: 0.20em;
    --tracking-cap-tight: 0.16em;
    --tracking-cap-wide: 0.32em;
  }
}