/* ============================================================
   GENERATED FROM FIGMA VARIABLES — do not hand-edit.

   Source: Figma spK8ZHnsPlWEuD8zRmf5sY, local variable collections
   (Taily / Colors, Taily / Spacing, Taily / Radius, Taily / Type,
   plus the unnamed "Variable collection").
   49 variables, all single-mode ("Mode 1").

   To regenerate: read the local variables in Figma and re-emit.
   Every value below is copied verbatim — nothing rounded, nothing invented.
   ============================================================ */

:root {
  /* ---------- Colors · Taily / Colors ---------- */
  --ink: #1C1B18;
  --white: #FFFFFF;

  --neutral-50: #F7F4EF;
  --neutral-100: #EFEAE2;
  --neutral-200: #E2DBD0;
  --neutral-300: #C9C1B4;
  --neutral-400: #ABA294;
  --neutral-500: #857C6F;        /* glyphs, strokes and control boundaries (D-163) */
  --neutral-500-ink: #6E665A;    /* secondary TEXT (D-163): 4.5:1+ on white and neutral-50 */
  --neutral-600: #5F584E;
  --neutral-700: #443F38;

  --accent-base: #A17C4E;
  --accent-ink: #7C5D34;
  --accent-bg: #F3ECE0;

  --sage: #5E6B60;               /* Figma: secondary/sage */

  --success: #4F7A5B;            /* Figma: semantic/success */
  --success-ink: #456E50;        /* success TEXT (D-163): the base --success is for glyphs and strokes */
  --success-bg: #E9F0EA;
  --warning: #B7852F;
  --warning-bg: #F6EEDD;
  --warning-ink: #7A5A1E;        /* warning TEXT: 5.5:1 on warning-bg, 5.9:1 on neutral-50 (the base --warning is for glyphs and strokes) */
  --error: #B0553F;
  --error-bg: #F4E4DF;
  --error-ink: #9A4632;          /* error TEXT (D-163): the base --error is for glyphs and strokes */
  --info: #47698C;
  --info-bg: #E6EDF3;

  --media-placeholder: #D9D9D9;  /* Figma: media/placeholder */

  /* ---------- Spacing · Taily / Spacing ---------- */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;

  /* Round 15 (Kevin): the Garment Tile's "Tile Gradient" style — neutral-300
     at both edges fading through white (Selected_* states). */
  --tile-gradient: linear-gradient(180deg, var(--neutral-300) 0%, rgba(255, 255, 255, 0.5) 8%, #FFFFFF 50%, rgba(255, 255, 255, 0.5) 92%, var(--neutral-300) 100%);

  /* ---------- Radius · Taily / Radius ---------- */
  --radius-4: 4px;               /* not a Figma variable — the New_Sticker's literal r4 (687:7420) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-20: 20px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---------- Type sizes · Taily / Type ----------
     S-17 (pre-MVP sweep, D-443): rem on the browser's 16 px root, so the reader's text-size setting scales every size (and the icons drawn
     at a size token) — identical pixels at the default; the line heights are already unitless ratios (--lh-*). The 44 px targets, spacing
     and radii stay px. Layout tiers that must follow the text size are em media queries (components-v5.css, 18.75em = 300 px at 16). */
  --size-10: 0.625rem;   /* 10 px at the 16 px root */
  /* size/11 arrived with the Selector's ADD A SERVICE menu header and
     the 02B field labels (541:1959, 538:1516) — a Figma variable. */
  --size-11: 0.6875rem;   /* 11 px at the 16 px root */
  --size-12: 0.75rem;   /* 12 px at the 16 px root */
  /* size/14 became a real Figma variable with the Selector component
     (535:1582 menu options bind to it) — the 14px chat bubble now
     binds here too instead of a literal. */
  --size-14: 0.875rem;   /* 14 px at the 16 px root */
  --size-16: 1rem;   /* 16 px at the 16 px root */
  /* NOT a Figma variable — the Aug 2026 serif headers (Upcoming Header
     532:958, Date & Time title 277:2921) carry literal 20px, off the
     type scale. Raised as an inconsistency; tokenised here so no
     literal size leaks outside tokens.css. */
  --size-20: 1.25rem;   /* 20 px at the 16 px root */
  /* NOT a Figma variable — 08C's rating stars (584:9422) carry literal
     30px. Tokenised for the same reason. */
  --size-30: 1.875rem;   /* 30 px at the 16 px root */
  --size-24: 1.5rem;   /* 24 px at the 16 px root */
  --size-28: 1.75rem;   /* 28 px at the 16 px root */
  --size-32: 2rem;   /* 32 px at the 16 px root */
  --size-36: 2.25rem;   /* 36 px at the 16 px root */

  /* ---------- Families · Taily / Type ----------
     family/sans  = "Hanken Grotesk"
     family/serif = "Cormorant Garamond"
     Fallback stacks are added here (Figma stores only the family name). */
  --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;

  /* ---------- Unsorted Figma variables ----------
     These exist in the file and are emitted for completeness, but they do
     not look like intentional design tokens. Do not use them in screens
     without checking with Kevin first — see the note at the bottom.        */
  --component: #8A38F5;          /* Taily / Colors, ALL_SCOPES — Figma's default new-variable purple */

  /* ---------- M7 (K-03) — not Figma variables; tokenised so screens never use literals ---------- */
  /* rhythm: tight inside a group, air between groups */
  --rhythm-tight: var(--space-8);      /* label → value, row → row inside one group */
  --rhythm-group: var(--space-12);     /* section heading → its first row; stacked controls */
  --rhythm-block: var(--space-24);     /* heading → an unlabelled card / banner; a banner under a heading; a thread note → its messages */
  --rhythm-section: var(--space-32);   /* between sections on a page */
  --rhythm-major: var(--space-40);     /* hero block → first section; heading → a labelled section; last section → page actions */

  /* line-height ratios of the type scale (LAYOUT-PLAN P2-4): size/line px pairs from Figma, kept as unitless ratios so text scaling
     never makes two lines overlap. A component that sets font-size: var(--size-N) pairs it with var(--lh-N). */
  --lh-10: calc(13 / 10);
  --lh-11: calc(14 / 11);
  --lh-12: calc(16 / 12);
  --lh-14: calc(18 / 14);
  --lh-16: calc(21 / 16);
  --lh-20: calc(24 / 20);
  --lh-24: calc(29 / 24);
  --lh-28: calc(34 / 28);
  --lh-30: calc(39 / 30);
  --lh-16-roomy: calc(24 / 16);   /* the few 16 px runs that read on a 24 px line */
  --lh-12-roomy: calc(20 / 12);
  --lh-24-open: calc(31 / 24);

  /* text roles */
  --text-footnote: var(--neutral-600); /* 6.5:1 on --neutral-50, 7.0:1 on --white (K-03 #12) */

  /* status: dot colour + word ink (K-03 #7 — no blue anywhere) */
  --status-action: var(--accent-base);    --status-action-ink: var(--accent-ink);   --status-action-halo: var(--accent-bg);
  --status-pending: var(--warning);       --status-pending-ink: var(--warning-ink);
  --status-progress: var(--sage);         --status-progress-ink: var(--neutral-700);
  --status-done: var(--success);          --status-done-ink: var(--success-ink);
  --status-stop: var(--error);            --status-stop-ink: var(--error-ink);
  --status-calm: var(--neutral-500);      --status-calm-ink: var(--neutral-700);

  /* surfaces: ONE depth strategy — interactive containers are tissue white with a chalk ring, nothing else lifts */
  --card-bg: var(--white);
  --card-ring: var(--neutral-200);
  --card-ring-tap: var(--neutral-500);   /* P-31 (pre-MVP B2, D-374): a card that is ONE tap target — 3.75:1 on --neutral-50, 4.1:1 on white (WCAG 1.4.11) */
  --hairline: var(--neutral-100);

  /* avatar: initials on a warm tint (K-03 — no black squares) */
  --avatar-bg: var(--accent-bg);
  --avatar-ink: var(--accent-ink);
  --avatar-ring: color-mix(in srgb, var(--accent-base) 22%, transparent);

  /* depth for things that float above the page (menus, dropdowns vs modals, toasts, banners) — K-04 / D-213 */
  --shadow-float: 0 4px 12px color-mix(in srgb, var(--ink) 8%, transparent);
  --shadow-overlay: 0 12px 32px color-mix(in srgb, var(--ink) 20%, transparent);

  /* the stitched dash (signature 2) */
  --stitch-ink: var(--neutral-400);
  --stitch-dash: 6px;
  --stitch-gap: 4px;
  --stitch-w: 1.5px;

  /* chrome geometry (LAYOUT-PLAN P3-4): the status bar + the nav / flow / onboarding bar, and the content top under them */
  --status-h: 44px;
  --nav-h: 56px;
  --column: 390px;
  --chrome-h: calc(var(--status-h) + var(--nav-h));   /* 100 */
  --body-top: calc(var(--chrome-h) + var(--space-16));   /* 116: nav bottom + --space-16, K-04 / D-204 */

  /* shared measures (LAYOUT-PLAN P3-10) */
  --touch: 44px;                                   /* the minimum touch target */
  --tile-h: 6.875rem;                              /* the garment tile: 110 px at the 16 px root, taller with the reader's text size (S-17, D-443) */
  --glyph-box: 20px;                               /* the one glyph column of a .meta-row */
  --icon-hang: calc(var(--space-8) + var(--glyph-box));   /* a line that hangs under a meta-row's text: glyph box + the row's gap */
  --chat-measure: 85%;                             /* the widest a chat bubble and its meta / note run, of the message row */

  /* real device insets (LAYOUT-PLAN P1-4): 0 in a browser tab and in the harness */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* stacking: one ladder, each overlay is relative to its holder (LAYOUT-PLAN P3-4) */
  --z-chrome: 2;     /* status bar, nav, flow / onboarding bar, system banner */
  --z-sticky: 5;     /* sticky action bar, thread composer */
  --z-banner: 9;     /* push banner */
  --z-overlay: 10;   /* full-screen sheet overlay */
  --z-toast: 30;     /* toast */

  /* motion (K-03 #11) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 120ms;
  --dur-sheet-in: 280ms;
  --dur-sheet-out: 200ms;
  --dur-modal: 220ms;
  --press-scale: 0.97;
}

/* ============================================================
   Values that DO NOT exist in Figma — deliberately not invented.

   Referenced by the designs but with no matching variable:
     space 48px   — 08 Journey Complete, .body padding-top.
     space 128px  — the content top offset on all 14 screens.

   Type sizes present in Figma: 10 / 12 / 16 / 24 / 28 / 32 / 36.
   There is no size/13, size/14, size/18, size/20 — the stray 13 / 18 / 22 / 34
   values were snapped onto this scale rather than adding tokens.
   ============================================================ */