/*
  The Corner Table — design tokens (bold direction)
  Extracted 2026-10-18 from design/mockups/{landing-bold,creator,creator-apply,business,admin}.
  All five mockups link this file (migrated 2026-10-19); their local :root blocks only alias page-local names to these tokens.
  Every merge from the mockups' values into these tokens is listed in design/COMPONENTS.md ("Merges to review").
  Rules and rationale live in DESIGN.md.

  Structure
    1. Core palette        ink, ink-soft, cream, card
    2. Doors               pink (creators), lime (businesses), plum (our team): base, deep, wash, floor
    3. Landing scene       sky and ground stops that continue the storefront art
    4. Derived colors      color-mix() of the tokens above, no new hues
    5. Type                families, a text scale, display roles
    6. Radii, spacing, control heights
    7. Shadows             lifts, bevels, wells, rings
    8. Motion              easings and durations
    9. Door scopes         .door-pink / .door-lime / .door-plum set --door-* for shared components
*/

:root{
  /* (fonts: see the @font-face rules at the end of this file) */
  /* ---------- 1. Core palette ---------- */
  --ink:#2E1236;            /* all type, every focus ring. 16.4:1 on card, 9.3–9.5:1 on the sky */
  --ink-soft:#5B4562;       /* secondary text. 8.3:1 on card, 7.2:1 on pink floor, 7.6:1 on lime floor, 7.4:1 on plum floor */
  --cream:#FFF4EC;          /* surfaces on top of a color: the ticket, the email card, cream text on ink */
  --card:#FFFCF9;           /* counters: cards, sheets, bars, dialogs, in all three apps */
  --ink-rgb:46,18,54;       /* ink as numbers, for shadows: rgba(var(--ink-rgb), a) */

  /* ---------- 2. Doors: base · deep · wash · floor ---------- */
  /* base  = the door's color: actions, chosen states, the awning
     deep  = its depth step: bevels, the invalid ring (never text)
     wash  = the lightest fill: open states, active nav, notes
     floor = the ground of every screen inside that door's shop */
  --pink:#FF4FA3;       --pink-deep:#C21F72;  --pink-wash:#FFE1EE;  --pink-floor:#FBE8EE;   /* creators   */
  --lime:#D8E33F;       --lime-deep:#98A512;  --lime-wash:#EAF09A;  --lime-floor:#F2F5D4;   /* businesses */
  --plum:var(--ink);    --plum-deep:#CDBBD3;  --plum-wash:#E6DCE9;  --plum-floor:#F2EDF3;   /* our team (Backstage): plum is ink */

  /* ---------- 3. Landing scene (continues the storefront art; never used inside the apps) ---------- */
  --sky-lilac:#DAB7EB;  --sky-rose:#EAB6DD;   --sky-orange:#F7B09C;
  --ground-rose:#F6C2D1; --ground-peach:#F6BBA9; --ground-orange:#FAB07A;
  --sidewalk:#EBCBC7;

  /* ---------- 4. Derived colors (mixes of the tokens above) ---------- */
  --pink-mute:color-mix(in srgb, var(--ink) 8%, var(--pink-wash));          /* disabled pink primary */
  --lime-mute:color-mix(in srgb, var(--ink) 8%, var(--lime-wash));          /* disabled lime primary (reserved) */
  --plum-hover:color-mix(in srgb, var(--plum-floor) 40%, var(--card));      /* late to-do rows, hovered queue rows */
  --scroll-thumb:color-mix(in srgb, var(--pink-deep) 25%, var(--pink-floor));
  --ink-bevel:color-mix(in srgb, #000 45%, var(--ink));                     /* the bevel under an ink pill */

  /* ---------- 5. Type ---------- */
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;                    /* self-hosted: design/fonts/fraunces (OFL) */
  --font-text:"Bricolage Grotesque","Helvetica Neue",Helvetica,Arial,sans-serif;  /* self-hosted: design/fonts/bricolage-grotesque (OFL) */
  --display-weight:900;                       /* Fraunces weight for every display role: change it here only */
  --display-variation:"SOFT" 100,"WONK" 1;    /* Fraunces softness and wonky letterforms: change them here only */
  /* Optical size is automatic for both faces (font-optical-sizing:auto): opsz follows the font size. */

  /* Text scale (Bricolage Grotesque). Body is 16px in the creator and business apps, 15px in Backstage. */
  --text-xs:12px;     /* photo tags, tab labels, badges, fine print */
  --text-sm:13px;     /* chips, field labels in a kv, small labels */
  --text-md:14px;     /* meta lines, hints, sub lines */
  --text-base:15px;   /* Backstage body, labels, pills on phones */
  --text-lg:16px;     /* app body, buttons */
  --text-xl:17px;     /* field input text, landing body, "when" lines */
  --text-2xl:18px;    /* leads, status lead, numbers that need weight */

  /* Display roles (Fraunces at --display-weight). Kept as exact roles, not a ratio scale. */
  --display-wordmark:21px;        /* app bar, phone; 26px desktop (--display-wordmark-lg) */
  --display-wordmark-lg:26px;
  --display-name:22px;            /* creator name on a request card; Backstage wordmark; dialog title */
  --display-card:22px;            /* opportunity card name (was 23px) */
  --display-sub:20px;             /* Backstage section heads, "How creators see it" */
  --display-section:24px;         /* section heads, "What happens next", business dialog title */
  --display-sheet:26px;           /* request sheet heading */
  --display-detail:28px;          /* Backstage detail name, offer status title */
  --display-step:32px;            /* apply step title, creator detail name (phone) */
  --display-title:34px;           /* screen title, phone */
  --display-title-lg:48px;        /* screen title, desktop */
  --display-detail-lg:44px;       /* creator detail name, desktop */
  --display-admin-title:40px;     /* Backstage screen title */
  --display-status:clamp(38px,11vw,54px);   /* apply status heading */
  --display-sent:clamp(46px,13vw,76px);     /* "Request sent." */
  --display-panel:clamp(48px,7.4vw,6rem);   /* landing door panels */
  --leading-display:1.05;  --leading-tight:1.1;  --leading-body:1.5;  --leading-snug:1.45;
  --tracking-display:-.015em;

  /* ---------- 6. Radii, spacing, control heights ---------- */
  --r-pill:999px;  --r-circle:50%;
  --r-xs:14px;     /* tabs, dropdown rows, More rows, focus outline */
  --r-sm:16px;     /* fields, toast, summary chip, option tiles */
  --r-md:20px;     /* tiles inside cards: notes, visit box, kv groups, banners */
  --r-lg:24px;     /* cards, photos, lists */
  --r-xl:28px;     /* sheets, request cards, status cards, dialogs */

  --gap-tonal:3px;  /* the floor showing between stacked rows: no hairlines anywhere */
  --space-0:2px; --space-1:4px; --space-1h:6px; --space-2:8px; --space-2h:10px; --space-3:12px; --space-3h:14px;
  --space-4:16px; --space-4h:18px; --space-5:20px; --space-6:24px; --space-7:28px; --space-8:32px; --space-10:40px;
  --gutter:16px;      /* phone; 24px apply ≥640, 28px Backstage, 32px apps ≥900 */
  --gutter-md:24px; --gutter-lg:32px;

  --h-chip:28px;      /* status chips, door tags */
  --h-target:44px;    /* every tap target's minimum */
  --h-button:48px;    /* default pill */
  --h-field:52px;     /* inputs, apply buttons, sticky-bar pills */
  --h-option:56px;    /* day option pills */
  --tabbar:68px;

  /* ---------- 7. Shadows (all tinted with ink, never black) ---------- */
  --shadow-lift:inset 0 1px 0 #fff,0 1px 3px rgba(var(--ink-rgb),.1),0 8px 22px rgba(var(--ink-rgb),.07);   /* counters on a floor */
  --shadow-raise:0 2px 6px rgba(var(--ink-rgb),.06),0 14px 34px rgba(var(--ink-rgb),.1);                   /* sheets, step cards, status cards */
  --shadow-hover:0 2px 6px rgba(var(--ink-rgb),.08),0 16px 32px rgba(var(--ink-rgb),.12);                  /* card hover, dropdown list */
  --shadow-pop:0 24px 70px rgba(var(--ink-rgb),.32);                                                       /* dialogs */
  --shadow-bar:0 -2px 6px rgba(var(--ink-rgb),.05),0 -10px 26px rgba(var(--ink-rgb),.08);                  /* tab bar, sticky action bar */
  --shadow-drop:0 6px 16px rgba(var(--ink-rgb),.25);                                                       /* dark pills, the ink app bar */
  --shadow-idle:inset 0 1px 0 #fff,0 1px 3px rgba(var(--ink-rgb),.14),0 4px 10px rgba(var(--ink-rgb),.06); /* unchosen option pills, chips that toggle */
  --well:inset 0 2px 4px rgba(var(--ink-rgb),.07);                                                         /* fields, textareas */
  --ring-focus:inset 0 0 0 2px var(--ink);
  --ring-invalid:inset 0 0 0 2px var(--pink-deep);
  --ring-outline:inset 0 0 0 2px var(--ink);                                                               /* outline buttons */
  /* The clay bevel (door-scoped: see section 9). Detector flags it as [side-tab]; it is intended. */
  --bevel:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 var(--door-deep),0 4px 12px rgba(var(--ink-rgb),.2);
  --bevel-pressed:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 var(--door-deep),0 1px 4px rgba(var(--ink-rgb),.2);
  --bevel-ink:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -3px 0 var(--ink-bevel),0 4px 12px rgba(var(--ink-rgb),.22);

  /* ---------- 8. Motion ---------- */
  --ease-out:cubic-bezier(.16,1,.3,1);     /* everything that opens, lifts or arrives */
  --ease-in:cubic-bezier(.7,0,.84,0);      /* the door panel closing */
  --dur-fast:.2s;     /* fills, chevrons, hover colors */
  --dur-base:.3s;     /* lifts, pills */
  --dur-slow:.6s;     /* sheets and status cards arriving */
  --dur-door:.75s;    /* landing panel opening out of the door */
  --dur-door-close:.45s;
  --dur-bell-sway:1.2s; --dur-bell-ring:.8s;
  /* Under prefers-reduced-motion: transition:none and animation:none, everywhere. */

  /* ---------- 9. Default door (overridden per app) ---------- */
  --door:var(--pink); --door-deep:var(--pink-deep); --door-wash:var(--pink-wash); --door-floor:var(--pink-floor);
}

/* Door scopes: put one on <body> (or a panel) so shared components pick up the right shop. */
.door-pink{--door:var(--pink);--door-deep:var(--pink-deep);--door-wash:var(--pink-wash);--door-floor:var(--pink-floor);--door-mute:var(--pink-mute)}
.door-lime{--door:var(--lime);--door-deep:var(--lime-deep);--door-wash:var(--lime-wash);--door-floor:var(--lime-floor);--door-mute:var(--lime-mute)}
.door-plum{--door:var(--plum);--door-deep:var(--plum-deep);--door-wash:var(--plum-wash);--door-floor:var(--plum-floor);--door-mute:var(--plum-wash)}
/* Custom properties resolve where they're declared, so the bevels set at :root keep pink-deep everywhere.
   Redeclaring them in each scope makes them pick up that door's --door-deep. */
.door-pink,.door-lime,.door-plum{
  --bevel:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -3px 0 var(--door-deep),0 4px 12px rgba(var(--ink-rgb),.2);
  --bevel-pressed:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 var(--door-deep),0 1px 4px rgba(var(--ink-rgb),.2);
}

/* ---------- Brand fonts (SIL Open Font License; licenses beside the files) ---------- */
@font-face{font-family:"Fraunces";src:url(fonts/fraunces/Fraunces-Variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(fonts/fraunces/Fraunces-Italic-Variable.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage-grotesque/BricolageGrotesque-Variable.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap}
/* Fraunces' SOFT and WONK apply everywhere from the root; Bricolage has neither axis and ignores them. */
html{font-variation-settings:var(--display-variation);font-optical-sizing:auto}