/* ═══════════════════════════════════════════════════════
   CROIS — DESIGN-SYNC FOUNDATION HEADER
   Committed template. Prepended to design-tokens.css by
   .design-sync/assemble-foundation.mjs → .design-sync/foundation.css
   (the cfg.cssEntry the converter ships). Carries the brand
   webfonts + global typography base; the token :root vars come
   from design-tokens.css (generated from theme.ts).
   ═══════════════════════════════════════════════════════ */

/* Brand webfonts — loaded remotely at runtime ([FONT_REMOTE]). */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

/* Global typography base — Crois' three brand families on raw tags.
   Sizes resolved from the repo's Tailwind v4 type scale (theme.css
   referenced --text-* preset vars that don't exist outside Tailwind). */
:root { --font-weight-normal: 400; --font-weight-medium: 500; }

h1 { font-family: 'Playfair Display', serif; font-size: 1.5rem;  font-weight: 500; line-height: 1.3; }
h2 { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 500; line-height: 1.3; }
h3 { font-family: 'Inter', sans-serif;       font-size: 1.125rem;font-weight: 500; line-height: 1.4; }
h4 { font-family: 'Inter', sans-serif;       font-size: 1rem;    font-weight: 500; line-height: 1.5; }
label  { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.5; }
button { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.5; }
input  { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; }
p { font-family: 'Inter', sans-serif; }

/* ═══════════════════════════════════════════════════════
   CROIS — DESIGN TOKENS (CSS mirror)
   GENERATED by scripts/generate-tokens.mjs — do not edit.
   Source of truth: src/app/components/theme.ts
   Ledger: design-tokens.json
   ═══════════════════════════════════════════════════════ */
:root {
  --theme-modeclair-bg: #F6F3ED;
  --theme-modeclair-surface: #FFFFFF;
  --theme-modeclair-elevated: #F0ECE4;
  --theme-modeclair-fg: #1C1915;
  --theme-modeclair-fgsoft: #3D3832;
  --theme-modeclair-muted: #8A8279;
  --theme-modeclair-dim: #B5AFA6;
  --theme-modeclair-line: rgba(28,25,21,0.07);
  --theme-modeclair-linestrong: rgba(28,25,21,0.10);
  --theme-modeclair-glass: rgba(28,25,21,0.03);
  --theme-modeclair-cognac: #A07850;
  --theme-modeclair-bordeaux: #7D2D3C;
  --theme-modeclair-sage: #6B7A58;
  --theme-modeclair-ardoise: #5A6875;
  --theme-modeclair-rose: #B37D85;
  --theme-modeclair-tabbg: rgba(246,243,237,0.92);
  --theme-plumcharcoal-bg: #131216;
  --theme-plumcharcoal-surface: #1B1A1F;
  --theme-plumcharcoal-elevated: #232228;
  --theme-plumcharcoal-fg: #F0EBE1;
  --theme-plumcharcoal-fgsoft: #D4CFC5;
  --theme-plumcharcoal-muted: #8E8880;
  --theme-plumcharcoal-dim: #555159;
  --theme-plumcharcoal-line: rgba(240,235,225,0.06);
  --theme-plumcharcoal-linestrong: rgba(240,235,225,0.09);
  --theme-plumcharcoal-glass: rgba(240,235,225,0.03);
  --theme-plumcharcoal-cognac: #C49A76;
  --theme-plumcharcoal-bordeaux: #9C4455;
  --theme-plumcharcoal-sage: #889672;
  --theme-plumcharcoal-ardoise: #6E7B88;
  --theme-plumcharcoal-rose: #C99CA4;
  --theme-plumcharcoal-tabbg: rgba(19,18,22,0.94);
  --theme-plumcharcoal-cfg-gradient: rgb(19,18,22);
  --theme-plumcharcoal-cfg-card: #201F25;
  --theme-plumcharcoal-cfg-wrapper: #1A191E;
  --theme-neutralslate-bg: #141414;
  --theme-neutralslate-surface: #1B1B1B;
  --theme-neutralslate-elevated: #232323;
  --theme-neutralslate-fg: #F0EBE1;
  --theme-neutralslate-fgsoft: #D4CFC5;
  --theme-neutralslate-muted: #8D8A87;
  --theme-neutralslate-dim: #565554;
  --theme-neutralslate-line: rgba(240,235,225,0.06);
  --theme-neutralslate-linestrong: rgba(240,235,225,0.09);
  --theme-neutralslate-glass: rgba(240,235,225,0.03);
  --theme-neutralslate-cognac: #C49A76;
  --theme-neutralslate-bordeaux: #9C4455;
  --theme-neutralslate-sage: #889672;
  --theme-neutralslate-ardoise: #6E7B88;
  --theme-neutralslate-rose: #C99CA4;
  --theme-neutralslate-tabbg: rgba(20,20,20,0.94);
  --theme-neutralslate-cfg-gradient: rgb(20,20,20);
  --theme-neutralslate-cfg-card: #232323;
  --theme-neutralslate-cfg-wrapper: #1A1A1A;
  --brand-primary-light: #2A3FA8;
  --brand-primary-dark: #6E80DC;
  --brand-accent-bordeaux-light: #7D2D3C;
  --brand-accent-bordeaux-dark: #9C4455;
  --brand-accent-rose-ancien-light: #B37D85;
  --brand-accent-rose-ancien-dark: #C99CA4;
  --brand-accent-sauge-light: #6B7A58;
  --brand-accent-sauge-dark: #889672;
  --brand-accent-ardoise-light: #5A6875;
  --brand-accent-ardoise-dark: #6E7B88;
  --brand-accent-creme-light: #B8A880;
  --brand-accent-creme-dark: #C8B898;
  --brand-ext-grenat-light: #A24048;
  --brand-ext-grenat-dark: #D07078;
  --brand-ext-miel-light: #B49030;
  --brand-ext-miel-dark: #D4B660;
  --brand-ext-tilleul-light: #5C8852;
  --brand-ext-tilleul-dark: #88AE7A;
  --brand-ext-glycine-light: #7E6892;
  --brand-ext-glycine-dark: #A894B8;
  --brand-ext-bleu-fume-light: #4E7898;
  --brand-ext-bleu-fume-dark: #7AA0BE;
  --brand-ext-abricot-light: #C47058;
  --brand-ext-abricot-dark: #D89880;
  --brand-slot-primary-light: #2A3FA8;
  --brand-slot-primary-dark: #6E80DC;
  --brand-slot-primarytint-light: rgba(42,63,168,0.06);
  --brand-slot-primarytint-dark: rgba(110,128,220,0.10);
  --brand-slot-primarytintalt-light: rgba(42,63,168,0.10);
  --brand-slot-primarytintalt-dark: rgba(110,128,220,0.06);
  --brand-slot-ctatext-light: #FFFFFF;
  --brand-slot-ctatext-dark: #1A1410;
  --brand-slot-ctashadow-light: 0 2px 8px rgba(42,63,168,0.22);
  --brand-slot-ctashadow-dark: 0 2px 8px rgba(0,0,0,0.3);
  --brand-slot-heroaccent-light: #D4B896;
  --brand-slot-heroaccent-dark: #6E80DC;
  --brand-slot-streak-light: #7D2D3C;
  --brand-slot-streak-dark: #9C4455;
  --brand-slot-streaktint-light: rgba(125,45,60,0.06);
  --brand-slot-streaktint-dark: rgba(156,68,85,0.10);
  --brand-slot-sparkle-light: #B37D85;
  --brand-slot-sparkle-dark: #C99CA4;
  --brand-slot-stata-light: #7D2D3C;
  --brand-slot-stata-dark: #9C4455;
  --brand-slot-statb-light: #6B7A58;
  --brand-slot-statb-dark: #889672;
  --brand-slot-weektoday-light: #6B7A58;
  --brand-slot-weektoday-dark: #889672;
  --brand-slot-weekdone-light: rgba(179,125,133,0.28);
  --brand-slot-weekdone-dark: rgba(201,156,164,0.20);
  --brand-slot-checkmark-light: #6B7A58;
  --brand-slot-checkmark-dark: #889672;
  --brand-slot-checkbg-light: rgba(107,122,88,0.1);
  --brand-slot-checkbg-dark: rgba(136,150,114,0.1);
  --brand-slot-probadge-light: #5A6875;
  --brand-slot-probadge-dark: #6E7B88;
  --brand-slot-protint-light: rgba(90,104,117,0.06);
  --brand-slot-protint-dark: rgba(110,123,136,0.10);
  --brand-slot-favori-light: #B37D85;
  --brand-slot-favori-dark: #C99CA4;
  --brand-slot-favoritint-light: rgba(179,125,133,0.06);
  --brand-slot-favoritint-dark: rgba(201,156,164,0.10);
  --brand-slot-pipscompleted-light: #B37D85;
  --brand-slot-pipscompleted-dark: #C99CA4;
  --brand-slot-pipsactive-light: #7D2D3C;
  --brand-slot-pipsactive-dark: #9C4455;
  --brand-slot-lealabel-light: #6B7A58;
  --brand-slot-lealabel-dark: #889672;
  --brand-slot-leabg-light: #FDFBF5;
  --brand-slot-leabg-dark: rgba(200,184,152,0.06);
  --brand-slot-leaborder-light: rgba(107,122,88,0.3);
  --brand-slot-leaborder-dark: rgba(136,150,114,0.2);
  --brand-slot-leashadow-light: 0 1px 3px rgba(184,168,128,0.05), 0 4px 12px rgba(184,168,128,0.06);
  --brand-slot-context-light: #5A6875;
  --brand-slot-context-dark: #6E7B88;
  --brand-slot-difficile-light: #9C968E;
  --brand-slot-difficile-dark: #787478;
  --brand-slot-activeepbg-light: #FFFCF7;
  --brand-slot-activeepbg-dark: rgba(110,128,220,0.06);
  --brand-slot-activeepshadow-light: 0 1px 3px rgba(42,63,168,0.06), 0 4px 14px rgba(42,63,168,0.08);
  --brand-slot-activeepshadow-dark: 0 1px 3px rgba(0,0,0,0.25), 0 4px 14px rgba(0,0,0,0.18);
  --shadow-light-c: 0 1px 2px rgba(28,25,21,0.03), 0 4px 14px rgba(28,25,21,0.05);
  --shadow-light-cl: 0 2px 6px rgba(28,25,21,0.04), 0 8px 24px rgba(28,25,21,0.06);
  --shadow-light-r: 0 1px 4px rgba(28,25,21,0.035);
  --shadow-dark-c: 0 1px 3px rgba(0,0,0,0.25), 0 4px 14px rgba(0,0,0,0.18);
  --shadow-dark-cl: 0 2px 6px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.2);
  --shadow-dark-r: 0 1px 4px rgba(0,0,0,0.22);
}

/* ─────────────────────────────────────────────────────────────────────────
   DS component utility classes — exact-value CSS
   ─────────────────────────────────────────────────────────────────────────
   The synced DS components (CroisDesign.TabBar from ui.tsx, CroisDesign.StatusBar
   from shared.tsx) use Tailwind utility classes on their internal markup, but the
   package ships no utility layer. Without these rules a component instance renders
   collapsed on canvas (see B2 QA: StatusBar rendered with no padding until a page
   carried a hand-added shim). Emitting them into the foundation makes every
   instance render correctly on any canvas page with no per-page shim.

   Scope = ONLY the classes actually used by TabBar + StatusBar (28, extracted from
   source). Values are Tailwind defaults (rem where the source uses spacing scale,
   px for the arbitrary [..] utilities). Class names with special characters use
   single-backslash CSS escaping (.pt-3\.5, .w-\[126px\], .left-1\/2) — the B2
   export shipped these double-escaped (.pt-3\\.5); it happened to apply anyway,
   but this is the correct, portable form.

   If TabBar/StatusBar markup changes (new utility classes), re-extract and update
   this file, then re-sync (see .design-sync/NOTES.md re-sync protocol).
   ───────────────────────────────────────────────────────────────────────── */

/* display / box */
.flex{display:flex}
.flex-col{flex-direction:column}
.relative{position:relative}
.absolute{position:absolute}

/* alignment */
.items-center{align-items:center}
.justify-around{justify-content:space-around}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}

/* padding */
.px-4{padding-left:1rem;padding-right:1rem}
.px-7{padding-left:1.75rem;padding-right:1.75rem}
.pt-2\.5{padding-top:0.625rem}
.pt-3\.5{padding-top:0.875rem}
.pb-1{padding-bottom:0.25rem}
.pb-7{padding-bottom:1.75rem}

/* margin */
.-mt-5{margin-top:-1.25rem}
.mb-1{margin-bottom:0.25rem}

/* gap */
.gap-1{gap:0.25rem}
.gap-\[5px\]{gap:5px}

/* size */
.w-16{width:4rem}
.w-\[126px\]{width:126px}
.w-\[134px\]{width:134px}
.h-\[5px\]{height:5px}
.h-\[34px\]{height:34px}

/* radius */
.rounded-full{border-radius:9999px}

/* position offsets */
.left-1\/2{left:50%}
.top-2\.5{top:0.625rem}

/* transform (island horizontal centering; single-axis, self-contained) */
.-translate-x-1\/2{transform:translateX(-50%)}

/* stacking */
.z-50{z-index:50}