/* ==========================================================================
   QRPOS Design Tokens — single source of truth
   Architecture: docs/80-design-system.md
   Visual language: Fiverr-inspired — white canvas, vivid green primary,
   charcoal ink, generous whitespace, clean card grids.
   Layer 1: primitive palette (never referenced by UI code directly)
   Layer 2: semantic tokens (what components consume) — re-mapped per theme
   ========================================================================== */

:root {
    /* ---------- LAYER 1 · PRIMITIVES ---------- */

    /* Green — brand (Fiverr-style vivid green) */
    --green-50:  #F0FBF6;
    --green-100: #DCF5E9;
    --green-200: #B3E9CF;
    --green-300: #7EDAAE;
    --green-400: #40CB8B;
    --green-500: #1DBF73;
    --green-600: #17A566;
    --green-700: #128756;
    --green-800: #0E6A44;
    --green-900: #013912;   /* deep hero green */

    /* Neutral — cool grays (charcoal ink) */
    --neutral-0:   #FFFFFF;
    --neutral-50:  #FAFAFA;
    --neutral-100: #F5F5F5;
    --neutral-200: #E4E5E7;
    --neutral-300: #DADBDD;
    --neutral-400: #B5B6BA;
    --neutral-500: #95979D;
    --neutral-600: #74767E;
    --neutral-700: #62646A;
    --neutral-800: #404145;
    --neutral-900: #222325;

    /* Amber — ratings / warnings */
    --amber-100: #FFF0D6;
    --amber-300: #FFD28A;
    --amber-500: #FFB33E;
    --amber-600: #D98F1F;
    --amber-700: #A96E12;
    --amber-900: #5C3A05;

    /* Functional primitives */
    --red-100:  #FCE3E3;
    --red-500:  #E03131;
    --red-600:  #C42222;
    --red-700:  #9E1B1B;
    --blue-100: #E1E9FB;
    --blue-500: #446EE7;
    --blue-600: #3358C4;

    /* ---------- LAYER 2 · SEMANTIC (default = light panel theme) ---------- */

    /* Surfaces */
    --bg:             var(--neutral-0);
    --surface:        var(--neutral-0);
    --surface-raised: var(--neutral-0);
    --surface-sunken: var(--neutral-100);
    --border:         var(--neutral-200);
    --border-strong:  var(--neutral-300);

    /* Hero / inverted section (Fiverr deep-green hero) */
    --hero-bg:   var(--green-900);
    --on-hero:   var(--neutral-0);

    /* Text */
    --text:        var(--neutral-900);
    --text-muted:  var(--neutral-700);
    --text-faint:  var(--neutral-400);
    --text-invert: var(--neutral-0);

    /* Brand */
    --brand:        var(--green-500);
    --brand-hover:  var(--green-600);
    --brand-active: var(--green-700);
    --brand-soft:   var(--green-50);
    --brand-soft-border: var(--green-200);
    --on-brand:     #FFFFFF;

    /* Accent (ratings, highlights) */
    --accent:      var(--amber-500);
    --accent-soft: var(--amber-100);
    --on-accent:   var(--amber-900);

    /* Secondary (charcoal buttons/sections) */
    --secondary:      var(--neutral-900);
    --secondary-soft: var(--neutral-100);
    --on-secondary:   #FFFFFF;

    /* Status */
    --success:      var(--green-600);
    --success-soft: var(--green-100);
    --on-success:   #FFFFFF;
    --warning:      var(--amber-600);
    --warning-soft: var(--amber-100);
    --on-warning:   #FFFFFF;
    --danger:       var(--red-500);
    --danger-hover: var(--red-600);
    --danger-soft:  var(--red-100);
    --on-danger:    #FFFFFF;
    --info:         var(--blue-500);
    --info-soft:    var(--blue-100);
    --on-info:      #FFFFFF;

    /* Focus ring */
    --focus-ring: 0 0 0 3px var(--green-200);

    /* ---------- TYPOGRAPHY ---------- */
    /* Fiverr uses Macan (proprietary); Hanken Grotesk is the closest webfont.
       Pages must include the Google Fonts link for Hanken Grotesk 300..800. */
    --font-sans: "Hanken Grotesk", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-display: var(--font-sans);           /* bold-weight sans, no serif */
    --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-4xl: 38px;

    --leading-tight: 1.2;
    --leading-body: 1.6;

    /* ---------- SPACING · RADIUS · SHADOW · MOTION ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;

    /* Fiverr-style tighter corners */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 999px;

    --shadow-sm: 0 1px 2px rgba(34, 35, 37, 0.06);
    --shadow-md: 0 2px 8px rgba(34, 35, 37, 0.10), 0 1px 2px rgba(34, 35, 37, 0.05);
    --shadow-lg: 0 8px 24px rgba(34, 35, 37, 0.14), 0 2px 6px rgba(34, 35, 37, 0.07);

    --ease-micro: 150ms ease-out;
    --ease-panel: 250ms ease-out;

    --touch-target: 44px;
}

/* ==========================================================================
   THEME · KDS DARK — kitchen display, night mode
   Neutral dark canvas, brightened status colors readable from distance.
   ========================================================================== */
[data-theme="dark"] {
    --bg:             #141518;
    --surface:        #1E1F23;
    --surface-raised: #26272B;
    --surface-sunken: #0E0F11;
    --border:         #3A3B40;
    --border-strong:  #4A4B50;

    --hero-bg: #0E0F11;
    --on-hero: var(--neutral-100);

    --text:        var(--neutral-100);
    --text-muted:  var(--neutral-400);
    --text-faint:  var(--neutral-600);
    --text-invert: var(--neutral-900);

    --brand:        var(--green-400);
    --brand-hover:  var(--green-300);
    --brand-active: var(--green-500);
    --brand-soft:   #10281C;
    --brand-soft-border: var(--green-800);
    --on-brand:     #04220F;

    --accent:      var(--amber-500);
    --accent-soft: #332508;
    --on-accent:   var(--amber-100);

    --secondary:      var(--neutral-100);
    --secondary-soft: #26272B;
    --on-secondary:   var(--neutral-900);

    --success:      var(--green-400);
    --success-soft: #10281C;
    --on-success:   #04220F;
    --warning:      var(--amber-500);
    --warning-soft: #332508;
    --on-warning:   #221800;
    --danger:       #FF6B6B;
    --danger-hover: #FF8787;
    --danger-soft:  #3A1414;
    --on-danger:    #2B0505;
    --info:         #7B9BFF;
    --info-soft:    #16213E;
    --on-info:      #0A1024;

    --focus-ring: 0 0 0 3px var(--green-800);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   THEME · QR MENU — customer-facing, tenant-customizable subset
   Tenants may override ONLY the --qr-* variables (from qr_menu_settings.theme,
   injected as inline style on the wrapper in Faz 5). Semantic tokens below
   derive from the --qr-* knobs, so component CSS stays untouched.
   ========================================================================== */
.theme-qr {
    /* Tenant-overridable knobs (defaults = brand identity) */
    --qr-brand: var(--green-500);
    --qr-brand-dark: var(--green-700);
    --qr-bg: var(--neutral-0);
    --qr-surface: var(--neutral-0);
    --qr-text: var(--neutral-900);
    --qr-font-display: var(--font-sans);

    /* Derived semantics */
    --bg:      var(--qr-bg);
    --surface: var(--qr-surface);
    --text:    var(--qr-text);
    --brand:   var(--qr-brand);
    --brand-hover: var(--qr-brand-dark);
    --on-brand: #FFFFFF;
    --font-display: var(--qr-font-display);
}