/* ============================================================
   教育部資優央團 (NGEAG) — Design Tokens
   Source: GenSekiGothic (源石黑體) + Official Brand Palette
   Updated: 2026-04 with official brand colors
   ============================================================ */

/* --- Font Face --- */
@font-face {
  font-family: "GenSekiGothic";
  src: url("../fonts/GenSekiGothic-R.ttc") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GenSekiGothic";
  src: url("../fonts/GenSekiGothic-B.ttc") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GenSekiGothic";
  src: url("../fonts/GenSekiGothic-H.ttc") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Font Families ---- */
  --font-primary: "GenSekiGothic", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  /* ---- Font Weights ---- */
  --weight-regular: 400;
  --weight-bold: 700;
  --weight-heavy: 900;

  /* ================================================================
     OFFICIAL BRAND PALETTE
     Source: 教育部資優央團 brand guidelines
     ================================================================ */

  /* Brand Blue — #529DD6 */
  --blue-50:   #EBF4FC;
  --blue-100:  #C7E1F5;
  --blue-200:  #9FCAED;
  --blue-300:  #74B2E3;
  --blue-400:  #529DD6;   /* ★ BRAND BLUE */
  --blue-500:  #3D84BE;
  --blue-600:  #2D6BA0;
  --blue-700:  #1F517E;
  --blue-800:  #133860;
  --blue-900:  #0A2240;

  /* Brand Gold — #EFBA38 (logo fill color) */
  --gold-50:   #FDF8E7;
  --gold-100:  #FAEDC0;
  --gold-200:  #F6DC8A;
  --gold-300:  #F3CB5C;
  --gold-400:  #EFBA38;   /* ★ BRAND GOLD */
  --gold-500:  #D4A020;
  --gold-600:  #B08216;
  --gold-700:  #8A640F;
  --gold-800:  #644808;
  --gold-900:  #3E2D04;

  /* Brand Salmon — #F19584 */
  --salmon-50:  #FEF2F0;
  --salmon-100: #FBDBD7;
  --salmon-200: #F7BDB6;
  --salmon-300: #F4A898;
  --salmon-400: #F19584;   /* ★ BRAND SALMON */
  --salmon-500: #E07060;
  --salmon-600: #C85044;
  --salmon-700: #A0352C;
  --salmon-800: #7A1E18;
  --salmon-900: #500E09;

  /* Brand Teal — #7BC2AF */
  --teal-50:   #EDF7F4;
  --teal-100:  #CEEAE2;
  --teal-200:  #A8D8CB;
  --teal-300:  #7BC2AF;   /* ★ BRAND TEAL */
  --teal-400:  #5DAE99;
  --teal-500:  #429681;
  --teal-600:  #2D7C69;
  --teal-700:  #1E6052;
  --teal-800:  #12453B;
  --teal-900:  #092B25;

  /* Brand Red — #AE2024 */
  --red-50:   #FAEAEA;
  --red-100:  #F2BABB;
  --red-200:  #E88485;
  --red-300:  #D85052;
  --red-400:  #C4282C;
  --red-500:  #AE2024;   /* ★ BRAND RED */
  --red-600:  #921A1E;
  --red-700:  #741417;
  --red-800:  #550E10;
  --red-900:  #35080A;

  /* Brand Charcoal — #3E3A39 */
  --charcoal-50:  #F2F1F1;
  --charcoal-100: #DDDCDB;
  --charcoal-200: #C0BEBE;
  --charcoal-300: #9D9B9A;
  --charcoal-400: #7B7877;
  --charcoal-500: #5C5957;
  --charcoal-600: #3E3A39;  /* ★ BRAND CHARCOAL / primary text */
  --charcoal-700: #2E2B2A;
  --charcoal-800: #1E1C1B;
  --charcoal-900: #0F0E0E;

  /* Neutral (warm gray derived from charcoal) */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F5F4F3;
  --neutral-100: #ECEAE8;
  --neutral-200: #D8D5D2;
  --neutral-300: #B8B5B2;
  --neutral-400: #989490;
  --neutral-500: #75706C;
  --neutral-600: #5C5957;
  --neutral-700: #3E3A39;
  --neutral-800: #2E2B2A;
  --neutral-900: #1A1817;

  /* ---- Semantic Colors ---- */
  --color-bg:            #F5F4F3;
  --color-bg-card:       #FFFFFF;
  --color-bg-panel:      #EBF4FC;
  --color-bg-dark:       #3E3A39;
  --color-fg-primary:    #3E3A39;
  --color-fg-secondary:  #75706C;
  --color-fg-tertiary:   #B8B5B2;
  --color-fg-inverse:    #FFFFFF;
  --color-fg-link:       #529DD6;
  --color-fg-link-hover: #3D84BE;
  --color-brand:         #529DD6;
  --color-brand-dark:    #3D84BE;
  --color-gold:          #EFBA38;
  --color-salmon:        #F19584;
  --color-teal:          #7BC2AF;
  --color-red:           #AE2024;
  --color-success:       #7BC2AF;
  --color-warning:       #EFBA38;
  --color-error:         #AE2024;
  --color-info:          #529DD6;
  --color-border:        #ECEAE8;
  --color-border-focus:  #529DD6;
  --color-divider:       #F2F1F1;

  /* ---- Spacing ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Border Radius ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* ---- Shadows / Elevation ---- */
  --shadow-0: none;
  --shadow-1: 0 2px 8px rgba(62, 58, 57, 0.08);
  --shadow-2: 0 6px 20px rgba(62, 58, 57, 0.13);
  --shadow-3: 0 16px 48px rgba(62, 58, 57, 0.18);

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 350ms ease-out;

  /* ---- Typography Scale ---- */
  --text-xs:   13px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;

  /* ---- Line Heights ---- */
  --leading-tight:  1.3;
  --leading-snug:   1.5;
  --leading-normal: 1.8;

  /* ---- Letter Spacing ---- */
  --tracking-tight:  0;
  --tracking-normal: 0.02em;
  --tracking-wide:   0.05em;
  --tracking-label:  0.12em;
}

/* ============================================================
   Semantic Type Styles
   ============================================================ */
body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--color-fg-primary);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  background: var(--color-bg);
}
h1, .h1 { font-size: var(--text-4xl); font-weight: var(--weight-heavy); line-height: var(--leading-tight); letter-spacing: var(--tracking-wide); }
h2, .h2 { font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-wide); }
h3, .h3 { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); }
h4, .h4 { font-size: var(--text-xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
h5, .h5 { font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
p, .body { font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); letter-spacing: var(--tracking-normal); }
.body-lg { font-size: var(--text-lg); line-height: var(--leading-normal); }
.caption { font-size: var(--text-xs); color: var(--color-fg-secondary); line-height: var(--leading-snug); }
.label { font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.display { font-size: var(--text-5xl); font-weight: var(--weight-heavy); line-height: 1.1; letter-spacing: var(--tracking-wide); }
a { color: var(--color-fg-link); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-fg-link-hover); text-decoration: underline; }

/* ============================================================
   Base Component Styles
   ============================================================ */
.card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: var(--space-6);
  transition: box-shadow var(--transition-base);
}
.card:hover { box-shadow: var(--shadow-2); }

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 10px var(--space-6); border-radius: var(--radius-sm);
  font-family: var(--font-primary); font-size: var(--text-sm);
  font-weight: var(--weight-bold); letter-spacing: var(--tracking-normal);
  border: none; cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.btn-primary { background: var(--color-brand); color: #fff; }
.btn-primary:hover { background: var(--color-brand-dark); }
.btn-gold { background: var(--color-gold); color: var(--charcoal-700); }
.btn-gold:hover { background: var(--gold-500); }
.btn-red { background: var(--color-red); color: #fff; }
.btn-red:hover { background: var(--red-600); }
.btn-outline { background: transparent; color: var(--color-brand); border: 2px solid var(--color-brand); }
.btn-outline:hover { background: var(--blue-50); }
.btn-ghost { background: transparent; color: var(--color-fg-secondary); }
.btn-ghost:hover { background: var(--neutral-50); }

.badge {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--weight-bold);
}
.badge-blue    { background: var(--blue-50);    color: var(--blue-600); }
.badge-gold    { background: var(--gold-50);    color: var(--gold-700); }
.badge-salmon  { background: var(--salmon-50);  color: var(--salmon-700); }
.badge-teal    { background: var(--teal-50);    color: var(--teal-600); }
.badge-red     { background: var(--red-50);     color: var(--red-600); }
.badge-neutral { background: var(--neutral-50); color: var(--neutral-600); }

.input {
  width: 100%; padding: 10px var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: var(--font-primary); font-size: var(--text-base);
  color: var(--color-fg-primary); background: #fff; outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px rgba(82, 157, 214, 0.18);
}