/* ═══════════════════════════════════════════════════════════════
   Read Master Academy — Colors & Typography Tokens
   Source: reference/app/globals.css
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Noto Serif Dives Akuru';
  src: url('./fonts/NotoSerifDivesAkuru-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── Primary: Deep Pine Green (브랜드 그린) ─────────────── */
  --rm-green-950: #0a1f1a;
  --rm-green-900: #0f2e25;
  --rm-green-800: #163d32;  /* Primary brand surface */
  --rm-green-700: #1e5244;
  --rm-green-600: #276856;  /* Primary accent */
  --rm-green-500: #2f7d68;
  --rm-green-400: #4a9d85;
  --rm-green-300: #6fbda3;
  --rm-green-200: #a3d7c5;
  --rm-green-100: #d1ebe2;
  --rm-green-50:  #edf7f3;

  /* ─── Secondary: Antique Gold (프리미엄 골드) ────────────── */
  --rm-gold-900: #5c4a1e;
  --rm-gold-800: #7a6328;
  --rm-gold-700: #997d33;
  --rm-gold-600: #b8973e;  /* Gold accent text */
  --rm-gold-500: #c9a94d;  /* Primary gold button */
  --rm-gold-400: #d4ba6e;
  --rm-gold-300: #dfcb8f;
  --rm-gold-200: #eaddb0;
  --rm-gold-100: #f4eed5;
  --rm-gold-50:  #faf8ed;

  /* ─── Neutral: Warm Ivory Paper (종이 느낌의 배경) ──────── */
  --rm-ivory:       #faf8f3;  /* Default page bg */
  --rm-ivory-warm:  #f5f0e8;
  --rm-ivory-deep:  #ede7db;  /* Card borders */

  /* ─── Text Scale (on ivory) ─────────────────────────────── */
  --rm-text-primary:   #1a2b25;
  --rm-text-secondary: #3d5a4e;
  --rm-text-muted:     #6b8a7d;
  --rm-text-light:     #93b0a3;

  /* ─── Semantic Tokens ───────────────────────────────────── */
  --bg-canvas:       var(--rm-ivory);
  --bg-surface:      #ffffff;
  --bg-subtle:       var(--rm-green-50);
  --bg-inverted:     var(--rm-green-900);

  --fg-1: var(--rm-text-primary);
  --fg-2: var(--rm-text-secondary);
  --fg-3: var(--rm-text-muted);
  --fg-4: var(--rm-text-light);
  --fg-on-dark: #ffffff;
  --fg-accent-gold: var(--rm-gold-600);
  --fg-accent-green: var(--rm-green-700);

  --border-subtle: color-mix(in oklab, var(--rm-ivory-deep) 60%, transparent);
  --border-default: var(--rm-ivory-deep);
  --border-accent: var(--rm-green-200);

  --selection-bg: rgba(47, 125, 104, 0.15);
  --selection-fg: var(--rm-green-900);

  /* ─── Shadow System ─────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(10, 31, 26, 0.04);
  --shadow-sm: 0 2px 8px rgba(10, 31, 26, 0.05);
  --shadow-md: 0 8px 24px rgba(10, 31, 26, 0.07);
  --shadow-lg: 0 20px 60px -12px rgba(10, 31, 26, 0.12);
  --shadow-xl: 0 32px 80px -16px rgba(10, 31, 26, 0.18);
  --shadow-gold: 0 8px 24px rgba(201, 169, 77, 0.2);

  /* ─── Radii ─────────────────────────────────────────────── */
  --radius-sm:   6px;   /* small chips */
  --radius-md:   8px;   /* buttons, inputs */
  --radius-lg:   12px;  /* form fields */
  --radius-xl:   16px;  /* cards */
  --radius-2xl:  20px;  /* feature cards */
  --radius-full: 9999px;

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

  /* ─── Typography: Fonts ─────────────────────────────────── */
  --font-sans: 'Geist', 'Pretendard', 'Inter', system-ui, -apple-system, 'Apple SD Gothic Neo', sans-serif;
  --font-display: 'Geist', 'Pretendard', system-ui, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  /* Decorative/ornamental accent face (Thaana script; use sparingly for
     brand marks, decorative initials, or display ornaments — NOT for body
     Latin or Korean, which it does not support) */
  --font-accent-display: 'Noto Serif Dives Akuru', 'Geist', serif;

  /* ─── Type Scale ────────────────────────────────────────── */
  --fs-display-xl: clamp(2.5rem, 1.4rem + 5.5vw, 4.5rem);   /* h1 hero 40–72 */
  --fs-display-lg: clamp(2rem, 1.2rem + 4vw, 3rem);          /* h2 section 32–48 */
  --fs-display-md: clamp(1.5rem, 1rem + 2.5vw, 2.25rem);     /* h3 subsection 24–36 */
  --fs-h1: 2rem;           /* 32px */
  --fs-h2: 1.5rem;         /* 24px */
  --fs-h3: 1.25rem;        /* 20px */
  --fs-h4: 1.125rem;       /* 18px */
  --fs-body-lg: 1.125rem;  /* 18px */
  --fs-body: 1rem;         /* 16px */
  --fs-body-sm: 0.875rem;  /* 14px */
  --fs-caption: 0.75rem;   /* 12px */
  --fs-eyebrow: 0.75rem;   /* 12px tracking wide */

  --lh-tight:   1.1;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --ls-tighter: -0.03em;
  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.05em;
  --ls-wider:    0.15em;
  --ls-widest:   0.2em;   /* eyebrows */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ─── Motion ────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   0.2s;
  --dur-med:    0.4s;
  --dur-slow:   0.8s;
}

/* ═══════════════════════════════════════════════════════════════
   Base & Semantic Element Styles
   ═══════════════════════════════════════════════════════════════ */

body {
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background-color: var(--selection-bg);
  color: var(--selection-fg);
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--rm-green-900);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--rm-green-900);
}

h3, .h3 {
  font-size: var(--fs-display-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--rm-green-900);
}

h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--rm-green-900);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--rm-gold-600);
}

code, kbd, pre {
  font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════════════════════════
   Signature Brand Effects
   ═══════════════════════════════════════════════════════════════ */

/* Gold shimmer — reserved for hero headline accents */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.gold-shimmer {
  background: linear-gradient(
    90deg,
    var(--rm-gold-600) 0%,
    var(--rm-gold-400) 25%,
    var(--rm-gold-300) 50%,
    var(--rm-gold-400) 75%,
    var(--rm-gold-600) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 4s linear infinite;
}

/* Premium gold divider */
.premium-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--rm-gold-300),
    var(--rm-gold-500),
    var(--rm-gold-300),
    transparent
  );
}

/* Card hover pattern */
.card-hover {
  transition: all var(--dur-med) var(--ease-out);
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Fade entrances */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-fade-in-up { animation: fadeInUp var(--dur-slow) var(--ease-out) forwards; }
.animate-fade-in    { animation: fadeIn 0.6s var(--ease-out) forwards; }

.animate-delay-100 { animation-delay: 0.1s; opacity: 0; }
.animate-delay-200 { animation-delay: 0.2s; opacity: 0; }
.animate-delay-300 { animation-delay: 0.3s; opacity: 0; }
.animate-delay-400 { animation-delay: 0.4s; opacity: 0; }
.animate-delay-500 { animation-delay: 0.5s; opacity: 0; }
.animate-delay-600 { animation-delay: 0.6s; opacity: 0; }