:root {
  
  --bg: #07090a;
  --bg-2: #101212;
  --bg-deep: #050403;
  --surface: #141617;
  --surface-2: #1d1f1f;
  --surface-3: #262727;
  --surface-sink: #050708;
  --surface-hover: rgba(201,107,63,0.09);

  
  --scrim-nav: rgba(7,9,10,.74);
  --scrim-nav-mobile: rgba(6,7,8,0.98);
  --scrim-panel: rgba(20,22,23,0.72);
  --scrim-modal: rgba(5,6,7,0.78);
  --qr-plate: #ffffff;
  --art-plate: #ffffff;

  
  --fg: #e6e2db;
  --fg-dim: #b5b2ad;
  --fg-mute: #a3a19c;
  --on-primary: #030404;

  
  --border: #2a3033;
  --border-2: #3b4245;
  --edge: #5c6163;
  --edge-lit: #a09a8e;
  --chisel: rgba(var(--accent-rgb), .52);

  
  --accent: #c96b3f;
  --accent-hi: #d58c69;
  --accent-rgb: 201, 107, 63;
  --accent-wash: rgba(201,107,63,0.09);
  --accent-wash-2: rgba(201,107,63,0.13);
  --accent-glow: rgba(201,107,63,0.28);

  
  --ok: #46bfa2;
  --ok-dim: #1f4e44;
  --ok-halo: rgba(70,191,162,0.15);
  --ok-glow: rgba(70,191,162,0.75);
  --warn: #e2d4a5;
  --warn-dim: #5a5645;
  --warn-halo: rgba(226,212,165,0.13);
  --warn-glow: rgba(226,212,165,0.7);
  --bad: #e35a72;
  --bad-dim: #5b2832;
  --bad-halo: rgba(227,90,114,0.13);
  --bad-glow: rgba(227,90,114,0.7);
  --bad-ink: rgba(227,90,114,0.08);

  
  --grad-hero-text: linear-gradient(174deg, #f3f0e9 6%, var(--fg) 34%, var(--fg-dim) 68%, #8d7060 100%);
  --grad-hero-halo: radial-gradient(circle at 50% 66%, rgba(var(--accent-rgb), .30), transparent 62%);
  --grad-btn-primary: linear-gradient(180deg, #ce7a52, #b15e37);
  --grad-btn-primary-hover: linear-gradient(180deg, #d58c69, #c5693e);
  --grad-cta: linear-gradient(180deg, #262727, #1d1f1f);
  --grad-card: linear-gradient(180deg, #141617, #050708);
  --grad-status: linear-gradient(180deg, #1b1d1d, #050708);
  --grad-icon-well: linear-gradient(180deg, #222323, #121414);
  --grad-notice: linear-gradient(180deg, #191a1b, #101212);
  --grad-foot: linear-gradient(180deg, rgba(16,18,18,0.6), rgba(5,4,3,0.9));
  --grad-poster: radial-gradient(circle at 50% 70%, rgba(var(--accent-rgb), .26), transparent 64%);
  --grad-shimmer: linear-gradient(90deg, rgba(201,107,63,0), rgba(213,140,105,0.85), rgba(70,191,162,0.6), rgba(226,212,165,0.6), rgba(201,107,63,0));
  --backdrop-layers: radial-gradient(820px 560px at 6% -10%, rgba(var(--accent-rgb), .15), transparent 62%), radial-gradient(1120px 400px at 50% 112%, rgba(var(--accent-rgb), .12), transparent 68%), radial-gradient(64% 60% at 50% 32%, rgba(7,9,10,.34), rgba(7,9,10,.15) 66%, rgba(7,9,10,0) 100%), linear-gradient(180deg, rgba(7,9,10,.86) 0%, rgba(7,9,10,.80) 26%, rgba(7,9,10,.80) 58%, rgba(7,9,10,.86) 84%, rgba(5,4,3,.93) 100%), var(--art-background) center top / cover no-repeat, linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  --backdrop-drift: radial-gradient(44% 30% at 22% 26%, rgba(230,226,219,.035), transparent 72%), radial-gradient(38% 24% at 74% 16%, rgba(var(--accent-rgb), .055), transparent 74%), radial-gradient(56% 26% at 46% 74%, rgba(230,226,219,.022), transparent 76%);
  --stage-floor: radial-gradient(75% 60% at 50% 82%, rgba(94,53,34,0.3), transparent 70%), radial-gradient(50% 34% at 76% 6%, rgba(209,129,92,0.14), transparent 65%), linear-gradient(180deg, #101212 0%, #050403 88%);

  
  --art-mark: url('/assets/brand/mark-crest-937b0678.webp');
  --art-hero: url('/assets/brand/logo-crest-6c4a9b42.webp');
  --art-og: url('/assets/brand/og-crest-1200x630-a27208a3.jpg');
  --art-background: url('/assets/brand/background-perf-v1.webp?v=42a55d01aba3a3fd');
  --hero-art-display: none;

  
  --font-display: 'Fraunces', 'Noto Sans Thai', 'Iowan Old Style', Georgia, serif;
  --font-ui: 'Inter', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Noto Sans Thai', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --fs-1: 11px;
  --fs-2: 13px;
  --fs-3: 16px;
  --fs-4: 18.5px;
  --fs-5: 34px;
  --fs-6: 72px;

  
  --r: 2px;
  --r-s: 2px;
  --r-xs: 1px;
  --r-lg: 3px;
  --r-pill: 999px;
  --r-round: 50%;
  --gut: 22px;
  --maxw: 1280px;

  
  --shadow: 0 1px 0 rgba(var(--accent-rgb), .05) inset, 0 1px 0 rgba(0,0,0,.55), 0 22px 40px -26px rgba(0,0,0,.95);
  --shadow-panel: 0 18px 44px -22px rgba(0,0,0,0.9);
  --glow: 0 0 22px -6px rgba(var(--accent-rgb), .45), 0 0 60px -18px rgba(var(--accent-rgb), .30);
  --shadow-text: 0 1px 3px rgba(5,4,3,0.85), 0 0 8px rgba(5,4,3,0.7);

  
  --z-nav: 60;
  --z-livebar: 90;
  --z-skip: 200;
  --z-map-overlay: 700;
  --z-map-panel: 800;

  
  --lvc-bite: #FB923C;
  --lvc-bleed: #EF4444;
  --lvc-blood: #FF5CD6;
  --lvc-carb: #FBBF24;
  --lvc-fracture: #34D399;
  --lvc-health: #E23B3B;
  --lvc-hunger: #F97316;
  --lvc-lipid: #60A5FA;
  --lvc-no: #F87171;
  --lvc-ok: #6BCF6B;
  --lvc-oxygen: #38BDF8;
  --lvc-prime: #FCD34D;
  --lvc-prime-dim: rgba(245,158,11,.4);
  --lvc-prime-glow: rgba(245,158,11,.18);
  --lvc-prime-halo: rgba(245,158,11,.15);
  --lvc-protein: #F87171;
  --lvc-sprint: #A78BFA;
  --lvc-stamina: #FBBF24;
  --lvc-thirst: #60A5FA;
  --lvc-well-scrim: rgba(0,0,0,.55);
  --mv-blood: #FF5CD6;
  --mv-diet-a: #F5C542;
  --mv-diet-b: #FF8A7A;
  --mv-diet-c: #9AD0FF;
  --mv-dim: rgba(232,238,246,.55);
  --mv-growth: #F0B429;
  --mv-health: #FF4D6D;
  --mv-hunger: #7ED957;
  --mv-line: rgba(255,255,255,0.1);
  --mv-line-2: rgba(255,255,255,0.22);
  --mv-live: #37D67A;
  --mv-live-halo: rgba(55,214,122,0.18);
  --mv-num-halo: rgba(0,0,0,.7);
  --mv-oxygen: #8AB4FF;
  --mv-plate: rgba(5,4,3,0.74);
  --mv-stamina: #2BD9C8;
  --mv-text: #E8EEF6;
  --mv-thirst: #4FC3F7;
  --mv-unknown: #6C7A8C;
  --mv-unknown-halo: rgba(108,122,140,0.16);

}