@import url("/static/css/generated/mobile-foundation-tokens.css");

/* ============================================================
   margherita — tokens.css
   CSS variables only. Single source of truth for the design system.
   See docs/superpowers/specs/2026-05-11-frontend-foundation-design.md §1
   ============================================================ */

:root {
  /* ── Neutrals — ink scale (11 steps) ───────────────────── */
  --ink-0:  #0F1115;
  --ink-1:  #1F2329;
  --ink-2:  #2A2F36;
  --ink-3:  #404750;
  --ink-4:  #6B7280;
  --ink-5:  #9AA0A6;
  --ink-6:  #D0D4DA;
  --ink-7:  #E5E7EB;
  --ink-8:  #F3F4F6;
  --ink-9:  #FAFBFC;
  --ink-10: #FFFFFF;

  /* ── Accents (semantic) ────────────────────────────────── */
  --emerald:        #065F46;
  --emerald-hover:  #054C39;
  --green:          #1E8A4C;
  --green-soft:     #E5F4EC;
  /* --green as text on --green-soft is 3.85:1; darkened for text only, the
     same way --red-ink is. */
  --green-ink:      #0A6B0A;
  --red:            #D63B3B;
  --red-hover:      #a82c2c;
  --red-soft:       #FCE7E7;
  /* --red as text on --red-soft is 3.89:1 — the badge audit found it on the
     invoice detail (axe, 2026-09-12). Darkened for text only, alongside the
     --gloc-*-ink family: 5.79:1, and the fill colour is untouched. */
  --red-ink:        #A82C2C;
  /* --ink-4 (--text-2) is 4.12:1 on the supply weight-toggle tint and 3.92:1
     on the rota's off-cell tint — both below AA for 10px text. This is the
     same slate, two steps down: 6.8:1 and 6.1:1 on those two surfaces. */
  --ink-4-on-tint:  #4A5568;
  --margherita:     #F8C026;
  --margherita-soft:#FEF3C7;
  --pearl:          #F5F5F2;

  /* ── Section palette ───────────────────────────────────────
     Identity colours a restaurant's own menu sections are drawn from —
     Pizzas, Pasta, Appetizers — handed out by `next_section_color`. Each
     name has a line colour (border + icon) and a soft fill for the selected
     state. Chosen to stay apart from --brand and --danger, which already mean
     something here: a section is not an action and not a warning.
     Line colours are >=4.5:1 on --bg so they can carry text if ever needed. */
  --section-green:       #1E7A5A;
  --section-green-soft:  #E3F3ED;
  --section-orange:      #B5561E;
  --section-orange-soft: #FBEDE4;
  --section-violet:      #5B4BB8;
  --section-violet-soft: #ECEAFA;
  --section-magenta:     #A32F6B;
  --section-magenta-soft:#FAE9F1;
  --section-blue:        #1F5FA8;
  --section-blue-soft:   #E6EFFA;
  --section-aqua:        #12757E;
  --section-aqua-soft:   #E1F2F3;
  --section-red:         #A83A3A;
  --section-red-soft:    #FAE8E8;

  /* ── Schedule redesign accents (C2 blue; green stays for worked hours) ── */
  --sched-blue:       #005096;
  --sched-blue-hover: #00427D;
  --sched-blue-soft:  #E7F0F7;
  --sched-blue-ink:   #003D72;

  /* ── C2 blue — global aliases (Mobile Wave 1) ──────────────────────────
     Page-scoped palettes (--nb/--ord/--inv/--lb) should migrate to these;
     when the rebrand lands, --brand points here too. */
  --c2:       var(--sched-blue);
  --c2-hover: var(--sched-blue-hover);
  --c2-soft:  var(--sched-blue-soft);
  --c2-ink:   var(--sched-blue-ink);

  /* ── Touch + mobile (Mobile Wave 1) ────────────────────────────────────
     Breakpoints — use these four, nothing else:
       1024px chrome (sidebar→drawer) · 768px tablet (2→1 col, 16px inputs)
       640px phone (tables→stacked cards, sticky bars) · 400px density only.
     Type floor ≤640px: body ≥14px, secondary ≥12px, micro-labels ≥10px. */
  --tap: 44px;

  /* Google-brand location palette — one colour per location sigla */
  --gloc-blue:#4285F4;  --gloc-red:#EA4335;  --gloc-yellow:#FBBC04; --gloc-green:#34A853;
  --gloc-purple:#A142F4; --gloc-teal:#12B5CB; --gloc-orange:#FA7B17; --gloc-pink:#F439A0;
  /* Same identities, darkened for small text on light surfaces (WCAG AA). */
  --gloc-blue-ink:#2457A6;  --gloc-red-ink:#9F2B24;  --gloc-yellow-ink:#8A5A00; --gloc-green-ink:#1E6E37;
  --gloc-purple-ink:#663399; --gloc-teal-ink:#086A78; --gloc-orange-ink:#9A4100; --gloc-pink-ink:#9B1B62;

  /* ── Semantic aliases ──────────────────────────────────── */
  --bg-page:        #EDF1F5;   /* cool grey so the white master card lifts via shadow */
  --bg-card:        var(--ink-10);
  /* Chrome = near-black navy, same family as the dashboard shell — sidebar/topbar on every page */
  --bg-chrome:      #081726;
  --surface-dark:   var(--bg-chrome);  /* legacy alias — staff_login.html, swap/release_create.html */
  --text-1:         var(--ink-0);
  --text-2:         var(--ink-4);
  --text-3:         var(--ink-5);
  --text-on-dark:   var(--ink-10);
  --text-on-dark-2: rgba(255,255,255,0.72);
  --border:         var(--ink-6);
  --border-soft:    var(--ink-7);
  --surface-soft:   var(--ink-8);
  --chrome-divider: rgba(255,255,255,0.06);
  --chrome-pill-bg:     rgba(255,255,255,0.10);
  --chrome-pill-border: rgba(255,255,255,0.18);
  --accent:         var(--margherita);
  --success:        var(--green);
  --danger:         var(--red);

  /* ── Typography ────────────────────────────────────────── */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-base: 13px;
  --font-size-md:   14px;
  --font-size-lg:   16px;
  --font-size-xl:   20px;
  --font-size-2xl:  26px;

  /* ── Spacing (4px base, compact) ───────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-sm:    4px;
  --radius:       6px;
  --radius-md:    8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px  rgba(28,43,58,0.06);
  --shadow:    0 1px 2px rgba(28,43,58,0.06), 0 10px 26px rgba(28,43,58,0.10);
  --shadow-lg: 0 2px 6px rgba(28,43,58,0.07), 0 26px 64px -22px rgba(28,43,58,0.28);

  /* ── Motion ─────────────────────────────────────────────── */
  --transition: all 150ms ease;

  /* ── Sidebar geometry ──────────────────────────────────── */
  --sidebar-w:  168px;
  --topbar-h:   48px;
  --mobile-h:   44px;

  /* ── Accent system (2026-07 dashboard redesign) ────────────
     Switchable via <html data-accent="magenta|orange|navy">,
     persisted in localStorage `posdoo_accent` (anti-flash snippet
     in base.html / base_dash.html head). Default = navy.
       --acc      decorative accent (chips, dots, bars)
       --acc-ink  text-safe accent on LIGHT surfaces
       --acc-lift text-safe accent on DARK chrome/surfaces
       --acc-soft translucent accent tint (hover/active pills)
       --acc-glow / --acc-glow-lt  page-gradient tint (dark / light)
       --acc-grad-a/b  hero-card gradient stops                    */
  --acc:        #1E3A6E;
  --acc-hover:  #16294E;
  --acc-ink:    #1E3A6E;
  --acc-lift:   #7FA1E0;
  --acc-soft:   rgba(30, 58, 110, 0.14);
  /* Ambient page-glow — kept low (Linear/Mercury: accent as light source,
     not a colour block). Softened toward the accent's lighter tint so it
     reads as glow, not paint. dark ≤11%, light ≤4%. */
  --acc-glow:   rgba(127, 161, 224, 0.11);
  --acc-glow-lt:rgba(30, 58, 110, 0.04);
  --acc-grad-a: #0B1730;
  --acc-grad-b: #1E3A6E;
  --acc-on:     #FFFFFF;

  /* Tabs-as-topbar (shell v4) — semi-opaque sticky bar, no blur
     (backdrop-filter on fixed/sticky is the known iOS float trap) */
  --tb-bar-bg:  rgba(250, 251, 252, 0.92);

  /* ── Legacy aliases for backwards compatibility ─────────── */
  /* These let pages that still reference old token names keep working
     during the migration. Remove in Phase 5 cleanup. */
  --brand:        var(--emerald);
  --brand-hover:  var(--emerald-hover);
  --bg:           var(--bg-card);
  --card-bg:      var(--bg-card);
  /* `--card` is referenced (with a #fff fallback) by the shared mobile
     stacked-card rules in mobile.css (.m-collapse / .m-actionbar / .m-sheet).
     Aliasing it to --card-bg makes those cards flip with the theme instead of
     hard-falling-back to white in dark mode. */
  --card:         var(--card-bg);
  --surface:      var(--surface-soft);
  --text:         var(--text-1);
  --nav-text:     var(--ink-10);
  --nav-active-bg:   var(--margherita);
  --nav-active-text: var(--ink-1);
  --sidebar-bg:        var(--bg-chrome);
  --mobile-header-bg:  var(--bg-chrome);

  /* Legacy aliases — surfaces */
  --page-bg:        var(--bg-page);
  --card-border:    var(--border-soft);

  /* Legacy aliases — status (mapped to new semantic colors) */
  --warning:        #B45309;
  --warning-bg:     var(--margherita-soft);
  --success-bg:     var(--green-soft);
  --success-border: rgba(30,138,76,0.20);
  --danger-bg:      var(--red-soft);
  --info:           #1E40AF;
  --info-bg:        #E5EBF7;

  /* Legacy aliases — accents */
  --brand-light:    var(--margherita-soft);
  --cta:            var(--emerald);
  --cta-active:     var(--emerald-hover);

  /* Legacy aliases — radii + shadows */
  --radius-xl:     16px;
  --radius-full:   var(--radius-pill);
  --shadow-xs:     0 1px 2px rgba(15,17,21,0.04);
  --shadow-md:     0 6px 18px rgba(15,17,21,0.10);

  /* Legacy aliases — previous "navy" palette (now graphite) */
  --navy:          var(--bg-chrome);
  --navy-line:     var(--chrome-divider);
  --orange:        var(--margherita);
  --white-dim:     var(--text-on-dark-2);

  /* Legacy aliases — post-it card (kept for the dashboard post-it component) */
  --postit-bg:     #FFFBEA;
  --postit-border: #F9C75A;
  --postit-text:   #5C4200;
  --postit-muted:  #7A5800;
}

/* ───────────────────────────────────────────────────────────
   Dark theme — macOS Sequoia / Big Sur palette.
   Warm-gray surfaces with soft translucent borders so cards
   read as gentle elevations on the page rather than flat
   rectangles. Designed to work across admin + manager +
   employee surfaces with the same toggle in the sidebar.
   ─────────────────────────────────────────────────────────── */
[data-theme="dark"] {
   /* Surfaces — four tiers of depth (navy, 2026-07 Master Card unification).
      Cards sit clearly lighter than the page so they read as elevations;
      chrome (sidebar/topbar) is the darkest layer. */
  --bg-page:           #040913;
  --bg-card:           #091B2E;          /* two notches under the wizard "Avanti" button base */
  --bg-card-elevated:  #142542;          /* raised panels — keeps the button-gradient hue */
  --bg-chrome:         #02060D;          /* sidebar / topbar — darkest tier */
  --surface-dark:      #02060D;          /* legacy alias of --bg-chrome */
  --surface-soft:      #05101C;          /* inset wells on cards — darker than card */

  /* Text — near-white primary, navy-tinted (never warm-gray) secondaries */
  --text-1:        #FFFFFF;
  --text-2:        #C7D0E0;
  --text-3:        #94A2BD;
  --text-on-dark:  #ffffff;
  --text-on-dark-2: rgba(255,255,255,0.78);

  /* Borders — visible enough to lift cards off the page */
  --border:        rgba(255,255,255,0.14);
  --border-soft:   rgba(255,255,255,0.08);

  /* Accents lifted for dark surfaces — the light-mode inks (#065F46
     emerald, #1E40AF info, #B45309 warning) vanish on navy. Buttons keep
     white text (GitHub-green-level contrast); text usages clear the page. */
  --emerald:        #12A15E;
  --emerald-hover:  #0E8A50;
  --green:          #2FBE74;
  --green-soft:     rgba(47,190,116,0.16);
  --red:            #EF5D5D;
  --red-hover:      #D64545;
  --red-soft:       rgba(239,93,93,0.16);
  /* On the dark translucent tint the lifted red already clears AA, so the ink
     is the same colour here: dark surfaces keep exactly today's rendering. */
  --red-ink:        var(--red);
  --green-ink:      var(--green);
  /* On a dark surface the lifted muted tone is the readable one; the light
     block's darkened slate would vanish into the panel. */
  --ink-4-on-tint:  var(--text-2);

  /* Section palette lifted for navy: the light-mode line colours are all in
     the 4-500 range and disappear against the panel. Soft fills become
     translucent so the surface beneath still reads as the page. */
  --section-green:       #3CC98C;
  --section-green-soft:  rgba(60,201,140,0.16);
  --section-orange:      #E8834A;
  --section-orange-soft: rgba(232,131,74,0.16);
  --section-violet:      #9B8FF0;
  --section-violet-soft: rgba(155,143,240,0.18);
  --section-magenta:     #E074A8;
  --section-magenta-soft:rgba(224,116,168,0.16);
  --section-blue:        #5C9BE8;
  --section-blue-soft:   rgba(92,155,232,0.16);
  --section-aqua:        #3FBCC4;
  --section-aqua-soft:   rgba(63,188,196,0.16);
  --section-red:         #E86B6B;
  --section-red-soft:    rgba(232,107,107,0.16);
  --margherita-soft: rgba(248,192,38,0.15);
  --pearl:          rgba(255,255,255,0.06);
  --info:           #8FB3F7;
  --warning:        #F5B84A;

  /* Schedule redesign accents — lifted blue for dark surfaces */
  --sched-blue:       #2E86DE;
  --sched-blue-hover: #4A97E8;
  --sched-blue-soft:  #15293B;
  --sched-blue-ink:   #9CC6EC;

  /* Chrome (sidebar/topbar) accents */
  --chrome-divider:     rgba(255,255,255,0.06);
  --chrome-pill-bg:     rgba(255,255,255,0.08);
  --chrome-pill-border: rgba(255,255,255,0.14);
  --tb-bar-bg:          rgba(3, 7, 15, 0.92);

  /* Status backgrounds — translucent so they read as overlays on dark */
  --warning-bg:    rgba(248, 192, 38, 0.14);
  --success-bg:    rgba(30, 138, 76, 0.20);
  --danger-bg:     rgba(214, 59, 59, 0.18);
  --info-bg:       rgba(56, 121, 217, 0.18);

  /* Shadows — heavier black, no warm tint */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40);
  --shadow:    0 4px 20px rgba(0,0,0,0.40);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.55);

  /* Card radius bumped to 10–12 px (macOS Settings) */
  --radius-md:  10px;
  --radius-lg:  14px;

  /* Legacy aliases re-pointed so old templates inherit dark colors */
  --bg:           var(--bg-card);
  --card-bg:      var(--bg-card);
  --surface:      var(--surface-soft);
  --text:         var(--text-1);
  --page-bg:      var(--bg-page);
  --card-border:  var(--border);
  --sidebar-bg:        var(--bg-chrome);
  --mobile-header-bg:  var(--bg-chrome);
  --navy:          var(--bg-chrome);
  --navy-line:     var(--chrome-divider);

  /* Post-it — translucent warm yellow instead of the light-mode cream */
  --postit-bg:     rgba(248,192,38,0.10);
  --postit-border: rgba(248,192,38,0.35);
  --postit-text:   #FFEAB0;
  --postit-muted:  #E5CC85;
}

/* ───────────────────────────────────────────────────────────
   Accent variants — user-selectable from the dashboard header.
   `:root[data-accent=…]` outranks the `:root` defaults above.
   Default accent (no attribute) = navy, defined in the main
   :root block above.
   ─────────────────────────────────────────────────────────── */
/* 'orange' accent variant retired (2026-07) — the selector now offers
   magenta + navy only; stored 'orange' preferences migrate to navy in the
   anti-flash snippet (base.html / base_dash.html). */
:root[data-accent="magenta"] {
  /* Electric magenta — pushed brighter/more saturated for a stronger pop.
     --acc-ink is the text-safe tone on LIGHT surfaces (≥4.5:1 on white);
     --acc-lift the vivid tone that carries on DARK chrome. */
  --acc:        #FF0090;
  --acc-hover:  #D6006F;
  --acc-ink:    #B8006A;
  --acc-lift:   #FF6EB8;
  --acc-soft:   rgba(255, 0, 144, 0.16);
  --acc-glow:   rgba(255, 110, 184, 0.16);
  --acc-glow-lt:rgba(255, 0, 144, 0.06);
  --acc-grad-a: #A3005A;
  --acc-grad-b: #FF0090;
  --acc-on:     #FFFFFF;
}

/* Pink-on-charcoal: with the magenta accent, dark mode swaps the navy
   surface tiers for near-black neutral grays — page slightly darker than
   cards, chrome darkest. Light mode is untouched. Secondary text loses the
   navy tint so it reads neutral on the gray. */
:root[data-theme="dark"][data-accent="magenta"] {
  --bg-page:          #0A0A0C;
  --bg-card:          #17171B;
  --bg-card-elevated: #1F1F25;
  --bg-chrome:        #060608;
  --surface-dark:     #060608;
  --surface-soft:     #101014;
  --tb-bar-bg:        rgba(7, 7, 10, 0.92);
  --text-2:           #C9CBD3;
  --text-3:           #989BA5;
}

/* Dark theme: --acc-ink is "text-safe on light" by contract, so on dark
   surfaces it must resolve to the lifted accent instead. Declared after
   the accent variants so it wins the specificity tie in source order. */
:root[data-theme="dark"] {
  --acc-ink: var(--acc-lift);
}

/* ═══════════════════════════════════════════════════════════
   NalyOS — scale di elevazione, raggi e materiali
   Spec: docs/superpowers/specs/2026-08-05-macos-design-language.md
   Riferimento visivo: assets/2026-08-05-macos-redesign/
     04-neworder-mobile-v4-BASELINE.html  (linguaggio)
     06-dashboard-mobile.html             (dashboard)

   SOSTITUISCONO le scale della foundation dove NalyOS è attivo;
   non le affiancano. Le vecchie --radius-* restano finché le 122
   pagine non sono migrate.
   ═══════════════════════════════════════════════════════════ */
/* ── Alias, non definizioni ──────────────────────────────────
   Ogni valore NalyOS vive in packages/design-tokens/src/tokens.json e
   arriva qui come --m-naly-*, importato in cima a questo file. Questi
   nomi restano perché 11.007 righe di CSS li referenziano; cambia solo
   da dove prendono il valore.

   Questo blocco dichiarava gli stessi 35 valori a mano. Erano identici a
   quelli generati, ma il drift-check confronta tokens.json con i file che
   genera e non vedeva questa copia: erano allineati per coincidenza, non
   per costruzione. check-drift.mjs adesso fallisce se uno torna letterale.

   Non c'è più un blocco [data-theme="dark"] qui sotto: i --m-naly-* si
   ribaltano da soli nel tema scuro, quindi un alias solo copre entrambi.
   Le motivazioni dietro i valori stanno accanto ai valori, in generate.mjs.
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Raggi ─────────────────────────────────────────────── */
  --naly-r-card:    var(--m-naly-radius-card);
  --naly-r-tile:    var(--m-naly-radius-tile);
  --naly-r-control: var(--m-naly-radius-control);
  --naly-r-icon:    var(--m-naly-radius-icon);
  --naly-r-pill:    var(--m-naly-radius-pill);

  /* ── Elevazione — SEMPRE tre strati ────────────────────── */
  --naly-edge:      var(--m-naly-elev-edge);
  --naly-elev-1:    var(--m-naly-elev-1);
  --naly-elev-2:    var(--m-naly-elev-2);
  --naly-elev-3:    var(--m-naly-elev-3);

  /* ── Superfici ─────────────────────────────────────────── */
  --naly-surface:        var(--m-naly-surface-base);
  --naly-surface-border: var(--m-naly-surface-border);

  /* ── Controlli — bordo 1.5px, gradiente verticale ──────── */
  --naly-control-bg:     var(--m-naly-control-background);
  --naly-control-border: var(--m-naly-control-border);
  --naly-control-bw:     var(--m-naly-control-border-width);
  --naly-control-shadow: var(--m-naly-control-shadow);

  /* ── Chrome fissa — MAI backdrop-filter ────────────────── */
  --naly-chrome-bg:      var(--m-naly-chrome-background);
  --naly-chrome-border:  var(--m-naly-chrome-border);

  /* ── Vetro — SOLO su overlay (modali, drawer, sheet) ───── */
  --naly-glass:          var(--m-naly-overlay-glass);

  /* ── CTA primaria — gradiente smeraldo con alone ──────── */
  --naly-cta-bg:         var(--m-naly-cta-background);
  --naly-cta-shadow:     var(--m-naly-cta-shadow);

  /* ── Spazio riservato sotto le barre fisse ─────────────── */
  --naly-safe-bottom:      var(--m-naly-safe-bottom);
  --naly-safe-bottom-fab:  var(--m-naly-safe-bottom-fab);
}