@layer base {
  :root {
    /* Paper surfaces — B&W PASS (coherence pass, Neal Jul 15): the whole
       system strips to white, ink, and neutral greys. Color survives only
       where it means something — magenta (attention/brand), --paid green
       (confirmed/done), --required red (danger). The texture file is
       gone; warmth now comes from type, photography, and voice. Color
       gets layered back deliberately, spot by spot, once B&W proves out.

       WARM PASS, round 1 (Neal, Aug 2 — audit plan phase 6): B&W proved
       out; the first color layered back is the temperature of the ground.
       Cream desk, warm ink, warm-tinted lines/washes/shadows — the HEY
       direction, light mode only. Structure, ink stamps, magenta, radii,
       and the forest-green dark palette are deliberately unchanged; each
       is its own future round if wanted. */
    --paper: #ffffff;
    --paper-edge: #e7dfcd;
    --paper-texture: none;
    --paper-warm: #fbf8f0;
    --paper-warm-2: #f3edde;
    --paper-shadow: rgba(64, 52, 24, 0.10);
    --paper-deep-shadow: rgba(64, 52, 24, 0.18);

    /* Masonite clipboard */
    --board: #2e2e2e;
    --board-2: #262626;
    --board-grain: rgba(0, 0, 0, 0.06);
    --board-edge: #1a1a1a;

    /* 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: #f4efe3;
    --desk-2: #ece5d4;

    /* Cork — warm tan with mottled spots. Used as the scene background
       beneath the beige clipboard paper. */
    --cork: #1f1f1f;
    --cork-2: #171717;
    --cork-shadow: rgba(0, 0, 0, 0.18);

    /* Ink */
    --ink: #26221a;
    --ink-soft: #544e42;
    --ink-faint: #8e8674;

    /* 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: #4a443a;       /* B&W pass — was mossy green */
    --arrive-soft: #ece5d4;
    --arrive-paper: #f3edde;
    --arrive-line: rgba(48, 38, 14, 0.25);
    --arrive-ring: rgba(48, 38, 14, 0.18);
    /* Was the Circle slate-blue used for primary CTAs. Brand pass: neutral
       near-black, so CTAs read as the ink-stamp .btn everywhere. */
    --slate: #2f2a20;
    --slate-hover: #000000;

    --depart: #4a443a;       /* B&W pass — was dusk blue */
    --depart-soft: #ece5d4;
    --depart-paper: #f3edde;
    --depart-line: rgba(48, 38, 14, 0.25);
    --depart-ring: rgba(48, 38, 14, 0.18);

    /* 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: #79705d;

    /* Slipping — a published ask past its due date, not done. Warm ochre:
       information, never a scold (no red). One token so the guest timeline,
       host rows, matrix, and hill all agree. (Audit Hero C) */
    --slipping: #8a6116;

    /* 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;

      --go: #e6b34a;        /* the threshold gold — go moments only (round 4) */
      --go-hover: #d8a437;
      --go-ink: #211d12;

    /* ── 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: #efe9db;
    --pip-host-fg: #6b6353;

    /* "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 organizer-note
       variant. */
    --host-purple:      #2f2a20;
    --host-purple-soft: #efe9db;

    --pip-flag-bg: #f8d7d2;
    --pip-flag-fg: #a13b2c;
    --pip-pending-bg: #f3edde;
    --pip-pending-fg: #79705d;

    /* 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. */
    /* CLEARANCE FOR THE FIXED FURNITURE (Chad, Aug 25).
       .app-footer-bar is 56px fixed at the bottom and the Chat pill floats
       18px above that, both over everything. Anything that ends the page
       needs this much room beneath it or it sits underneath them: Chad lost
       "Back to home", and the staging audit lost the Close-these-dates
       button the same way. One number, so the next one does not. */
    --dock-clearance: 84px;

    --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;

    /* Definition pass (Neal, Jul 15): Basecamp-grade weight contrast.
       Bold means bold — names, links, and labels punch. */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* 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(64, 52, 24, 0.05);          /* default row/card hover fill */
    --hover-wash-strong: rgba(64, 52, 24, 0.08);   /* denser fill for icon buttons */
    --hover-edge: rgba(64, 52, 24, 0.15);          /* 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;

    /* WARM PASS, round 3 (Neal, Aug 2 — phase 6): the full HEY posture,
       chosen over square and over a gentle middle in a three-way A/B on
       real screens. Soft corners on cards and surfaces; primary buttons
       go true pill in buttons.css and friends. The July hard-corner set
       (1/2/4/8/14) lives in git if the letterpress edge ever returns. */
    --radius-xs: 10px;
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

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

    /* 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;

    /* Hover-darken endpoint for ink-filled controls: black in light
       mode, white in dark. Literal #000 hovers can't flip; this can. */
    --ink-hover: #000000;

    /* Motion — the app never performs, it settles. One vocabulary for
       every transition and animation, applied in transitions.css.
       transform/opacity only; exits run faster and plainer than enters. */
    --dur-instant: 100ms;   /* press states, focus */
    --dur-fast:    150ms;   /* hovers, color shifts */
    --dur-base:    200ms;   /* dialogs, rail, frame content */
    --dur-gentle:  250ms;   /* chat pop-in, toasts */
    --dur-settle:  400ms;   /* the dock — the one slow move */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);  /* entering, responding */
    --ease-exit:   cubic-bezier(0.4, 0, 1, 1);      /* leaving */
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);  /* iOS-sheet feel */

    color-scheme: light;
  }

  /* ── DARK MODE — automatic from the system setting (coherence pass).
     The same B&W system, inverted: near-black surfaces, light ink,
     neutral washes flipped to white-alpha. The meaningful accents keep
     their jobs — magenta attention, green confirmed (brightened for
     dark contrast), red danger. A personal toggle arrives with the
     settings surface later; until then the OS decides. ─────────────── */
  @media (prefers-color-scheme: dark) {
    :root {
      /* UNDER THE PINES, LIFTED — matte sage (~12% sat, beds at
         saturation). TRIAL CLOSED (Neal, Aug 2 — phase 6 round 2): A/B'd
         against "the lodge at night" (the warm umber set at 08a3779) on
         real screens after the light side went cream, and the pines won
         on purpose — green nights as the Corkins signature. The umber
         remains the candidate platform default for per-community themes.
         Three lightness steps separate the bed, the cards, and raised
         surfaces (the neutral set's 4% gap made cards vanish); hairlines
         carry the rest. */
      --paper: #2c372f;
      --paper-edge: #46554b;
      --paper-warm: #333f36;
      --paper-warm-2: #39463c;
      --paper-shadow: rgba(0, 0, 0, 0.5);
      --paper-deep-shadow: rgba(0, 0, 0, 0.6);

      --board: #9aa59c;
      --board-2: #7a837c;
      --board-edge: #525b54;

      --desk: #232c26;
      --desk-2: #28322b;
      --cork: #1b221d;
      --cork-2: #161c18;
      --cork-shadow: rgba(0, 0, 0, 0.4);

      --ink: #f2f5f1;
      --ink-soft: #c3cdc4;
      --ink-faint: #96a399;
      --ink-hover: #ffffff;

      --arrive: #c2cac3;
      --arrive-soft: #39463c;
      --arrive-paper: #333f36;
      --arrive-line: rgba(235, 250, 240, 0.25);
      --arrive-ring: rgba(235, 250, 240, 0.18);
      --slate: #cfd7d0;
      --slate-hover: #ffffff;
      --depart: #c2cac3;
      --depart-soft: #39463c;
      --depart-paper: #333f36;
      --depart-line: rgba(235, 250, 240, 0.25);
      --depart-ring: rgba(235, 250, 240, 0.18);

      --required: #e0685e;
      --due: #99a49b;
      --slipping: #d9a94e;
      --paid: #56b985;
      --paid-soft: #22352a;
      --paid-line: #2e4d3b;

      --go: #e6b34a;        /* the threshold gold — go moments only (round 4) */
      --go-hover: #d8a437;
      --go-ink: #211d12;

      --pink-soft: #3a1230;
      --pink-tag-bg: rgba(255, 0, 199, 0.22);

      --pip-host-bg: #39463c;
      --pip-host-fg: #adb8ae;
      --pip-flag-bg: #3c211c;
      --pip-flag-fg: #e08a7c;
      --pip-pending-bg: #333f36;
      --pip-pending-fg: #99a49b;

      --host-purple: #cfd7d0;
      --host-purple-soft: #39463c;

      --hover-wash: rgba(235, 250, 240, 0.06);
      --hover-wash-strong: rgba(235, 250, 240, 0.10);
      --hover-edge: rgba(235, 250, 240, 0.17);

      --shadow-card:
        0 1px 0 rgba(0, 0, 0, 0.3),
        0 4px 10px rgba(0, 0, 0, 0.4);
      --shadow-paper:
        0 1px 0 rgba(0, 0, 0, 0.3),
        0 6px 14px rgba(0, 0, 0, 0.5),
        0 18px 30px rgba(0, 0, 0, 0.4);
      --shadow-paper-deep:
        0 1px 0 rgba(0, 0, 0, 0.3),
        0 18px 40px rgba(0, 0, 0, 0.5),
        0 50px 90px rgba(0, 0, 0, 0.35);

      color-scheme: dark;
    }
  }

  /* ── THE PERSONAL OVERRIDE — the avatar-menu theme toggle stamps
     data-theme on <html>; these attribute blocks outrank the OS media
     query in both directions. Generated from the same values as above —
     when the palettes change, regenerate these two blocks. ─────────── */
  :root[data-theme="dark"] {
      --paper: #2c372f;
      --paper-edge: #46554b;
      --paper-warm: #333f36;
      --paper-warm-2: #39463c;
      --paper-shadow: rgba(0, 0, 0, 0.5);
      --paper-deep-shadow: rgba(0, 0, 0, 0.6);
      --board: #9aa59c;
      --board-2: #7a837c;
      --board-edge: #525b54;
      --desk: #232c26;
      --desk-2: #28322b;
      --cork: #1b221d;
      --cork-2: #161c18;
      --cork-shadow: rgba(0, 0, 0, 0.4);
      --ink: #f2f5f1;
      --ink-soft: #c3cdc4;
      --ink-faint: #96a399;
      --ink-hover: #ffffff;
      --arrive: #c2cac3;
      --arrive-soft: #39463c;
      --arrive-paper: #333f36;
      --arrive-line: rgba(235, 250, 240, 0.25);
      --arrive-ring: rgba(235, 250, 240, 0.18);
      --slate: #cfd7d0;
      --slate-hover: #ffffff;
      --depart: #c2cac3;
      --depart-soft: #39463c;
      --depart-paper: #333f36;
      --depart-line: rgba(235, 250, 240, 0.25);
      --depart-ring: rgba(235, 250, 240, 0.18);
      --required: #e0685e;
      --due: #99a49b;
      --slipping: #d9a94e;
      --paid: #56b985;
      --paid-soft: #22352a;
      --paid-line: #2e4d3b;

      --go: #e6b34a;        /* the threshold gold — go moments only (round 4) */
      --go-hover: #d8a437;
      --go-ink: #211d12;
      --pink-soft: #3a1230;
      --pink-tag-bg: rgba(255, 0, 199, 0.22);
      --pip-host-bg: #39463c;
      --pip-host-fg: #adb8ae;
      --pip-flag-bg: #3c211c;
      --pip-flag-fg: #e08a7c;
      --pip-pending-bg: #333f36;
      --pip-pending-fg: #99a49b;
      --host-purple: #cfd7d0;
      --host-purple-soft: #39463c;
      --hover-wash: rgba(235, 250, 240, 0.06);
      --hover-wash-strong: rgba(235, 250, 240, 0.10);
      --hover-edge: rgba(235, 250, 240, 0.17);
      --shadow-card:
        0 1px 0 rgba(0, 0, 0, 0.3),
        0 4px 10px rgba(0, 0, 0, 0.4);
      --shadow-paper:
        0 1px 0 rgba(0, 0, 0, 0.3),
        0 6px 14px rgba(0, 0, 0, 0.5),
        0 18px 30px rgba(0, 0, 0, 0.4);
      --shadow-paper-deep:
        0 1px 0 rgba(0, 0, 0, 0.3),
        0 18px 40px rgba(0, 0, 0, 0.5),
        0 50px 90px rgba(0, 0, 0, 0.35);
      color-scheme: dark;
  }
  :root[data-theme="light"] {
      --paper: #ffffff;
      --paper-edge: #e7dfcd;
      --paper-warm: #fbf8f0;
      --paper-warm-2: #f3edde;
      --paper-shadow: rgba(64, 52, 24, 0.10);
      --paper-deep-shadow: rgba(64, 52, 24, 0.18);
      --board: #2e2e2e;
      --board-2: #262626;
      --board-edge: #1a1a1a;
      --desk: #f4efe3;
      --desk-2: #ece5d4;
      --cork: #1f1f1f;
      --cork-2: #171717;
      --cork-shadow: rgba(0, 0, 0, 0.18);
      --ink: #26221a;
      --ink-soft: #544e42;
      --ink-faint: #8e8674;
      --ink-hover: #000000;
      --arrive: #4a443a;
      --arrive-soft: #ece5d4;
      --arrive-paper: #f3edde;
      --arrive-line: rgba(48, 38, 14, 0.25);
      --arrive-ring: rgba(48, 38, 14, 0.18);
      --slate: #2f2a20;
      --slate-hover: #000000;
      --depart: #4a443a;
      --depart-soft: #ece5d4;
      --depart-paper: #f3edde;
      --depart-line: rgba(48, 38, 14, 0.25);
      --depart-ring: rgba(48, 38, 14, 0.18);
      --required: #c44;
      --due: #79705d;
      --slipping: #8a6116;
      --paid: #2e7d57;
      --paid-soft: #eef6f1;
      --paid-line: #cfe5da;

      --go: #e6b34a;        /* the threshold gold — go moments only (round 4) */
      --go-hover: #d8a437;
      --go-ink: #211d12;
      --pink-soft: #ffe3f8;
      --pink-tag-bg: rgba(255, 0, 199, 0.12);
      --pip-host-bg: #efe9db;
      --pip-host-fg: #6b6353;
      --pip-flag-bg: #f8d7d2;
      --pip-flag-fg: #a13b2c;
      --pip-pending-bg: #f3edde;
      --pip-pending-fg: #79705d;
      --host-purple: #2f2a20;
      --host-purple-soft: #efe9db;
      --hover-wash: rgba(64, 52, 24, 0.05);
      --hover-wash-strong: rgba(64, 52, 24, 0.08);
      --hover-edge: rgba(64, 52, 24, 0.15);
      --shadow-card: 0 1px 0 rgba(64, 52, 24, 0.05), 0 4px 10px rgba(64, 52, 24, 0.09);
      --shadow-paper: 0 1px 0 rgba(64, 52, 24, 0.05), 0 6px 14px rgba(64, 52, 24, 0.14), 0 18px 30px rgba(64, 52, 24, 0.10);
      --shadow-paper-deep: 0 1px 0 rgba(64, 52, 24, 0.05), 0 18px 40px rgba(64, 52, 24, 0.12), 0 50px 90px rgba(64, 52, 24, 0.07);
      color-scheme: light;
  }
}