/* ============================================================
   Boss AI Academy — Design Tokens
   AI 係工具，你先係 Boss
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;800;900&family=Rajdhani:wght@500;600;700&family=Montserrat:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand Core ---------- */
  --bs-orange:        #EC5A2C;   /* AI Orange — primary CTA */
  --bs-orange-hover:  #D94B1E;   /* 8% darker — hover */
  --bs-orange-press:  #B63C18;   /* pressed state */
  --bs-gold:          #F3C859;   /* Academy Gold */
  --bs-gold-warm:     #B09B49;   /* Warm Gold accent */

  /* ---------- Neutrals ---------- */
  --bs-black:         #000000;
  --bs-space-dark:    #0A0817;   /* signature hero bg */
  --bs-ink-900:       #1A1A1A;   /* dark mode bg */
  --bs-ink-800:       #2D2D2D;   /* card / surface dark */
  --bs-ink-700:       #3A3A3A;   /* divider on dark */
  --bs-ink-500:       #6B6B6B;   /* muted text */
  --bs-ink-300:       #B8B8B8;   /* subtle text on dark */
  --bs-gray-100:      #F5F5F5;   /* light page bg / divider */
  --bs-gray-50:       #FAFAFA;
  --bs-white:         #FFFFFF;

  /* ---------- Semantic — Light mode ---------- */
  --bg-1:             var(--bs-white);
  --bg-2:             var(--bs-gray-100);
  --bg-3:             var(--bs-gray-50);
  --fg-1:             var(--bs-black);
  --fg-2:             #3A3A3A;
  --fg-3:             var(--bs-ink-500);
  --border-1:         #E6E6E6;
  --border-2:         #D4D4D4;
  --accent:           var(--bs-orange);
  --accent-2:         var(--bs-gold);
  --focus-ring:       color-mix(in oklab, var(--bs-orange) 60%, transparent);

  /* ---------- Typography — Families ---------- */
  --font-display:     'Orbitron', 'Rajdhani', system-ui, sans-serif;
  --font-display-alt: 'Rajdhani', 'Orbitron', system-ui, sans-serif;
  --font-heading:     'Montserrat', 'Noto Sans TC', system-ui, sans-serif;
  --font-body:        'Noto Sans TC', 'Montserrat', system-ui, sans-serif;
  --font-mono:        'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ---------- Typography — Scale (1.250 major third) ---------- */
  --fs-display-xl:    clamp(3.5rem, 7vw, 6rem);     /* hero 56–96 */
  --fs-display:       clamp(2.75rem, 5vw, 4.25rem); /* 44–68 */
  --fs-h1:            clamp(2rem, 3.6vw, 2.75rem);  /* 32–44 */
  --fs-h2:            clamp(1.5rem, 2.4vw, 2rem);   /* 24–32 */
  --fs-h3:            1.375rem;  /* 22 */
  --fs-h4:            1.125rem;  /* 18 */
  --fs-body-lg:       1.125rem;  /* 18 */
  --fs-body:          1rem;      /* 16 */
  --fs-body-sm:       0.875rem;  /* 14 */
  --fs-caption:       0.75rem;   /* 12 */

  --lh-tight:         1.05;
  --lh-display:       1.1;
  --lh-heading:       1.25;
  --lh-body:          1.6;

  --tracking-display: -0.01em;
  --tracking-caps:    0.12em;
  --tracking-normal:  0;

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

  /* ---------- Radii ---------- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   18px;
  --r-2xl:  24px;
  --r-pill: 999px;

  /* ---------- Shadows (dark-mode primary) ---------- */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:    0 6px 16px rgba(0,0,0,0.35);
  --shadow-lg:    0 18px 40px rgba(0,0,0,0.45);
  --shadow-glow:  0 0 32px rgba(236, 90, 44, 0.35);
  --shadow-gold:  0 0 28px rgba(243, 200, 89, 0.28);

  /* ---------- Motion ---------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     320ms;
}

/* ---------- Dark mode override (the brand default) ---------- */
[data-theme="dark"], .theme-dark {
  --bg-1:     var(--bs-space-dark);
  --bg-2:     var(--bs-ink-900);
  --bg-3:     var(--bs-ink-800);
  --fg-1:     var(--bs-white);
  --fg-2:     var(--bs-ink-300);
  --fg-3:     #8A8A8A;
  --border-1: #2A2636;
  --border-2: #3A3544;
}

/* ============================================================
   Semantic element styles
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  font-weight: 700;
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  line-height: 1.3;
  font-weight: 700;
}
h4, .h4 {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  line-height: 1.35;
  font-weight: 600;
}

.display-hero {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--bs-orange);
}

p { margin: 0 0 1em; color: var(--fg-2); }
small, .caption { font-size: var(--fs-caption); color: var(--fg-3); }

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--bg-3);
  color: var(--bs-gold);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

a {
  color: var(--bs-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--bs-orange-hover); }

hr {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: var(--sp-8) 0;
}

/* ---------- Focus ring ---------- */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}