@layer base {
  :root {
    /* Off-white cotton paper */
    --paper: #f4f0e8;
    --paper-edge: #e8e2d4;
    --paper-texture: url("/assets/paper-texture-d7da9336.png");
    --paper-warm: #f6f1e6;
    --paper-warm-2: #f1ebde;
    --paper-shadow: rgba(60, 50, 30, 0.18);
    --paper-deep-shadow: rgba(40, 30, 10, 0.28);

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

    /* Desk surface */
    --desk: #f0eee9;
    --desk-2: #ebe5d6;

    /* 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: #1a1814;
    --ink-soft: #4a4640;
    --ink-faint: #8a8478;

    /* Tonal accents — printed color blocks, not chrome */
    --arrive: #4a7c4e;       /* mossy / forest green */
    --arrive-soft: #d3e0d2;
    --arrive-paper: #e9efe5;
    --arrive-line: rgba(74, 124, 78, 0.30);
    --arrive-ring: rgba(74, 124, 78, 0.22);
    /* Circle slate-blue — borrowed from the sibling Circle app's --color-slate.
       Used for primary CTAs to keep family resemblance across products. */
    --slate: #4f6d7a;
    --slate-hover: #3d5a66;

    --depart: #2f4858;       /* cool ink-blue / dusk */
    --depart-soft: #cfd8de;
    --depart-paper: #e7ecef;
    --depart-line: rgba(47, 72, 88, 0.28);
    --depart-ring: rgba(47, 72, 88, 0.18);

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

    /* 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 */
    --pip-host-bg: #efe1c8;
    --pip-host-fg: #8a6429;
    --pip-flag-bg: #f8d7d2;
    --pip-flag-fg: #a13b2c;
    --pip-pending-bg: #f3e3c5;
    --pip-pending-fg: #806026;

    /* Type stack — Filson display + sans body, no serif, no mono.
       Filson 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: 'Filson Pro', 'Inter', system-ui, -apple-system, sans-serif;
    --sans: system-ui, -apple-system, 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --hand: 'Caveat', 'Patrick Hand', cursive;

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

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

    /* Square-edge radii match the ink-stamped feel */
    --radius-xs: 1px;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 14px;

    /* 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(40,30,10,0.18),
      0 50px 90px rgba(40,30,10,0.10);

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