/* ============================================================
   BakeryOS — CANONICAL DESIGN TOKENS (single source of truth)
   Mirror of the Design System: Bakery_Marketing_and_Branding\Design System	okens
   Do NOT hand-edit — re-sync from the canonical Design System. Synced 2026-06-15 BST.
   ============================================================ */
/* ============================================================
   COLORS · BakeryOS
   Wheat & crust palette. Two themes: Jour (light) · Nuit (dark).
   The brown brand surfaces (sidebar / hero / login) stay dark in
   both themes. Per-tenant accent overrides --ble for white-label.
   Canonical token names match the production app (French).
   English semantic aliases are provided alongside.
   ============================================================ */

:root {
  /* — Brand palette — */
  --ble:         #d4a93a;   /* wheat / gold — primary accent          */
  --ble-clair:   #ecd79c;   /* light wheat — highlights, hover        */
  --or:          #c9971f;   /* deep gold — icons, emphasis            */
  --croute:      #7a4a1e;   /* crust brown — primary brand surface    */
  --croute-fonce:#4e2f12;   /* deep crust — sidebar/hero base         */
  --levain:      #9a7b46;   /* levain — quiet secondary               */

  /* — Per-tenant accent (white-label). Defaults to wheat-gold. — */
  --accent:      var(--ble);
  --accent-fonce:var(--or);

  /* — Surfaces · Jour (light) — */
  --bg:         #f3e9d6;    /* warm paper page background              */
  --bg-2:       #ece0c8;    /* recessed background                    */
  --surface:    #fffdf8;    /* card surface                           */
  --surface-2:  #f7efde;    /* table header / inset                   */
  --ligne:      #e7dbc2;    /* hairline                               */
  --ligne-fort: #d8c8a6;    /* stronger border                        */

  /* — Text · Jour — */
  --txt:        #2c2620;    /* primary text                           */
  --txt-2:      #62543d;    /* secondary text                         */
  --txt-3:      #9c8f78;    /* tertiary / muted                       */

  /* — Semantic — */
  --vert:  #2e7d4f;  --vert-bg:  #e4f1e8;   /* good / paid / >= target */
  --ambre: #a9760a;  --ambre-bg: #fbeecb;   /* warning / to-do / floor */
  --rouge: #b23b3b;  --rouge-bg: #f8e2e2;   /* below floor / urgent    */
  --bleu:  #3b6ea5;  --bleu-bg:  #e6eef7;   /* info                    */

  /* — English semantic aliases — */
  --color-accent:        var(--accent);
  --color-brand-surface: var(--croute-fonce);
  --surface-page:        var(--bg);
  --surface-card:        var(--surface);
  --surface-inset:       var(--surface-2);
  --border-hairline:     var(--ligne);
  --border-strong:       var(--ligne-fort);
  --text-body:           var(--txt);
  --text-muted:          var(--txt-2);
  --text-faint:          var(--txt-3);
  --status-good:         var(--vert);
  --status-warn:         var(--ambre);
  --status-bad:          var(--rouge);
  --status-info:         var(--bleu);
}

/* — Surfaces · Nuit (dark) — deep roasted-malt browns, never pure black — */
:root[data-theme="nuit"] {
  --bg:#1c1712;       --bg-2:#15110c;
  --surface:#26201a;  --surface-2:#2e271f;
  --ligne:#3a3025;    --ligne-fort:#4a3d2d;
  --txt:#f3e9d6;      --txt-2:#bcae96;  --txt-3:#a2947c;
  /* Semantic FOREGROUNDS get their own night ramp — the day inks (#a9760a amber…) sit ~2.9:1
     on the dark tints, below WCAG AA. These are lifted to ≥4.5:1 on their -bg partners. */
  --vert:#5fbe8a;  --ambre:#e0a63d;  --rouge:#e78787;  --bleu:#82abd8;
  --vert-bg:#1d3326;  --ambre-bg:#3a2e12;  --rouge-bg:#3a2020;  --bleu-bg:#1d2a3a;
}

/* — Always-dark BRAND chrome (sidebar · hero · gate · splash) — one ink family instead of
     hand-mixed creams/overlays scattered across files. Same in both themes by design. — */
:root {
  --surface-brand:     var(--croute-fonce);
  --on-brand:          #f7ecd7;                  /* cream ink on crust                */
  --on-brand-dim:      rgba(247,236,215,.72);    /* secondary cream                   */
  --on-brand-faint:    rgba(247,236,215,.45);    /* tertiary cream                    */
  --brand-hairline:    rgba(247,236,215,.14);    /* separators on crust               */
  --brand-overlay-soft:rgba(255,255,255,.07);    /* hover wash on crust               */
  --brand-overlay-med: rgba(255,255,255,.14);    /* active wash on crust              */
}

/* ============================================================
   FONTS · BakeryOS
   TeX Gyre Pagella — an open book serif metric-compatible with
   Palatino. This is the cross-platform webfont match for the
   brand's native Apple serif (Iowan Old Style / Palatino), so
   the "menu card" display type renders identically everywhere.
   ============================================================ */

@font-face {
  font-family: "TeX Gyre Pagella";
  src: url("fonts/pagella-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TeX Gyre Pagella";
  src: url("fonts/pagella-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "TeX Gyre Pagella";
  src: url("fonts/pagella-bold.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TeX Gyre Pagella";
  src: url("fonts/pagella-bolditalic.woff2") format("woff2");
  font-weight: 600 700;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   TYPOGRAPHY · BakeryOS
   Display / headings  → elegant book serif (the "menu card" feel).
   UI / body           → clean humanist sans (native system stack).
   All numbers use tabular-nums for money / hours / quantities.

   FONT NOTE: the display serif SHIPS as TeX Gyre Pagella (four
   self-hosted woff2 above, preloaded in index.html) so the menu-card
   voice renders identically on every platform. Palatino/Georgia are
   fallbacks only — do NOT strip the @font-face block.
   ============================================================ */

:root {
  /* — Families — */
  /* Display serif ships as TeX Gyre Pagella (a Palatino-family webfont), so the
     "menu card" type renders identically on every platform. The Palatino/Georgia
     names remain as graceful fallbacks if the webfont is ever stripped. */
  --serif: "TeX Gyre Pagella", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; /* @kind font */
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* @kind font */

  --font-display: var(--serif); /* @kind font */
  --font-body:    var(--sans); /* @kind font */

  /* — Type scale (px). hero/title use the serif; body/label use sans — */
  --fs-hero:      44px;   /* dashboard / landing headline (desktop)   */
  --fs-hero-mob:  30px;   /* hero on mobile                           */
  --fs-display:   34px;   /* splash / big serif                       */
  --fs-title:     24px;   /* page title                               */
  --fs-title-sm:  20px;   /* topbar crumb / section head              */
  --fs-kpi:       30px;   /* KPI numbers (serif, tabular)             */
  --fs-card:      16.5px; /* card title (serif)                       */
  --fs-body:      15px;   /* body                                     */
  --fs-body-sm:   14px;   /* dense body / table                       */
  --fs-label:     11px;   /* eyebrow / uppercase tracked label        */
  --fs-micro:     12px;   /* footnote / caption                       */

  /* — Weights — */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-heavy:   800; /* @kind font */

  /* — Line heights — */
  --lh-tight:  1.05; /* @kind font */
  --lh-snug:   1.2;  /* @kind font */
  --lh-body:   1.5;  /* @kind font */

  /* — Tracking — */
  --tracking-eyebrow: 4px;   /* @kind font */
  --tracking-label:   1.2px; /* @kind font */
  --tracking-nav:     2.5px; /* @kind font */
}

/* Number-bearing elements should opt into tabular figures:
   font-variant-numeric: tabular-nums (money, hours, quantities). */

/* ============================================================
   SPACING & RADIUS · BakeryOS
   4px base grid. Generous padding for "calm density".
   Radius: 16 cards · 10 small · 7 xs · 30 pills/chips.
   ============================================================ */

:root {
  /* — Spacing scale (4px grid) — */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  18px;
  --space-6:  22px;
  --space-7:  26px;
  --space-8:  30px;
  --space-9:  40px;

  /* — Page padding — */
  --page-pad-x:        30px;  /* desktop horizontal page padding       */
  --page-pad-x-mobile: 16px;  /* mobile horizontal page padding        */
  --page-pad-y:        26px;  /* desktop top padding                   */
  --page-max:          1240px;/* page content max width                */

  /* — Card padding — */
  --card-pad:    16px;
  --card-pad-lg: 18px;

  /* — Layout grid gap — */
  --grid-gap: 18px;

  /* — Sidebar width — */
  --sidebar-w: 264px;

  /* — Radius — */
  --rayon:    16px;   /* cards                                          */
  --rayon-lg: 20px;   /* hero, gate, modals — the ONE large radius      */
  --rayon-sm: 10px;   /* buttons, inputs, small cards                   */
  --rayon-xs: 7px;    /* editable cells, micro                          */
  --rayon-pill: 30px; /* chips, segmented controls, round buttons       */

  /* — English aliases — */
  --radius-card:  var(--rayon);
  --radius-sm:    var(--rayon-sm);
  --radius-xs:    var(--rayon-xs);
  --radius-pill:  var(--rayon-pill);

  /* — Min tap target (kitchen-legible, gloved fingers) — */
  --tap-min: 44px;
}

/* ============================================================
   EFFECTS · BakeryOS
   Warm-tinted soft shadows (brown on light, black on dark),
   transitions and motion. All decorative motion must respect
   prefers-reduced-motion at the usage site.
   ============================================================ */

:root {
  /* — Elevation (warm brown-tinted on light) — */
  --ombre-1:    0 1px 2px rgba(70,45,12,.06), 0 4px 14px rgba(70,45,12,.06);
  --ombre-2:    0 2px 6px rgba(70,45,12,.08), 0 18px 42px rgba(70,45,12,.12);
  --ombre-hero: 0 30px 80px rgba(40,22,4,.34);

  /* — English aliases — */
  --shadow-e1:   var(--ombre-1);
  --shadow-e2:   var(--ombre-2);
  --shadow-hero: var(--ombre-hero);

  /* — Focus ring (gold) — */
  --ring: 0 0 0 3px rgba(212,169,58,.20);

  /* — Transitions — */
  --t-rapide: .16s cubic-bezier(.4,0,.2,1);    /* @kind other */
  --t-moyen:  .34s cubic-bezier(.34,1.2,.34,1);/* @kind other */

  /* — Paper grain overlay (apply on dark brand surfaces, ~8%) — */
  --grain: radial-gradient(rgba(255,255,255,.7) .5px, transparent .6px); /* @kind other */
  --grain-size: 4px 4px; /* @kind other */

  /* — Brand gradients — */
  --grad-crust:   linear-gradient(120deg, var(--croute), #8a561f);
  --grad-sidebar: linear-gradient(180deg, var(--croute-fonce), #3a230e 60%, #2e1b09);
  --grad-hero:    radial-gradient(130% 120% at 88% -10%, rgba(212,169,58,.42), transparent 52%),
                  linear-gradient(120deg, #3f250e, #5a3414 52%, #6f421b); /* @kind other */
}

/* — Warm black-based shadows on dark theme — */
:root[data-theme="nuit"] {
  --ombre-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  --ombre-2: 0 2px 6px rgba(0,0,0,.4), 0 18px 42px rgba(0,0,0,.5);
}