/* ============================================================
   BURMESE NYC DESIGN SYSTEM
   Primitive values -> semantic roles -> component decisions.
   Components consume these tokens; raw visual values live here.
   ============================================================ */

/* Typography assets */
@font-face {
  font-family: 'Z11-MyanSans';
  src: url('fonts/Z11-MyanSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Z11-MyanSans';
  src: url('fonts/Z11-MyanSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Z11-MyanSans';
  src: url('fonts/Z11-MyanSans-Thin.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Primitive palette */
  --palette-white: #ffffff;
  --palette-black: #000000;
  --palette-blue-50: #eff8ff;
  --palette-blue-300: #60a5fa;
  --palette-blue-600: #2563eb;
  --palette-blue-700: #1d4ed8;
  --palette-blue-800: #153e75;
  --palette-blue-900: #1e3a8a;
  --palette-blue-950: #071f47;
  --palette-brand-blue: #0083ff;
  --palette-green-100: #dcfce7;
  --palette-green-600: #16803a;
  --palette-red-100: #fee2e2;
  --palette-red-600: #c2413b;
  --palette-amber-100: #fef3c7;
  --palette-amber-500: #f59e0b;
  --palette-slate-100: #f3f4f6;
  --palette-slate-200: #e5e7eb;
  --palette-slate-500: #6b7280;
  --palette-slate-700: #374151;
  --palette-slate-900: #111827;

  /* Semantic color roles */
  --color-action-primary: var(--palette-brand-blue);
  --color-action-primary-hover: var(--palette-blue-700);
  --color-accent: var(--palette-amber-500);
  --color-text-primary: var(--palette-slate-900);
  --color-text-secondary: var(--palette-slate-700);
  --color-text-muted: var(--palette-slate-500);
  --color-text-on-action: var(--palette-white);
  --color-surface-canvas: var(--palette-white);
  --color-surface-subtle: var(--palette-slate-100);
  --color-border-default: var(--palette-slate-200);
  --color-focus-ring: var(--palette-white);
  --color-feedback-error: #fca5a5;
  --color-feedback-error-strong: var(--palette-red-600);
  --color-feedback-error-surface: var(--palette-red-100);
  --color-feedback-success: var(--palette-green-600);
  --color-feedback-success-surface: var(--palette-green-100);
  --color-feedback-warning-surface: var(--palette-amber-100);
  --color-sparkle-gold: #fde047;
  --color-sparkle-blue: #7dd3fc;
  --color-sparkle-pink: #f9a8d4;
  --color-sparkle-white: var(--palette-white);
  --color-hero-tag-surface: rgba(255, 255, 255, .2);
  --color-footer-surface: #0e0a06;
  --color-footer-border: rgba(200, 130, 50, .08);
  --color-footer-copy: rgba(255, 255, 255, .22);

  /* Typography families */
  --font-family-english-display: 'Alan Sans', Arial, Helvetica, sans-serif;
  --font-family-english-body: 'Inter', Arial, Helvetica, sans-serif;
  --font-family-myanmar-display: 'Z11-MyanSans', 'Noto Sans Myanmar', sans-serif;
  --font-family-myanmar-body: 'Noto Sans Myanmar', sans-serif;
  --font-family-body: var(--font-family-english-body);
  --font-family-display: var(--font-family-english-display);
  --font-family-interface: var(--font-family-english-body);
  --font-family-mono: var(--font-family-english-body);

  /* Typography sizes */
  --font-size-micro: .5rem;
  --font-size-label-xs: .7rem;
  --font-size-label-sm: .72rem;
  --font-size-caption: .78rem;
  --font-size-meta: .8rem;
  --font-size-control: .85rem;
  --font-size-meta-lg: .87rem;
  --font-size-body-sm: .88rem;
  --font-size-body: .95rem;
  --font-size-body-md: 1rem;
  --font-size-body-lg: 1.05rem;
  --font-size-trivia-meta: .75rem;
  --font-size-trivia-timer: .875rem;
  --font-size-trivia-choice: 1rem;
  --font-size-trivia-question: clamp(1.35rem, 4vw, 2rem);
  --font-size-trivia-word: clamp(2.8rem, 11vw, 5.5rem);
  --font-size-trivia-score: clamp(3.5rem, 13vw, 6.5rem);
  --font-size-sparkle-sm: .75rem;
  --font-size-sparkle-md: 1.1rem;
  --font-size-sparkle-lg: 1.5rem;
  --font-size-title-sm: 1.2rem;
  --font-size-title-card: 1.3rem;
  --font-size-title-suggestion: 1.4rem;
  --font-size-title-content: 1.5rem;
  --font-size-title-section: 1.75rem;
  --font-size-title-page-min: 2rem;
  --font-size-title-page-max: 3rem;
  --font-size-title-hero-max: 3.5rem;
  --font-size-hero-title: clamp(var(--font-size-title-page-min), 5vw, var(--font-size-title-hero-max));
  --font-size-hero-copy: clamp(var(--font-size-body), 2vw, 1.15rem);
  --font-size-post-title: clamp(var(--font-size-title-page-min), 4vw, var(--font-size-title-page-max));

  /* Typography weights, leading, and tracking */
  --font-weight-thin: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --line-height-solid: 1;
  --line-height-display: 1.15;
  --line-height-title: 1.2;
  --line-height-card: 1.3;
  --line-height-card-relaxed: 1.35;
  --line-height-body: 1.6;
  --line-height-reading: 1.85;
  --tracking-label: 1px;
  --tracking-badge: 1.2px;
  --tracking-kicker: 1.5px;
  --tracking-cassette: .1em;
  --tracking-cassette-title: -.04em;

  /* Spacing scale */
  --space-0: 0;
  --space-0-5: 2px;
  --space-0-75: 3px;
  --space-1: 4px;
  --space-1-25: 5px;
  --space-1-5: 6px;
  --space-1-75: 7px;
  --space-2: 8px;
  --space-2-25: 9px;
  --space-2-5: 10px;
  --space-2-75: 11px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-4-5: 18px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-8-5: 34px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-13-5: 54px;
  --space-14: 56px;
  --space-15: 60px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Borders and radii */
  --border-width-hairline: 1px;
  --border-width-control: 1.5px;
  --border-width-emphasis: 2px;
  --stroke-width-icon: 2.5;
  --border-width-accent: 4px;
  --radius-2xs: 2px;
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 9px;
  --radius-2xl: 10px;
  --radius-3xl: 12px;
  --radius-4xl: 13px;
  --radius-5xl: 18px;
  --radius-6xl: 24px;
  --radius-7xl: 28px;
  --radius-round: 50%;
  --radius-pill: 999px;

  /* Layout and control sizing */
  --layout-content-max: 1200px;
  --layout-reading-max: 780px;
  --layout-hero-copy-max: 540px;
  --layout-trivia-max: 760px;
  --layout-trivia-copy-max: 580px;
  --layout-trivia-choice-min: 220px;
  --layout-blog-card-min: 300px;
  --layout-suggestion-card-min: 220px;
  --layout-suggestion-card-mobile-min: 160px;
  --header-height: 96px;
  --logo-height: 64px;
  --control-square: 36px;
  --icon-inline: 16px;
  --icon-menu-width: 22px;
  --avatar-size: 34px;
  --size-trivia-progress: 10px;
  --size-trivia-answer-marker: 32px;
  --size-trivia-touch-target: 52px;
  --size-trivia-question-min: 222px;
  --cassette-max-width: 530px;
  --art-plushy-max-width: 440px;
  --art-plushy-scale: 1.35;
  --art-plushy-sparkle-scale: 1.43;

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .1);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, .14);
  --shadow-plushy: drop-shadow(0 12px 18px rgba(0, 0, 0, .28));
  --shadow-plushy-sparkle: drop-shadow(0 0 12px rgba(253, 224, 71, .9));
  --shadow-sparkle: 0 0 8px currentColor;
  --shadow-trivia-card: 0 22px 54px rgba(3, 20, 48, .28);
  --shadow-trivia-answer: 0 8px 22px rgba(0, 38, 92, .2);

  /* Motion */
  --duration-reduced: .01ms;
  --duration-reel: .12s;
  --duration-fast: .15s;
  --duration-base: .25s;
  --duration-enter: .35s;
  --duration-image: .4s;
  --duration-plushy-pop: .5s;
  --duration-sparkle: .9s;
  --duration-trivia-feedback: .32s;
  --ease-standard: ease;
  --ease-linear: linear;
  --transition-standard: var(--duration-base) var(--ease-standard);
  --transition-fast: var(--duration-fast) var(--ease-standard);
  --transition-image: var(--duration-image) var(--ease-standard);
  --transition-reel: var(--duration-reel) var(--ease-linear);
  --scale-card-hover: 1.06;
  --scale-suggestion-hover: 1.07;
  --scale-control-active: .96;
  --scale-trivia-choice-hover: 1.015;

  /* Layers */
  --layer-base: 0;
  --layer-raised: 1;
  --layer-label: 2;
  --layer-decoration: 3;
  --layer-content: 5;
  --layer-reel: 6;
  --layer-control: 7;
  --layer-header: 100;

  /* Opacity */
  --opacity-hidden: 0;
  --opacity-visible: 1;
  --opacity-disabled: .42;
  --opacity-disabled-control: .5;
  --opacity-text-soft: .85;
  --opacity-texture: .62;

  /* Trivia game component */
  --color-trivia-surface: var(--palette-blue-950);
  --color-trivia-surface-raised: rgba(30, 58, 138, .7);
  --color-trivia-card: var(--palette-white);
  --color-trivia-card-muted: var(--palette-blue-50);
  --color-trivia-action-surface: var(--palette-brand-blue);
  --color-trivia-action-hover: var(--palette-blue-600);
  --color-trivia-action-ink: var(--palette-white);
  --color-trivia-choice-surface: var(--palette-white);
  --color-trivia-choice-hover: var(--palette-blue-50);
  --color-trivia-choice-ink: var(--palette-black);
  --color-trivia-choice-border: transparent;
  --color-trivia-choice-marker-border: var(--palette-blue-300);
  --color-trivia-copy-soft: rgba(255, 255, 255, .78);
  --color-trivia-border-soft: rgba(255, 255, 255, .2);
  --color-trivia-progress-track: rgba(255, 255, 255, .18);
  --color-trivia-timer-progress: var(--color-accent);
  --color-trivia-timer-surface: var(--palette-blue-900);
  --color-trivia-timer-track: var(--color-trivia-progress-track);
  --color-trivia-timer-warning: var(--palette-amber-500);
  --background-trivia: linear-gradient(145deg, var(--palette-blue-950) 0%, var(--palette-blue-900) 58%, var(--palette-blue-700) 100%);
  --background-trivia-glow: radial-gradient(circle at 15% 10%, rgba(0, 131, 255, .28), transparent 38%);

  /* Hero component */
  --background-hero: linear-gradient(135deg, var(--palette-blue-900) 0%, var(--palette-blue-600) 60%, var(--palette-blue-300) 100%);
  --background-hero-pattern: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

  --background-plushy-bridge: linear-gradient(to bottom, var(--color-surface-canvas) 0 50%, var(--color-footer-surface) 50% 100%);

  /* Cassette component palette */
  --cassette-shell-border: #050505;
  --cassette-shell-highlight: rgba(255, 255, 255, .12);
  --cassette-shell-inset: rgba(0, 0, 0, .62);
  --cassette-screw-border: #060606;
  --cassette-screw-highlight: #5f5f5c;
  --cassette-screw-mid: #30302e;
  --cassette-screw-low: #171716;
  --cassette-screw-slot: #1d1d1b;
  --cassette-label-surface: #f4f1e8;
  --cassette-label-ink: #25211d;
  --cassette-label-border: rgba(37, 33, 29, .08);
  --cassette-label-ink-strong: rgba(37, 33, 29, .8);
  --cassette-label-ink-muted: rgba(37, 33, 29, .62);
  --cassette-label-ink-track: rgba(37, 33, 29, .42);
  --cassette-label-shadow: rgba(92, 74, 49, .12);
  --cassette-stripe-green: #42aa73;
  --cassette-stripe-teal: #169c9f;
  --cassette-stripe-blue: #2774ca;
  --cassette-window: #1b1a18;
  --cassette-window-edge: #11100f;
  --cassette-window-center: #393631;
  --cassette-tape-border: #0d0a08;
  --cassette-tape-dark: #171717;
  --cassette-window-divider: rgba(224, 215, 195, .28);
  --cassette-control-border: #82827c;
  --cassette-control-surface: #63635e;
  --cassette-control-surface-hover: #7c7b74;
  --cassette-control-primary: #8d8d86;
  --cassette-control-primary-hover: #a2a29a;
  --cassette-control-primary-border: rgba(188, 187, 181, .5);
  --cassette-control-ink: #fdfdfc;
  --cassette-control-panel: rgba(99, 99, 94, .2);
  --cassette-reel-thumb: var(--palette-white);

  /* Cassette component materials */
  --background-cassette-shell: linear-gradient(165deg, #373735 0%, #20201f 52%, #0e0e0d 100%);
  --background-cassette-grain: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .08) 0 1px, transparent 1px), radial-gradient(circle at 70% 65%, rgba(0, 0, 0, .15) 0 1px, transparent 1px);
  --background-cassette-screw: radial-gradient(circle at 36% 30%, var(--cassette-screw-highlight), var(--cassette-screw-mid) 48%, var(--cassette-screw-low) 78%);
  --background-cassette-window: linear-gradient(rgba(255, 255, 255, .13), transparent 45%), var(--cassette-window);
  --background-cassette-window-center: linear-gradient(to bottom, rgba(255, 255, 255, .1), transparent 42%), var(--cassette-window-center);
  --background-cassette-tape: repeating-radial-gradient(circle, var(--cassette-shell-border) 0 2px, var(--cassette-tape-dark) 2px 4px);
  --background-cassette-reel: repeating-conic-gradient(var(--cassette-window) 0 9deg, transparent 9deg 50deg, var(--cassette-window) 50deg 60deg);

  /* Cassette component elevation */
  --shadow-cassette-shell: 0 28px 48px rgba(0, 0, 0, .44), 0 8px 16px rgba(0, 0, 0, .32), inset 0 2px 1px rgba(255, 255, 255, .2), inset 0 -3px 3px rgba(0, 0, 0, .74);
  --shadow-cassette-shell-hover: 0 34px 54px rgba(0, 0, 0, .5), 0 10px 18px rgba(0, 0, 0, .36), inset 0 2px 1px rgba(255, 255, 255, .2), inset 0 -3px 3px rgba(0, 0, 0, .74);
  --shadow-cassette-shell-inset: inset 0 0 0 1px var(--cassette-shell-inset);
  --shadow-cassette-screw: inset 0 1px 1px rgba(255, 255, 255, .26), 0 1px 1px rgba(0, 0, 0, .38);
  --shadow-cassette-screw-slot: inset 0 1px 1px rgba(0, 0, 0, .82);
  --shadow-cassette-label: inset 0 0 12px var(--cassette-label-shadow);
  --shadow-cassette-window: 0 0 0 4px rgba(244, 241, 232, .55), inset 0 3px 8px rgba(0, 0, 0, .58);
  --shadow-cassette-window-center: inset 0 3px 6px rgba(0, 0, 0, .72), 0 0 0 2px rgba(255, 255, 255, .08);
  --shadow-cassette-tape: inset 0 0 5px rgba(0, 0, 0, .7), 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-cassette-reel: drop-shadow(0 1px 1px rgba(0, 0, 0, .42));
  --shadow-cassette-reel-hub: 0 0 0 2px var(--cassette-window);
  --shadow-cassette-slider: 0 1px 4px rgba(37, 33, 29, .38);
  --shadow-cassette-control-panel: inset 0 3px 8px rgba(0, 0, 0, .5);
  --shadow-cassette-control: 0 2px 5px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .2);
  --shadow-cassette-control-primary: 0 3px 8px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .25);

  /* Cassette responsive typography and controls */
  --font-size-cassette-meta: clamp(7px, 2.45cqw, 11px);
  --font-size-cassette-title: clamp(11px, 4.3cqw, 20px);
  --font-size-cassette-catalogue: clamp(6px, 2.15cqw, 10px);
  --font-size-cassette-time: clamp(8px, 2.7cqw, 12px);
  --space-cassette-title: clamp(3px, 1.7cqw, 8px);
  --space-cassette-side: clamp(3px, .8cqw, 4px);
  --space-cassette-controls: clamp(5px, 1.5cqw, 10px);
  --size-cassette-control: clamp(21px, 6.2cqw, 32px);
  --size-cassette-control-primary: clamp(27px, 8cqw, 43px);

  /* Breakpoint reference tokens.
     Native CSS variables cannot be consumed by @media conditions without a
     build step, so the matching literals remain documented in styles.css. */
  --breakpoint-mobile-sm: 480px;
  --breakpoint-cassette: 560px;
  --breakpoint-tablet: 768px;
}