/* =========================================================================
   Lich Am Duong — Material Design 3 token system
   Seed palette: lacquer red (Tet) + gold (auspicious) + indigo (night sky)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* ---- Shape scale ---- */
  --shape-none: 0px;
  --shape-xs: 8px;
  --shape-sm: 12px;
  --shape-md: 16px;
  --shape-lg: 20px;
  --shape-xl: 28px;
  --shape-full: 999px;

  /* ---- Motion ---- */
  --motion-fast: 120ms;
  --motion-standard: 220ms;
  --motion-slow: 380ms;
  --ease-standard: cubic-bezier(.2,0,0,1);
  --ease-emphasized: cubic-bezier(.3,0,.1,1);

  /* ---- Elevation (M3 shadow recipes) ---- */
  --elev-0: none;
  --elev-1: 0 1px 2px 0 rgba(0,0,0,.16), 0 1px 3px 1px rgba(0,0,0,.10);
  --elev-2: 0 1px 2px 0 rgba(0,0,0,.18), 0 2px 6px 2px rgba(0,0,0,.10);
  --elev-3: 0 1px 3px 0 rgba(0,0,0,.20), 0 4px 8px 3px rgba(0,0,0,.12);
  --elev-4: 0 2px 3px 0 rgba(0,0,0,.20), 0 6px 10px 4px rgba(0,0,0,.12);
  --elev-5: 0 4px 4px 0 rgba(0,0,0,.20), 0 8px 12px 6px rgba(0,0,0,.12);

  /* ---- State-layer opacities ---- */
  --state-hover: .08;
  --state-focus: .10;
  --state-press: .10;
  --state-drag: .16;
}

/* =========================================================================
   LIGHT SCHEME (default)
   ========================================================================= */
:root, :root[data-theme="light"] {
  --primary: #8C1D14;
  --on-primary: #FFFFFF;
  --primary-container: #FFDAD2;
  --on-primary-container: #3A0900;

  --secondary: #6E5800;
  --on-secondary: #FFFFFF;
  --secondary-container: #FBE07F;
  --on-secondary-container: #221B00;

  --tertiary: #2D5F8A;
  --on-tertiary: #FFFFFF;
  --tertiary-container: #CDE5FF;
  --on-tertiary-container: #001D34;

  --error: #BA1A1A;
  --on-error: #FFFFFF;
  --error-container: #FFDAD6;
  --on-error-container: #410002;

  --success: #2E6B3E;
  --on-success: #FFFFFF;
  --success-container: #C2F1CC;
  --on-success-container: #00210B;

  --surface: #FFF8F6;
  --surface-dim: #E6D5D1;
  --surface-bright: #FFF8F6;
  --surface-container-lowest: #FFFFFF;
  --surface-container-low: #FEF1ED;
  --surface-container: #FBEAE5;
  --surface-container-high: #F5E4E0;
  --surface-container-highest: #F0DEDA;
  --on-surface: #231917;
  --on-surface-variant: #54433F;
  --outline: #87726D;
  --outline-variant: #D8C2BC;
  --scrim: #000000;
  --shadow: #000000;

  --inverse-surface: #392E2B;
  --inverse-on-surface: #FFEDE8;
  --inverse-primary: #FFB4A1;

  --gold-accent: #B6862C;
  --color-scheme: light;

  /* Fixed brand tokens (do not swap with theme) — used for the Tet banner */
  --tet-c1: #C2382B;
  --tet-c2: #8C1D14;
  --tet-c3: #3A0900;
  --tet-on: #FFFFFF;
  --tet-gold: #F0C375;
}

/* =========================================================================
   DARK SCHEME
   ========================================================================= */
:root[data-theme="dark"] {
  --primary: #FFB4A1;
  --on-primary: #5D1505;
  --primary-container: #75291A;
  --on-primary-container: #FFDAD2;

  --secondary: #E7C36C;
  --on-secondary: #3B2F00;
  --secondary-container: #534300;
  --on-secondary-container: #FFE08C;

  --tertiary: #9ECAFF;
  --on-tertiary: #00324C;
  --tertiary-container: #114870;
  --on-tertiary-container: #CDE5FF;

  --error: #FFB4AB;
  --on-error: #690005;
  --error-container: #93000A;
  --on-error-container: #FFDAD6;

  --success: #8BD49B;
  --on-success: #00390F;
  --success-container: #145226;
  --on-success-container: #C2F1CC;

  --surface: #18120F;
  --surface-dim: #18120F;
  --surface-bright: #403532;
  --surface-container-lowest: #120D0A;
  --surface-container-low: #211A17;
  --surface-container: #251D1A;
  --surface-container-high: #302724;
  --surface-container-highest: #3C322E;
  --on-surface: #F0DEDA;
  --on-surface-variant: #D8C2BC;
  --outline: #A08C86;
  --outline-variant: #54433F;
  --scrim: #000000;
  --shadow: #000000;

  --inverse-surface: #F0DEDA;
  --inverse-on-surface: #392E2B;
  --inverse-primary: #8C1D14;

  --gold-accent: #E7C36C;
  --color-scheme: dark;
}

/* =========================================================================
   RESET
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: var(--color-scheme); -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

html, body {
  height: 100%;
}

body {
  font-family: var(--font-family);
  background: var(--surface-dim);
  color: var(--on-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--motion-standard) var(--ease-standard),
              color var(--motion-standard) var(--ease-standard);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2.5px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =========================================================================
   TYPE SCALE (Material Design 3)
   ========================================================================= */
.display-l { font-size: clamp(2.4rem, 5vw, 3.5625rem); line-height: 1.12; font-weight: 600; letter-spacing: -.25px; }
.display-m { font-size: clamp(2rem, 4vw, 2.8125rem); line-height: 1.15; font-weight: 600; }
.headline-l { font-size: 2rem; line-height: 1.25; font-weight: 600; }
.headline-m { font-size: 1.75rem; line-height: 1.28; font-weight: 600; }
.headline-s { font-size: 1.5rem; line-height: 1.33; font-weight: 600; }
.title-l { font-size: 1.375rem; line-height: 1.27; font-weight: 500; }
.title-m { font-size: 1rem; line-height: 1.5; font-weight: 600; letter-spacing: .15px; }
.title-s { font-size: .875rem; line-height: 1.43; font-weight: 600; letter-spacing: .1px; }
.body-l { font-size: 1rem; line-height: 1.5; font-weight: 400; letter-spacing: .15px; }
.body-m { font-size: .875rem; line-height: 1.43; font-weight: 400; letter-spacing: .25px; }
.body-s { font-size: .75rem; line-height: 1.33; font-weight: 400; letter-spacing: .4px; }
.label-l { font-size: .875rem; line-height: 1.43; font-weight: 600; letter-spacing: .1px; }
.label-m { font-size: .75rem; line-height: 1.33; font-weight: 600; letter-spacing: .5px; }
.label-s { font-size: .6875rem; line-height: 1.45; font-weight: 600; letter-spacing: .5px; }

.text-primary { color: var(--primary); }
.text-on-variant { color: var(--on-surface-variant); }
.text-gold { color: var(--gold-accent); }
.text-error { color: var(--error); }