/* ============================================================================
   THE WEDDING EDIT — DESIGN TOKENS
   ----------------------------------------------------------------------------
   Every value below was read directly off the live Wedding Edit OS prototype
   (onboarding_proto_v1c + dashboard_proto_v1c) via computed styles.
   These are NOT approximations. Do not invent new values — extend from here.

   The prototype runs Tailwind v4 + shadcn/ui. Variable names below intentionally
   mirror the shadcn token names already in that codebase, so this file can be
   dropped into the OS repo's globals.css with minimal reconciliation.
   ========================================================================== */

:root {
  /* ---- shadcn/ui core tokens (verbatim from the prototype) --------------- */
  --radius: 0.25rem;
  --background: #f2ede8;
  --foreground: #0d0d0d;
  --card: #fdfcfb;
  --card-foreground: #0d0d0d;
  --popover: #fdfcfb;
  --popover-foreground: #0d0d0d;
  --primary: #695c39;
  --primary-foreground: #f2ede8;
  --secondary: #f2ede8;
  --secondary-foreground: #0d0d0d;
  --muted: #f2ede8;
  --muted-foreground: #957e68;
  --accent: #f2ede8;
  --accent-foreground: #0d0d0d;
  --destructive: #5e3b3d;
  --border: #957e6838;
  --input: #957e6859;
  --ring: #695c39;
  --sidebar: #0d0d0d;
  --sidebar-foreground: #f2ede8;
  --sidebar-primary: #695c39;
  --sidebar-primary-foreground: #f2ede8;
  --sidebar-accent: #695c3940;
  --sidebar-accent-foreground: #f2ede8;
  --sidebar-border: #f2ede81a;
  --sidebar-ring: #695c39;

  /* ---- Brand palette (Grain Creative brand guide, 2026) ------------------
     Kept as named tokens so brand-guide colors stay addressable even where
     the product UI uses its own surface values. */
  --twe-something-blue: #465773;
  --twe-good-luck: #565f68;
  --twe-ganache: #36241a;
  --twe-midnight-calla-lily: #2e171c;
  --twe-dusty-rose: #a27372;
  --twe-greenery: #4a4834;
  --twe-ash: #857970;
  --twe-linen: #eae3db;

  /* ---- Product surfaces (as the prototype actually renders them) ---------
     NOTE: the prototype canvas is #F2EDE8, which is a touch lighter than the
     brand guide's Linen (#EAE3DB). The prototype wins — it is the stated
     visual source of truth. Linen remains available above as --twe-linen. */
  --surface-canvas: #f2ede8;      /* form / content panel */
  --surface-raised: #fdfcfb;      /* cards */
  --surface-chrome: #565f68;      /* sidebar + mobile top bar (Good Luck) */
  --surface-shell: #e6e0da;       /* dashboard content backdrop */

  --ink: #2e171c;                 /* all headings + primary text */
  --ink-soft: #857970;            /* secondary text (Ash) */
  --ink-muted: #957e68;           /* tertiary / placeholder */
  --ink-on-dark: #f2ede8;

  --rule: rgba(149, 126, 104, 0.22);   /* hairline borders */
  --rule-strong: rgba(149, 126, 104, 0.35);
  --rule-faint: rgba(149, 126, 104, 0.12);
  --chip-idle: rgba(133, 121, 112, 0.25);
  --progress-idle: rgba(133, 121, 112, 0.28);

  /* ---- Typefaces --------------------------------------------------------
     Role assignment matches the brand guide exactly:
       Storica          → headlines + eyebrows, Light, UPPERCASE, letterspaced
       Fenul Standard   → tagline / subtitle, sentence case, italic accent
       Darker Grotesque → body, labels, inputs, buttons
       Aston Script Pro → captions and small print only */
  --font-display: 'Storica', 'Red Hat Display', Georgia, serif;
  --font-tagline: 'Fenul Standard', 'Albert Sans', Georgia, serif;
  --font-body: 'Darker Grotesque', 'Outfit', system-ui, sans-serif;
  --font-script: 'Aston Script Pro', cursive;

  /* ---- Type scale (computed values from the prototype) ------------------- */
  --t-eyebrow-size: 9px;          /* Storica 300, uppercase */
  --t-eyebrow-track: 0.18em;
  --t-head-size: 32px;            /* Storica 300, uppercase, lh 1.15 */
  --t-head-track: 0.04em;
  --t-head-leading: 1.15;
  --t-tagline-size: 42px;         /* Fenul 400, sentence case, lh 1.15 */
  --t-body-size: 19px;            /* Darker Grotesque 400 */
  --t-body-leading: 1.5;
  --t-label-size: 13px;           /* Darker Grotesque 600, uppercase */
  --t-label-track: 0.08em;
  --t-input-size: 16px;           /* Darker Grotesque 500 */
  --t-button-size: 15px;          /* Darker Grotesque 500, uppercase */
  --t-button-track: 0.08em;
  --t-stat-size: 36px;            /* Darker Grotesque 500, tracking -0.01em */

  /* ---- Geometry ---------------------------------------------------------
     The prototype is deliberately near-square: buttons render at 1px radius.
     Resist the urge to round anything. */
  --r-button: 1px;
  --r-card: 2px;
  --r-pill: 999px;

  --panel-image: 40%;   /* left image panel, desktop */
  --panel-form: 60%;    /* right form panel, desktop */
  --sidebar-w: 240px;
  --content-max: 1060px;

  --pad-panel: 40px;    /* p-10 */
  --pad-panel-xl: 48px; /* xl:p-12 */
  --bar-h: 56px;        /* h-14 mobile top bar */

  /* ---- Motion (verbatim from the prototype) ----------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.15s;
  --t-base: 0.3s;
  --t-slow: 0.5s;
}

@media (min-width: 1280px) {
  :root { --pad-panel: var(--pad-panel-xl); }
}

/* Mobile type step-down. Editorial headlines need to breathe on a 390px
   screen without wrapping into four lines. */
@media (max-width: 1023px) {
  :root {
    --t-head-size: 26px;
    --t-tagline-size: 32px;
    --t-body-size: 18px;
    --t-stat-size: 30px;
  }
}