/* Pickuptone tokens. Palette updated 2026-11-01: white background, neutral greys, single violet accent. tokens.json holds the same values (kept in sync by hand; colours verified equal 2026-11-01).
   Modes: default light; [data-theme="dark"]; [data-theme="kitchen"] (high contrast + large type).
   System dark applies when no data-theme is set. RTL: use logical properties only. */

:root {
  color-scheme: light;
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-2: #F4F6F9;
  --color-on-surface: #111827;
  --color-on-surface-muted: #4B5563;
  --color-heading: #3B1478;
  --color-outline: #E1E5EB;
  --color-outline-strong: #6B7280;
  --color-primary: #5B21B6;
  --color-on-primary: #FFFFFF;
  --color-primary-container: #EFE7FB;
  --color-on-primary-container: #3B1478;
  --color-success: #2A7247;
  --color-success-container: #DFF1E5;
  --color-on-success-container: #14402A;
  --color-warning: #855600;
  --color-warning-container: #FCEBC4;
  --color-on-warning-container: #4A3000;
  --color-danger: #B3261E;
  --color-on-danger: #FFFFFF;
  --color-danger-container: #FBE0DD;
  --color-on-danger-container: #5C110C;
  --color-info: #0E7490;
  --color-info-container: #DDF3F8;
  --color-on-info-container: #0B3B4A;
  --color-neutral-container: #EAEDF2;
  --color-on-neutral-container: #1F2937;
  --color-inverse-surface: #1F2937;
  --color-on-inverse-surface: #F3F4F6;
  --color-inverse-primary: #C9B2F2;
  --color-focus: #111827;
  --color-scrim: rgba(17,24,39,0.45);
  --font-sans: "Inter", system-ui, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-arabic: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-urdu: "Noto Nastaliq Urdu", "Noto Sans Arabic", "Segoe UI", sans-serif;
  --font-devanagari: "Noto Sans Devanagari", "Nirmala UI", "Mangal", sans-serif;
  --font-bengali: "Noto Sans Bengali", "Nirmala UI", "Vrinda", sans-serif;
  --font-cjk: "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --text-caption: 0.8125rem;
  --text-label: 0.875rem;
  --text-body: 1rem;
  --text-body-lg: 1.125rem;
  --text-title: 1.25rem;
  --text-headline: 1.5rem;
  --text-display: 2rem;
  --text-display-lg: 2.5rem;
  --lh-tight: 1.25;
  --lh-body: 1.5;
  --lh-script: 1.75;
  --lh-nastaliq: 2.1;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --font-scale: 1;
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --size-touch-min: 48px;
  --size-pointer-min: 24px;
  --size-target-gap: 8px;
  --size-kitchen-touch: 64px;
  --size-focus-ring: 2px;
  --size-focus-offset: 2px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(17,24,39,0.08), 0 1px 3px rgba(17,24,39,0.06);
  --elevation-2: 0 2px 6px rgba(17,24,39,0.10), 0 4px 12px rgba(17,24,39,0.06);
  --elevation-3: 0 8px 24px rgba(17,24,39,0.16), 0 2px 6px rgba(17,24,39,0.08);
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --z-base: 0;
  --z-sticky: 100;
  --z-nav: 200;
  --z-sheet: 300;
  --z-dialog: 400;
  --z-toast: 500;
  /* Breakpoints (for reference; CSS vars cannot be used in @media):
     compact <600, medium 600-839, expanded 840-1199, large 1200+ */
  --touch: var(--size-touch-min);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-bg: #0F1115;
    --color-surface: #171A20;
    --color-surface-2: #1F232B;
    --color-on-surface: #F3F4F6;
    --color-on-surface-muted: #AEB4BE;
  --color-heading: #EADFFF;
    --color-outline: #2E343E;
    --color-outline-strong: #7C8493;
    --color-primary: #C3B1F5;
    --color-on-primary: #2A0D5E;
    --color-primary-container: #3B1A7A;
    --color-on-primary-container: #EADFFF;
    --color-success: #6FCF97;
    --color-success-container: #173A26;
    --color-on-success-container: #C8F0D6;
    --color-warning: #F2C063;
    --color-warning-container: #3D2C00;
    --color-on-warning-container: #FCE5B0;
    --color-danger: #FF8A80;
    --color-on-danger: #3A0905;
    --color-danger-container: #4A1410;
    --color-on-danger-container: #FFD9D4;
    --color-info: #5FD0E6;
    --color-info-container: #0F3640;
    --color-on-info-container: #CFF1F8;
    --color-neutral-container: #262B33;
    --color-on-neutral-container: #E5E7EB;
    --color-inverse-surface: #F3F4F6;
    --color-on-inverse-surface: #1F2937;
    --color-inverse-primary: #5B21B6;
    --color-focus: #FFFFFF;
    --color-scrim: rgba(0,0,0,0.6);
  }
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0F1115;
  --color-surface: #171A20;
  --color-surface-2: #1F232B;
  --color-on-surface: #F3F4F6;
  --color-on-surface-muted: #AEB4BE;
  --color-heading: #EADFFF;
  --color-outline: #2E343E;
  --color-outline-strong: #7C8493;
  --color-primary: #C3B1F5;
  --color-on-primary: #2A0D5E;
  --color-primary-container: #3B1A7A;
  --color-on-primary-container: #EADFFF;
  --color-success: #6FCF97;
  --color-success-container: #173A26;
  --color-on-success-container: #C8F0D6;
  --color-warning: #F2C063;
  --color-warning-container: #3D2C00;
  --color-on-warning-container: #FCE5B0;
  --color-danger: #FF8A80;
  --color-on-danger: #3A0905;
  --color-danger-container: #4A1410;
  --color-on-danger-container: #FFD9D4;
  --color-info: #5FD0E6;
  --color-info-container: #0F3640;
  --color-on-info-container: #CFF1F8;
  --color-neutral-container: #262B33;
  --color-on-neutral-container: #E5E7EB;
  --color-inverse-surface: #F3F4F6;
  --color-on-inverse-surface: #1F2937;
  --color-inverse-primary: #5B21B6;
  --color-focus: #FFFFFF;
  --color-scrim: rgba(0,0,0,0.6);
}
:root[data-theme="kitchen"] {
  color-scheme: dark;
  --color-bg: #000000;
  --color-surface: #121212;
  --color-surface-2: #1E1E1E;
  --color-on-surface: #FFFFFF;
  --color-on-surface-muted: #D9D9D9;
  --color-heading: #FFFFFF;
  --color-outline: #5C5C5C;
  --color-outline-strong: #C2C2C2;
  --color-primary: #CDBDF8;
  --color-on-primary: #000000;
  --color-primary-container: #2E1566;
  --color-on-primary-container: #CDBDF8;
  --color-success: #3DDC84;
  --color-success-container: #3DDC84;
  --color-on-success-container: #000000;
  --color-warning: #FFD24A;
  --color-warning-container: #FFD24A;
  --color-on-warning-container: #000000;
  --color-danger: #FF7A6E;
  --color-on-danger: #000000;
  --color-danger-container: #FF7A6E;
  --color-on-danger-container: #000000;
  --color-info: #8CBBFF;
  --color-info-container: #8CBBFF;
  --color-on-info-container: #000000;
  --color-neutral-container: #E0E0E0;
  --color-on-neutral-container: #000000;
  --color-inverse-surface: #FFFFFF;
  --color-on-inverse-surface: #000000;
  --color-inverse-primary: #5B21B6;
  --color-focus: #FFD24A;
  --color-scrim: rgba(0,0,0,0.75);
  --font-scale: 1.375;
  --touch: var(--size-kitchen-touch);
  --elevation-1: none; --elevation-2: none; --elevation-3: 0 0 0 2px var(--color-outline-strong);
}

/* Kitchen mode scales all rem-based type */
html { font-size: calc(100% * var(--font-scale)); }

/* Script fallbacks: set lang on the element; line height grows for tall scripts */
:lang(ar) { font-family: var(--font-arabic); line-height: var(--lh-script); }
:lang(ur) { font-family: var(--font-urdu); line-height: var(--lh-nastaliq); }
:lang(hi), :lang(mr), :lang(ne) { font-family: var(--font-devanagari); line-height: var(--lh-script); }
:lang(bn) { font-family: var(--font-bengali); line-height: var(--lh-script); }
:lang(zh), :lang(ja), :lang(ko) { font-family: var(--font-cjk); }

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms;
    --ease-spring: linear;
  }
}

/* Headings share one colour (zero specificity, any component rule wins) */
:where(h1,h2,h3,h4){ color: var(--color-heading); }