/*
 * Geidorfstandl — Design Token Foundation
 *
 * Single source of truth for all CSS custom properties.
 * Used by both admin.css and customer.css.
 *
 * Rules:
 *   - Tokens ONLY in this file — no selectors, no layout rules
 *   - All values here are raw; all other CSS files reference via var()
 *   - Token names describe ROLE, not colour value
 */

/* ── Kalam Font (self-hosted WOFF2, Google Fonts — Story 3.1) ───────────── */

@font-face {
  font-family: "Kalam";
  src: url("/assets/fonts/kalam-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kalam";
  src: url("/assets/fonts/kalam-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kalam";
  src: url("/assets/fonts/kalam-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {

  /* Default scheme — the admin layout flips this per [data-theme] below.        */
  color-scheme: light;

  /* ── Admin Colour Palette (Light — default) ────────────────────────────── */
  /* Functional, high-contrast neutral theme for the admin panel             */

  --color-admin-bg:         #FFFFFF;   /* Page background — pure white                */
  --color-admin-text:       #1A1A1A;   /* Primary text — near-black, max readability  */
  --color-admin-action:     #2563EB;   /* Primary buttons, focus indicator — blue     */
  --color-admin-live:       #16A34A;   /* Published/LIVE badge — green                */
  --color-admin-draft:      #D97706;   /* Draft state badge — amber                   */
  --color-admin-danger:     #DC2626;   /* Destructive actions — red                   */
  --color-admin-toggle-on:  #DC2626;   /* Sold-out toggle active — red (visible arm's length) */
  --color-admin-toggle-off: #D1D5DB;   /* Toggle inactive / generic 1px borders — neutral grey */

  /* Roles added for theming (and to back-fill tokens admin.css already used). */
  --color-admin-on-accent:   #FFFFFF;              /* Ink/icon on coloured fills (buttons, badges, toggle knob) */
  --color-admin-border:      #E5E7EB;              /* Table rows / hairline dividers (was undefined → no border) */
  --color-admin-text-muted:  #6B7280;              /* Secondary text — table headers, hints (was undefined)     */
  --color-admin-action-tint: rgba(37, 99, 235, 0.05); /* Faint action wash — checked allergen / selected state */

  /* ── Chalkboard Colour Palette (Customer-Facing, Epic 3) ───────────────── */
  /* Warm, analogue feel — evokes a real classroom blackboard                  */

  --color-board:      #2B2B2B;                     /* Dark charcoal background — not pure black    */
  --color-chalk:      #F5F0E8;                     /* Warm cream primary text — not pure white     */
  --color-chalk-dim:  rgba(245, 240, 232, 0.65);   /* Secondary text at 65 % opacity               */
  --color-accent:     #D4A040;                     /* Beeswax gold — prices, highlights, badge     */
  --color-sold-out:   #A08070;                     /* Dusty muted tone — "crossed off the board"   */
  --color-banner-bg:  #353535;                     /* Slightly lighter than board — announcement   */

  /* ── Chalkboard Frame & Texture (Customer-Facing) ──────────────────────── */
  /* Wooden frame around the slate + subtle chalk-dust overlay (Goal B)        */

  --color-frame:       #5A4632;                    /* Warm wood frame around the board             */
  --color-frame-edge:  #2E2218;                    /* Darker wood — inner bevel / crisp edge       */
  --color-chalk-haze:  rgba(245, 240, 232, 0.035); /* Faint chalk dust on the slate (gradient stop)*/

  --shadow-board:        0 8px 28px rgba(0, 0, 0, 0.5);    /* Frame drop shadow onto the wall      */
  --shadow-slate-inset:  inset 0 0 40px rgba(0, 0, 0, 0.4);/* Slate depth — darker toward the frame*/
  --shadow-chalk-text:   0 0 1px rgba(245, 240, 232, 0.3); /* Faint chalk bloom on display headings*/

  --frame-width:       10px;                       /* Wooden frame thickness                       */

  /* Hand-drawn chalk underline — used as a mask so the visible colour stays a
     token (var(--color-accent)). Shared by section headings and the active tab. */
  --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 8'%3E%3Cpath d='M1 5 Q9 1 18 5 T36 5 T54 5 T71 5' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");

  /* ── Clipboard Palette (Customer-Facing, raw values) ───────────────────── */
  /* Second customer layout: a real wooden board carrying a white paper sheet. */
  /* Activated by remapping the chalkboard role tokens under                   */
  /* body.theme-clipboard below; the board/sheet/clip structure lives in       */
  /* customer.css.                                                             */

  --color-clip-wood:       #A0784A;                 /* Board fallback while the wood photo loads    */
  --color-clip-wood-edge:  #7A5A36;                 /* Crisp board edge against the desk            */
  --color-clip-desk:       #57463A;                 /* Desk surface behind the clipboard            */
  --color-clip-paper:      #FAFAF7;                 /* White sheet — warm, not clinical             */
  --color-clip-paper-tint: #F0EDE4;                 /* Banner/segment tint on paper                 */
  --color-clip-ink:        #2A2A2E;                 /* Primary ink                                  */
  --color-clip-ink-dim:    rgba(42, 42, 46, 0.62);  /* Secondary ink                                */
  --color-clip-accent:     #A83232;                 /* Red pen — prices, active underline           */
  --color-clip-faded:      #9A9189;                 /* Sold-out on paper                            */
  --color-clip-metal:      #C8CCD0;                 /* Clip hardware                                */
  --color-clip-metal-edge: #82888F;                 /* Clip hardware edge                           */

  --shadow-clip-board:  0 10px 24px rgba(0, 0, 0, 0.35);   /* Board lifted off the desk            */
  --shadow-clip-sheet:  0 1px 2px rgba(0, 0, 0, 0.16), 0 5px 14px rgba(0, 0, 0, 0.20); /* Sheet lying on the board */
  --shadow-clip-bevel:  inset 0 1px 2px rgba(255, 255, 255, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.28); /* Board edge relief */
  --shadow-clip-hw:     0 2px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5); /* Clip metal relief */

  --size-clip-w: 96px;                               /* Clip hardware width (narrow)                 */
  --size-clip-w-wide: 120px;                         /* …clip width on ≥768px viewports              */
  --size-clip-h: 28px;                               /* Clip hardware height (narrow)                */
  --size-clip-h-wide: 32px;                          /* …clip height on ≥768px viewports             */
  --size-paper-inset: 12px;                          /* Wood visible around the sheet (narrow)       */
  --size-paper-inset-wide: 22px;                     /* …and on ≥768px viewports                     */
  --size-wood-tile: 1024px;                          /* Intrinsic wood-board.jpg tile size           */
  --size-slide-distance: 14px;                       /* Sheet-swap travel — keep < on-sheet margin (content padding − paper inset) at every breakpoint */
  --radius-board: 18px;                              /* Rounded clipboard corners                    */

  --timing-slide: 300ms;                             /* Sheet-swap slide-in duration                 */

  /* Real wood grain — seamless CC0 photos (ambientCG). Walnut: 256px tile for
     the chalkboard frame border-image. Board: Wood048 oak 1K (~145 KB, grain
     rotated vertical) covering the whole clipboard; --color-clip-wood stays
     underneath as the no-image fallback. */
  --wood-grain: url("/assets/img/wood-walnut.jpg");
  --wood-board: url("/assets/img/wood-board.jpg");

  /* ── Spacing Scale (8 px base, linear) ────────────────────────────────── */

  --space-xs:   4px;    /* 0.5× — tight gaps (allergen code to dish name)       */
  --space-sm:   8px;    /* 1×   — compact (lines within a menu item)            */
  --space-md:   16px;   /* 2×   — standard (between items, form fields)         */
  --space-lg:   24px;   /* 3×   — section breathing room, card internal padding */
  --space-xl:   32px;   /* 4×   — major section gaps                            */
  --space-2xl:  48px;   /* 6×   — page-level spacing                            */
  --space-3xl:  64px;   /* 8×   — hero spacing (standl name to first content)   */

  /* ── Type Scale ────────────────────────────────────────────────────────── */

  --font-size-display:  28px;   /* Page branding — chalk display font (Epic 3)    */
  --font-size-heading:  24px;   /* Section titles                                 */
  --font-size-dish:     18px;   /* Dish names — core content, triggers appetite   */
  --font-size-price:    16px;   /* Prices — system font, accent colour            */
  --font-size-body:     15px;   /* Body text, form inputs, opening hours          */
  --font-size-small:    13px;   /* Admin fine print ONLY — never customer-facing  */

  /* ── Font Families ─────────────────────────────────────────────────────── */

  --font-system:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display:  "Kalam", cursive, sans-serif;   /* Self-hosted WOFF2 (Story 3.1) */

  /* ── Border Radius ─────────────────────────────────────────────────────── */

  --radius-sm:    4px;      /* Subtle — badges, small elements        */
  --radius-md:    8px;      /* Standard — cards, inputs, buttons      */
  --radius-lg:    12px;     /* Prominent — dialogs, large containers  */
  --radius-full:  9999px;   /* Pill shape — status badges             */

  /* ── Touch Target Minimum ──────────────────────────────────────────────── */

  --size-touch-min: 44px;   /* Interactive elements (admin UI, customer tab bar
                               + its scroll-padding budget) — WCAG 2.5.5 */

  /* ── Transition Timing ─────────────────────────────────────────────────── */

  --timing-fast:    150ms;   /* Toggle flip, button tap feedback    */
  --timing-normal:  300ms;   /* Flash message slide-in, dialog fade */
  --timing-slow:    500ms;   /* Undo hint fade-out, flash dismiss   */

}

/* ── Admin Dark Theme ──────────────────────────────────────────────────────
 * Redefines ONLY the --color-admin-* tokens for dark surfaces. Two activation
 * paths, both scoped to [data-theme], which is emitted only by the admin
 * layout (<html data-theme="…">). Customer chalkboard pages also load this
 * file but never set the attribute, so their --color-* palette is untouched.
 *
 *   [data-theme="dark"]                 → user explicitly pinned dark
 *   prefers-color-scheme + [="system"]  → following the OS, which is dark
 *
 * IMPORTANT: the two blocks below MUST stay in sync — same tokens, same values.
 * On a bright dark-mode fill the legible ink is DARK, so --color-admin-on-accent
 * flips to a near-black; the accent hues are brightened so they also read as
 * foreground (nav links, focus ring) against the dark surface.
 * ────────────────────────────────────────────────────────────────────────── */

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-admin-bg:         #1B1E24;   /* Page + cards + header + inputs — dark slate */
  --color-admin-text:       #E7E9EC;   /* Primary text — near-white, not pure         */
  --color-admin-action:     #5B9BF6;   /* Bright blue — legible as text AND fill       */
  --color-admin-live:       #34D399;   /* Published/LIVE — bright green                */
  --color-admin-draft:      #FBBF24;   /* Draft — bright amber                         */
  --color-admin-danger:     #F87171;   /* Destructive — bright red                     */
  --color-admin-toggle-on:  #F87171;   /* Sold-out toggle active — matches danger      */
  --color-admin-toggle-off: #4B515B;   /* Toggle track / generic borders on dark       */

  --color-admin-on-accent:   #15171C;              /* Dark ink on the bright fills above */
  --color-admin-border:      #333842;              /* Hairline dividers on dark          */
  --color-admin-text-muted:  #9AA1AC;              /* Secondary text on dark             */
  --color-admin-action-tint: rgba(91, 155, 246, 0.14); /* Visible action wash on dark    */
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;

    --color-admin-bg:         #1B1E24;
    --color-admin-text:       #E7E9EC;
    --color-admin-action:     #5B9BF6;
    --color-admin-live:       #34D399;
    --color-admin-draft:      #FBBF24;
    --color-admin-danger:     #F87171;
    --color-admin-toggle-on:  #F87171;
    --color-admin-toggle-off: #4B515B;

    --color-admin-on-accent:   #15171C;
    --color-admin-border:      #333842;
    --color-admin-text-muted:  #9AA1AC;
    --color-admin-action-tint: rgba(91, 155, 246, 0.14);
  }
}

/* ── Customer Clipboard Theme ──────────────────────────────────────────────
 * Remaps the chalkboard role tokens to the clipboard palette — same pattern as
 * the admin dark theme above. The class is emitted only by the customer layout
 * (<body class="theme-clipboard">) when the owner picks "Klemmbrett" in the
 * settings; without it the chalkboard renders untouched. All component CSS
 * keeps referencing the same role tokens, so this block IS most of the theme;
 * customer.css adds only clipboard structure (clip hardware, paper, page flip).
 * ────────────────────────────────────────────────────────────────────────── */

body.theme-clipboard {
  --color-board:      var(--color-clip-paper);      /* slate → white sheet           */
  --color-chalk:      var(--color-clip-ink);        /* chalk → ink                   */
  --color-chalk-dim:  var(--color-clip-ink-dim);
  --color-accent:     var(--color-clip-accent);     /* gold chalk → red pen          */
  --color-sold-out:   var(--color-clip-faded);
  --color-banner-bg:  var(--color-clip-paper-tint);

  --shadow-chalk-text: none;                        /* no chalk bloom on paper       */

  /* No frame/haze/shadow remaps: the clipboard container rule in customer.css
     replaces the framed-slate look wholesale (wood photo board + paper sheet). */
}