/* ============================================================
   Ganyuan Junior High School — Design Tokens
   主色：柑色 (Tangerine Orange) #DD561C
   其餘：黑、白、深灰、淺灰
   ============================================================ */

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

:root {
  /* ---- Brand Color ---- */
  --gy-orange:       #DD561C;   /* 主色 · 柑色 */
  --gy-orange-600:   #C24812;   /* press / darker */
  --gy-orange-700:   #A03A0B;   /* deep */
  --gy-orange-400:   #E97540;   /* hover lift */
  --gy-orange-200:   #F5C4A8;   /* soft tint */
  --gy-orange-50:    #FDF2EB;   /* tint background */

  /* ---- Neutrals (黑/白/深灰/淺灰 only) ---- */
  --gy-black:        #0B0B0B;   /* near-black, uniform feel */
  --gy-ink:          #1A1A1A;   /* primary text on light */
  --gy-graphite:     #2E2E2E;   /* dark surfaces */
  --gy-gray-800:     #3D3D3D;
  --gy-gray-700:     #575757;   /* 深灰 */
  --gy-gray-500:     #8A8A8A;   /* mid */
  --gy-gray-400:     #B5B5B5;
  --gy-gray-300:     #D6D6D6;   /* 淺灰 */
  --gy-gray-200:     #E8E8E8;   /* hairline */
  --gy-gray-100:     #F3F3F3;   /* surface tint */
  --gy-white:        #FFFFFF;

  /* ---- Semantic (light mode) ---- */
  --bg:              var(--gy-white);
  --bg-alt:          var(--gy-gray-100);
  --surface:         var(--gy-white);
  --surface-inverse: var(--gy-black);
  --fg1:             var(--gy-ink);      /* primary text */
  --fg2:             var(--gy-gray-700); /* secondary */
  --fg3:             var(--gy-gray-500); /* muted / captions */
  --fg-on-orange:    var(--gy-white);
  --fg-on-black:     var(--gy-white);
  --border:          var(--gy-gray-200);
  --border-strong:   var(--gy-gray-400);
  --accent:          var(--gy-orange);
  --accent-hover:    var(--gy-orange-400);
  --accent-press:    var(--gy-orange-600);

  /* ---- Typography ---- */
  --font-display:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, 'Noto Sans TC', monospace;  /* 英文大標 · 等寬等粗 */
  --font-script:     'Kaushan Script', 'Noto Serif TC', cursive;       /* Ganyuan 手寫草書 */
  --font-sans:       'Noto Sans TC', system-ui, -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-serif:      'Noto Serif TC', 'Songti TC', Georgia, serif;
  --font-mono:       ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* ---- Spacing (4-px 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-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- Shadows (soft, school-stationery feel) ---- */
  --shadow-xs: 0 1px 0 rgba(11,11,11,.06);
  --shadow-sm: 0 1px 2px rgba(11,11,11,.08), 0 1px 1px rgba(11,11,11,.04);
  --shadow-md: 0 4px 14px rgba(11,11,11,.10);
  --shadow-lg: 0 12px 32px rgba(11,11,11,.16);
  --shadow-orange: 0 8px 24px rgba(221,86,28,.28);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.5,0,.2,1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 420ms;

  /* ---- Layout ---- */
  --container: 1200px;
  --gutter: 24px;
  --nav-h: 72px;
}

/* ================= Base elements ================= */

html, body {
  font-family: var(--font-sans);
  color: var(--fg1);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display · 運動風英文大標 ---- */
.display-1, h1.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 88px);
  line-height: .95;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--fg1);
}
.display-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

/* ---- Script · Ganyuan wordmark feel ---- */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--gy-orange);
  line-height: 1;
}

/* ---- Headings · 繁體中文主要為 Noto Sans TC ---- */
h1 {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 48px;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 var(--sp-4);
}
h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  margin: 0 0 var(--sp-3);
}
h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 var(--sp-2);
}
h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.35;
  margin: 0 0 var(--sp-2);
}

p { margin: 0 0 var(--sp-4); color: var(--fg1); }

.lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--fg2);
}

small, .caption {
  font-size: 13px;
  color: var(--fg3);
  letter-spacing: .01em;
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--gy-orange);
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: .92em;
  background: var(--gy-gray-100);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

a {
  color: var(--gy-orange);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--gy-orange-600); text-decoration: underline; text-underline-offset: 3px; }

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

/* ================= Utility bits ================= */

.stripe-bg {
  background-image: repeating-linear-gradient(
    135deg,
    var(--gy-orange) 0 14px,
    #C24812 14px 28px
  );
}

.paper-bg {
  background-color: var(--gy-gray-100);
  background-image:
    radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px);
  background-size: 14px 14px;
}

.orange-bar {
  height: 6px;
  background: var(--gy-orange);
  border-radius: var(--r-pill);
}

.orange-fade {
  background: linear-gradient(180deg, var(--gy-orange) 0%, #FFFFFF 100%);
}
.orange-fade-radial {
  background: radial-gradient(120% 80% at 50% 0%, var(--gy-orange) 0%, #FFFFFF 70%);
}