/* Astra design tokens
   Layer 1: primitive palette  (--p-*)
   Layer 2: semantic tokens    (--bg-*, --fg-*, --stroke-*, --brand-*)
   Layer 3: dimension / type / radius / motion scales
   Structure modeled on seed-design (palette -> semantic, 4px dimension base, d1-d6 durations). */

:root {
  color-scheme: dark;

  /* ---------- primitive: ink (night) ---------- */
  --p-ink-00: #040509;
  --p-ink-50: #07080e;
  --p-ink-100: #0b0d16;
  --p-ink-200: #11141f;
  --p-ink-300: #181c2a;
  --p-ink-400: #222739;
  --p-ink-500: #2f354b;
  --p-ink-600: #4a5170;
  --p-ink-700: #7c839f;
  --p-ink-800: #a9aec4;
  --p-ink-900: #d6d9e6;
  --p-ink-1000: #f3f1ea;

  /* ---------- primitive: starlight gold ---------- */
  --p-gold-100: #2a2214;
  --p-gold-200: #4a3b1f;
  --p-gold-400: #a8874a;
  --p-gold-500: #c9a660;
  --p-gold-600: #e2c27a;
  --p-gold-700: #f0d89f;
  --p-gold-800: #fbefcf;

  /* ---------- primitive: barrier azure ---------- */
  --p-azure-200: #16244a;
  --p-azure-500: #5f8cff;
  --p-azure-600: #8db4ff;
  --p-azure-700: #c2d6ff;

  /* ---------- primitive: house hues ---------- */
  --p-crimson-500: #d4545f;
  --p-steel-500: #6fa7d9;
  --p-amethyst-500: #a487ec;
  --p-laurel-500: #e2c27a;
  --p-ash-500: #b6a9a0;

  /* ---------- semantic: background layers ---------- */
  --bg-layer-basement: var(--p-ink-50);
  --bg-layer-default: var(--p-ink-100);
  --bg-layer-raised: var(--p-ink-200);
  --bg-layer-floating: rgb(17 20 31 / .72);
  --bg-layer-floating-solid: var(--p-ink-300);
  --bg-overlay: rgb(4 5 9 / .7);

  /* ---------- semantic: foreground ---------- */
  --fg-neutral: var(--p-ink-1000);
  --fg-neutral-muted: var(--p-ink-900);
  --fg-neutral-subtle: var(--p-ink-800);
  --fg-disabled: var(--p-ink-600);
  --fg-brand: var(--p-gold-600);
  --fg-brand-strong: var(--p-gold-700);
  --fg-magic: var(--p-azure-600);
  --fg-on-brand: #17120a;

  /* ---------- semantic: stroke ---------- */
  --stroke-neutral-weak: rgb(255 255 255 / .07);
  --stroke-neutral: rgb(255 255 255 / .12);
  --stroke-neutral-strong: rgb(255 255 255 / .22);
  --stroke-brand-weak: rgb(226 194 122 / .22);
  --stroke-brand: rgb(226 194 122 / .5);
  --stroke-focus: var(--p-gold-700);

  /* ---------- semantic: brand surfaces (with state) ---------- */
  --brand-solid: var(--p-gold-600);
  --brand-solid-hover: var(--p-gold-700);
  --brand-solid-pressed: var(--p-gold-500);
  --brand-weak: rgb(226 194 122 / .1);
  --brand-weak-hover: rgb(226 194 122 / .16);
  --brand-weak-pressed: rgb(226 194 122 / .22);
  --brand-gradient: linear-gradient(180deg, var(--p-gold-800) 0%, var(--p-gold-600) 48%, var(--p-gold-400) 100%);

  /* ---------- semantic: house ---------- */
  --house-regalia: var(--p-crimson-500);
  --house-valkyria: var(--p-steel-500);
  --house-orpheus: var(--p-amethyst-500);
  --house-faculty: var(--p-laurel-500);
  --house-rival: var(--p-ash-500);

  /* ---------- semantic: seasons ---------- */
  --season-spring: #e9a6b8;
  --season-summer: #7fd0c4;
  --season-autumn: #e5a463;
  --season-winter: #a9c4ff;

  /* ---------- dimension (4px base) ---------- */
  --d-0_5: 2px;
  --d-1: 4px;
  --d-1_5: 6px;
  --d-2: 8px;
  --d-3: 12px;
  --d-4: 16px;
  --d-5: 20px;
  --d-6: 24px;
  --d-8: 32px;
  --d-10: 40px;
  --d-12: 48px;
  --d-16: 64px;
  --d-20: 80px;
  --d-24: 96px;
  --d-32: 128px;

  /* dimension aliases */
  --gutter: var(--d-4);
  --section-y: var(--d-20);
  --container: 1240px;
  --nav-h: 64px;

  /* ---------- radius ---------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 12px;
  --r-full: 999px;

  /* ---------- typography ---------- */
  --font-display: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", "Batang", serif;
  --font-body: "Noto Sans KR", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --font-latin: "Cinzel", "Trajan Pro", "Times New Roman", serif;

  --t-1: 13px;   /* caption, minimum */
  --t-2: 14px;
  --t-3: 15px;
  --t-4: 16px;   /* body */
  --t-5: 18px;
  --t-6: 20px;
  --t-7: 24px;
  --t-8: 30px;
  --t-9: clamp(30px, 4.2vw, 48px);
  --t-10: clamp(46px, 9vw, 112px);

  --lh-tight: 1.15;
  --lh-heading: 1.3;
  --lh-body: 1.75;
  --tracking-latin: .22em;

  /* ---------- motion ---------- */
  --dur-d1: 50ms;
  --dur-d2: 100ms;
  --dur-d3: 150ms;
  --dur-d4: 200ms;
  --dur-d5: 250ms;
  --dur-d6: 300ms;
  --dur-slow: 600ms;
  --dur-cine: 1200ms;

  --ease: cubic-bezier(.35, 0, .35, 1);
  --ease-enter: cubic-bezier(0, 0, .15, 1);
  --ease-exit: cubic-bezier(.35, 0, 1, 1);
  --ease-enter-expressive: cubic-bezier(.03, .4, .1, 1);
  --ease-exit-expressive: cubic-bezier(.35, 0, .95, .55);
  --pressed-scale: .97;

  /* ---------- elevation ---------- */
  --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-2: 0 12px 32px -12px rgb(0 0 0 / .7);
  --shadow-3: 0 40px 80px -30px rgb(0 0 0 / .85);
  --glow-brand: 0 0 0 1px var(--stroke-brand-weak), 0 18px 60px -20px rgb(226 194 122 / .35);
}

@media (min-width: 768px) {
  :root {
    --gutter: var(--d-8);
    --section-y: var(--d-24);
    --nav-h: 72px;
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: var(--d-12);
    --section-y: var(--d-32);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-slow: 1ms;
    --dur-cine: 1ms;
    --dur-d6: 1ms;
    --dur-d5: 1ms;
  }
}