/* ============================================================
   TOLA S2 · DESIGN TOKENS (CSS) · REV-B (Portrait 1080×1920)
   Single source of truth — mirrored in tokens/design-tokens.json
   All sizes are ABSOLUTE canvas pixels (1 px = 1 physical px on the
   32″ portrait panel ≈ 2.74 px/mm). Never use vw/vh inside the canvas.
   ============================================================ */

/* ---------- Local fonts (kiosk must work offline) ---------- */
@font-face { font-family: 'Plex Arabic'; font-weight: 400; font-display: block;
  src: url('../assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: 'Plex Arabic'; font-weight: 600; font-display: block;
  src: url('../assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F, U+2E41; }
@font-face { font-family: 'Plex Arabic'; font-weight: 400; font-display: block;
  src: url('../assets/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plex Arabic'; font-weight: 600; font-display: block;
  src: url('../assets/fonts/ibm-plex-sans-arabic-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Tola Serif'; font-weight: 600; font-display: block;
  src: url('../assets/fonts/playfair-display-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Tola Mono'; font-weight: 500; font-display: block;
  src: url('../assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  /* ---------- 1. Brand palette (official TOLA catalog, page 4) ---------- */
  --brand-olive: #51533E;
  --brand-sage: #9D9C89;
  --brand-alabaster: #F2EEE7;
  --brand-gradient: linear-gradient(90deg, #51533E 0%, #9D9C89 100%);

  /* ---------- 2. Hardware finish palette (R4 §3.4) ---------- */
  --hw-gold: #D4B26F;          /* anodized champagne gold — metal accents only */
  --hw-gold-light: #E8D3A4;
  --hw-gold-deep: #A8873F;
  --hw-red: #CC181E;           /* RAL 3020 — identity hairline only, never a button/background */
  --hw-charcoal: #121410;      /* matte charcoal chassis */
  --hw-light-k: 4000;          /* reference light temperature for imagery */

  /* ---------- 3. Olive tonal scale (derived from brand olive, H≈66°) ---------- */
  --olive-950: #0F100A;
  --olive-900: #15160F;
  --olive-850: #1B1C14;
  --olive-800: #22241A;
  --olive-700: #2C2E22;
  --olive-600: #3A3C2D;
  --olive-500: #51533E;
  --olive-400: #6B6D55;
  --olive-300: #85866F;
  --sage-400: #9D9C89;
  --sage-200: #C9C6B6;
  --alabaster-100: #E4DFD4;
  --alabaster-50: #F2EEE7;

  /* ---------- 4. Semantic roles ---------- */
  --bg-base: var(--olive-900);
  --bg-deep: var(--olive-950);
  --surface-1: var(--olive-850);
  --surface-2: var(--olive-800);
  --surface-3: var(--olive-700);
  --surface-raised: #2F3125;
  --border-subtle: rgba(157, 156, 137, 0.22);
  --border-strong: rgba(157, 156, 137, 0.48);
  --border-gold: rgba(212, 178, 111, 0.75);

  --text-primary: var(--alabaster-50);
  --text-secondary: var(--sage-200);
  --text-muted: #A9A895;
  --text-gold: var(--hw-gold);
  --text-on-gold: var(--olive-900);

  --accent: var(--hw-gold);
  --accent-press: var(--hw-gold-deep);
  --cta-gradient: linear-gradient(180deg, #E2C487 0%, #D4B26F 48%, #BE9A52 100%);

  /* Status — always paired with icon + text (A5) */
  --status-success: #8CCB9B;
  --status-success-bg: rgba(140, 203, 155, 0.14);
  --status-warning: #E9BE63;
  --status-warning-bg: rgba(233, 190, 99, 0.14);
  --status-error: #F28B7F;
  --status-error-bg: rgba(242, 139, 127, 0.13);
  --status-info: #A9CCDD;
  --status-info-bg: rgba(169, 204, 221, 0.13);
  --status-uvc: #9AD8F5;

  /* ---------- 5. Typography (spec §8.2 — absolute px) ---------- */
  --font-ar: 'Plex Arabic', 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
  --font-serif: 'Tola Serif', 'Playfair Display', Georgia, serif;
  --font-mono: 'Tola Mono', 'IBM Plex Mono', Consolas, monospace;
  --fs: 1;                      /* font scale: 1 | 1.25 | 1.5 (SC-15) */
  --t-display: 88px;
  --t-title: 72px;              /* screen title 72–80 */
  --t-section: 52px;            /* card/section title 48–56 */
  --t-card: 48px;
  --t-body: 36px;               /* body 34–40 */
  --t-small: 28px;              /* secondary 26–30 */
  --t-min: 24px;                /* absolute minimum */
  --t-button: 44px;             /* primary button 40–48 */
  --lh-ar: 1.5;
  --lh-en: 1.4;
  --w-regular: 400;
  --w-strong: 600;

  /* ---------- 6. Spacing (8-pt) & layout ---------- */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px;
  --safe: 40px;                 /* safe inner margin from bezel */
  --canvas-w: 1080px;
  --canvas-h: 1920px;
  --px-per-mm: 2.743;
  /* Portrait ergonomic bands (see Design Documentation §2) */
  --zone-status-h: 104px;       /* y 0–104   · 1875–1837 mm · non-interactive status strip */
  --zone-visual-end: 754px;     /* y ≤ 754   · ≥ 1600 mm   · visual only, no actions      */
  --zone-action-h: 160px;       /* y 1624–1784 · 1283–1225 mm · fixed primary action bar   */
  --zone-dock-h: 136px;         /* y 1784–1920 · 1225–1175 mm · utility dock (seated reach) */

  /* ---------- 7. Touch targets (spec §11.2) ---------- */
  --touch-min: 72px;            /* ≥ 41 px (15 mm) */
  --touch-primary: 112px;       /* ≥ 55 px (20 mm) */
  --touch-gap: 24px;            /* ≥ 22 px (8 mm)  */
  --key-size: 128px;            /* numeric keypad key */

  /* ---------- 8. Shape & depth ---------- */
  --r-sm: 12px; --r-md: 20px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px;
  --bevel: 18px;                /* chamfer derived from the "T" crown */
  --shadow-1: 0 6px 24px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-gold: 0 0 48px rgba(212, 178, 111, 0.28);

  /* ---------- 9. Motion (spec §8.8) ---------- */
  --d-press: 90ms;              /* ≤ 100 ms visual touch response */
  --d-screen: 260ms;            /* 200–300 ms */
  --d-slow: 600ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spinner-delay: 400ms;
}

/* ---------- High contrast (SC-15 · A6) ---------- */
[data-contrast="high"] {
  --bg-base: #000000;
  --bg-deep: #000000;
  --surface-1: #000000;
  --surface-2: #0A0A0A;
  --surface-3: #141414;
  --surface-raised: #141414;
  --border-subtle: rgba(255, 255, 255, 0.55);
  --border-strong: #FFFFFF;
  --border-gold: #FFD27A;
  --text-primary: #FFFFFF;
  --text-secondary: #FFFFFF;
  --text-muted: #E6E6E6;
  --text-gold: #FFD27A;
  --accent: #FFD27A;
  --cta-gradient: linear-gradient(180deg, #FFE2A6 0%, #FFD27A 100%);
  --text-on-gold: #000000;
  --status-success: #9BFFB4;
  --status-warning: #FFE07A;
  --status-error: #FF9C91;
  --status-info: #BFE8FF;
}

/* ---------- Font scale levels (SC-15 · P9 · §11.5) ---------- */
[data-font="125"] { --fs: 1.25; }
[data-font="150"] { --fs: 1.5; }