/* ==========================================================================
   DaVinci AI Academy — Core Tokens
   Colors, type, space, radii, shadows.
   ========================================================================== */

/* ---------- FONTS ---------- */

@font-face {
  font-family: "Anuphan";
  src: url("./fonts/Anuphan-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DB PatPong X";
  src: url("./fonts/DB-PatPong-X.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FC SaveSpace";
  src: url("./fonts/FC-SaveSpace-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Hero — the Friday pink/crimson sampled from the logo */
  --friday-50:  #fff1f4;
  --friday-100: #ffdde4;
  --friday-200: #ffb8c8;
  --friday-300: #ff829f;
  --friday-400: #ff4b77;
  --friday-500: #ec1a4c; /* ← logo color */
  --friday-600: #c9103f;
  --friday-700: #9e0b31;
  --friday-800: #6f0722;
  --friday-900: #3f0413;

  /* Ink — near-black with a warm undertone */
  --ink-50:   #f7f5f4;
  --ink-100:  #ebe8e6;
  --ink-200:  #d3cecb;
  --ink-300:  #a9a29e;
  --ink-400:  #7a7370;
  --ink-500:  #524c4a;
  --ink-600:  #3a3634;
  --ink-700:  #26231f; /* primary text */
  --ink-800:  #17140f;
  --ink-900:  #0b0908;

  /* Cream — off-white page backgrounds */
  --cream-50:  #fefcf8;
  --cream-100: #fbf6ec;
  --cream-200: #f5edda;

  /* Accents — used sparingly alongside Friday pink */
  --lime:    #d6f24a;  /* optimistic accent, for highlights/tags */
  --butter:  #ffd46b;  /* warm highlight */
  --ocean:   #1756d1;  /* link/secondary action */
  --teal:    #0d9488;  /* success/progress */

  /* Semantic */
  --success: #0d9488;
  --warning: #f59e0b;
  --danger:  #ec1a4c;
  --info:    #1756d1;

  /* Surfaces */
  --bg:            var(--cream-50);
  --bg-subtle:     var(--cream-100);
  --bg-elevated:   #ffffff;
  --bg-inverse:    var(--ink-800);
  --surface:       #ffffff;
  --surface-alt:   var(--cream-100);

  /* Foreground */
  --fg1: var(--ink-800);   /* primary text */
  --fg2: var(--ink-500);   /* secondary text */
  --fg3: var(--ink-300);   /* tertiary / placeholder */
  --fg-inverse: var(--cream-50);
  --fg-brand:   var(--friday-500);

  /* Borders */
  --border:        var(--ink-100);
  --border-strong: var(--ink-200);
  --border-brand:  var(--friday-500);

  /* ---------- TYPEFACES ---------- */
  /* Anuphan — workhorse Thai+Latin sans. Body, UI, labels. */
  --font-sans: "Anuphan", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* DB PatPong X — tall condensed display. Big headlines, hero type, posters. */
  --font-display: "DB PatPong X", "Anuphan", "Oswald", Impact, sans-serif;
  /* FC SaveSpace — geometric rounded display. Friendly buttons, badges, labels. */
  --font-label: "FC SaveSpace", "Anuphan", system-ui, sans-serif;
  /* Mono */
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE ----------
     Tight scale leaning on DB PatPong for display; Anuphan for everything else. */
  --fz-xs:   12px;
  --fz-sm:   14px;
  --fz-base: 16px;
  --fz-md:   18px;
  --fz-lg:   22px;
  --fz-xl:   28px;
  --fz-2xl:  36px;
  --fz-3xl:  48px;
  --fz-4xl:  64px;
  --fz-5xl:  88px;
  --fz-6xl:  120px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.65;

  /* Thai often needs slightly more line height than Latin */
  --lh-thai:    1.55;

  /* ---------- SPACE ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- RADII ----------
     DaVinci leans generous: pills for CTAs, soft-rounded for cards. */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ----------
     Shadows are soft and warm; no harsh drop shadows.
     A signature 'stamped' shadow uses a solid pink offset instead of blur. */
  --shadow-xs: 0 1px 2px rgba(23, 20, 15, 0.06);
  --shadow-sm: 0 2px 6px rgba(23, 20, 15, 0.07), 0 1px 2px rgba(23, 20, 15, 0.04);
  --shadow-md: 0 8px 20px rgba(23, 20, 15, 0.08), 0 2px 6px rgba(23, 20, 15, 0.04);
  --shadow-lg: 0 20px 40px rgba(23, 20, 15, 0.10), 0 4px 10px rgba(23, 20, 15, 0.04);
  --shadow-hero: 0 30px 60px rgba(236, 26, 76, 0.25);

  /* Signature 'stamped' offset — used for playful buttons & cards */
  --shadow-stamp-sm: 4px 4px 0 0 var(--ink-800);
  --shadow-stamp-md: 6px 6px 0 0 var(--ink-800);
  --shadow-stamp-lg: 10px 10px 0 0 var(--ink-800);
  --shadow-stamp-pink: 6px 6px 0 0 var(--friday-500);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 400ms;
}

/* ==========================================================================
   SEMANTIC TYPE — apply these classes / element selectors
   ========================================================================== */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fz-base);
  line-height: var(--lh-normal);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display — DB PatPong X: used for giant hero headlines, posters.
   The font is tall/condensed → always set tighter tracking and line height. */
.t-display,
h1.hero {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, var(--fz-6xl));
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--fg1);
  text-wrap: balance;
}

/* Headings — DB PatPong for section-scale impact; Anuphan fallback below xl */
h1, .t-h1 {
  font-family: var(--font-display);
  font-size: var(--fz-4xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin: 0;
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-size: var(--fz-3xl);
  line-height: var(--lh-snug);
  margin: 0;
}

h3, .t-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fz-xl);
  line-height: var(--lh-snug);
  margin: 0;
}

h4, .t-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fz-lg);
  line-height: var(--lh-snug);
  margin: 0;
}

/* Body */
p, .t-body {
  font-family: var(--font-sans);
  font-size: var(--fz-base);
  line-height: var(--lh-normal);
  color: var(--fg1);
  margin: 0;
}
.t-body-lg { font-size: var(--fz-md); line-height: var(--lh-relaxed); }
.t-body-sm { font-size: var(--fz-sm); color: var(--fg2); }

/* Label — FC SaveSpace: all caps, tracked, used on buttons, tags, eyebrows */
.t-label, .t-eyebrow {
  font-family: var(--font-label);
  font-size: var(--fz-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg2);
}

.t-eyebrow {
  color: var(--friday-500);
}

/* Code */
code, .t-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-50);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
}

/* Thai-specific line height helper */
.t-thai { line-height: var(--lh-thai); }