/* ===== fonts (self-hosted) ===== */
/* ============================================================
   goomuse — Webfonts (self-hosted, no third-party CDN)

   PRODUCTION CONSTRAINT: 大陆用户为主，禁 Google Fonts / 一切 CDN.
   All Latin/mono fonts are self-hosted woff2 under /assets/fonts/.
   CJK (简体中文) uses the SYSTEM STACK only — no Noto Sans SC webfont
   (体积不可接受). See guidelines/type-loading.html for the full rationale,
   the 900→800 weight downgrade rule, and the Windows 雅黑 note.

   Drop these files in /assets/fonts/  (variable woff2, one file each):
     • Manrope-Variable.woff2          → covers 400–800
     • JetBrainsMono-Variable.woff2    → covers 400–700
   local() is tried first so users who already have the font skip the
   download entirely.
   ============================================================ */

/* ---- Manrope (Latin UI/display) · variable 400–800 ---- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;            /* variable range, single woff2 */
  font-display: swap;
  src: local("Manrope"),
       url("/vendor/goomuse-ds/fonts/Manrope-Variable.woff2") format("woff2");
}

/* ---- JetBrains Mono (timers, scores, code) · variable 400–700 ---- */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: local("JetBrains Mono"),
       url("/vendor/goomuse-ds/fonts/JetBrainsMono-Variable.woff2") format("woff2");
}

/* CJK is NOT loaded as a webfont. The system stack in typography.css
   (--font-sans / --font-display) resolves 简体中文 to PingFang SC on Apple
   and Microsoft YaHei on Windows — both already installed, zero bytes. */


/* ===== tokens/colors.css ===== */
/* ============================================================
   goomuse — Color tokens
   Two greens carry the brand:
   • BRAND JADE  — vivid, Apple-polished. Marketing site, dashboard, accents.
   • EXAM GREEN  — muted, institutional, flatter. ETS-style mock-exam UI only.
   Neutrals follow Apple's exact grayscale for a clean, premium base.
   ============================================================ */
:root {
  /* ---- Brand jade (primary accent) ---- */
  --brand-50:  #edfaf3;
  --brand-100: #d2f2e1;
  --brand-200: #a6e6c5;
  --brand-300: #6fd2a4;
  --brand-400: #2fb87d;
  --brand-500: #0f9b63;  /* primary */
  --brand-600: #0b8455;  /* hover */
  --brand-700: #096b46;  /* pressed */
  --brand-800: #075236;
  --brand-900: #06402b;

  /* ---- ETS-style exam green (institutional) ---- */
  --exam-50:  #eef6f2;
  --exam-100: #d3e8df;
  --exam-300: #5fa389;
  --exam-400: #13916b;
  --exam-500: #0e7d5d;  /* exam primary button */
  --exam-600: #0c6e52;  /* exam button hover */
  --exam-700: #0a5c46;  /* exam top bar */
  --exam-800: #07442f;
  --exam-bg:  #eceee9;  /* warm gray exam page background */
  --exam-panel: #f6f7f4;/* exam content panel */

  /* ---- Neutrals (Apple grayscale) ---- */
  --ink-900: #1d1d1f;  /* primary text / near-black */
  --ink-700: #424245;
  --ink-500: #6e6e73;  /* secondary text */
  --ink-400: #86868b;  /* tertiary text */
  --ink-300: #d2d2d7;  /* hairline border */
  --ink-200: #e8e8ed;
  --ink-100: #f5f5f7;  /* section gray */
  --ink-50:  #fbfbfd;
  --white:   #ffffff;
  --black:   #000000;

  /* ---- Semantic status ---- */
  --success: #0f9b63;
  --warning: #c77400;
  --warning-bg: #fdf3e2;
  --error:   #d70015;
  --error-bg: #fdecec;
  --info:    #0071e3;  /* Apple blue — links, info, teacher notes */
  --info-bg: #eaf4ff;

  /* ---- Teacher grading marks ---- */
  --grade-error:   #d70015;  /* grammar / spelling error — red */
  --grade-suggest: #c77400;  /* word-choice suggestion — amber */
  --grade-praise:  #0f9b63;  /* well done — green */
  --grade-note:    #0071e3;  /* teacher comment — blue */

  /* ============ Semantic aliases ============ */
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-tertiary:  var(--ink-400);
  --text-on-brand:  var(--white);
  --text-link:      var(--brand-600);

  --surface-page:   var(--white);
  --surface-subtle: var(--ink-100);
  --surface-card:   var(--white);
  --surface-inset:  var(--ink-50);
  --surface-dark:   var(--ink-900);

  --border-hairline: var(--ink-300);
  --border-subtle:   var(--ink-200);
  --border-strong:   var(--ink-400);

  --accent:        var(--brand-500);
  --accent-hover:  var(--brand-600);
  --accent-press:  var(--brand-700);
  --accent-soft:   var(--brand-50);

  --focus-ring: color-mix(in srgb, var(--brand-500) 45%, transparent);
}


/* ===== tokens/typography.css ===== */
/* ============================================================
   goomuse — Typography tokens
   Latin: Manrope (self-hosted woff2). 简体中文: SYSTEM stack only —
   PingFang SC (Apple) → Microsoft YaHei (Windows). No CJK webfont.
   Scale is large and airy in the Apple tradition.
   ============================================================ */
:root {
  /* ---- Families ----
     Latin glyphs resolve to Manrope; CJK glyphs fall through to the
     system 黑体 (PingFang SC / Microsoft YaHei) per-character. */
  --font-sans: "Manrope", "PingFang SC", "Microsoft YaHei", "PingFang SC",
               -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Manrope", "PingFang SC", "Microsoft YaHei",
               -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Weights ----
     CJK system fonts top out at 700 (PingFang/YaHei have no 800/900).
     So --weight-extra (800) renders on Latin only; 简体中文 display text
     caps at 700. NEVER author 900 — downgrade to 800 Latin / 700 CJK.
     See guidelines/type-loading.html. */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;   /* CJK display ceiling */
  --weight-extra:    800;   /* Latin display only */

  /* ---- Type scale (px) ---- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   21px;
  --text-2xl:  24px;
  --text-3xl:  28px;
  --text-4xl:  32px;
  --text-5xl:  40px;
  --text-6xl:  48px;
  --text-7xl:  56px;
  --text-8xl:  64px;
  --text-9xl:  80px;
  --text-mega: 96px;   /* hero headlines */

  /* ---- Line heights ---- */
  --leading-tight:   1.08;  /* display headlines */
  --leading-snug:    1.2;
  --leading-normal:  1.4;
  --leading-relaxed: 1.6;   /* long-form CJK reading */

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.022em;  /* big Latin headlines */
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;    /* eyebrows / labels */

  /* ---- Fluid display sizes (responsive headlines) ----
     Scale with the viewport so 48–96px desktop titles stay readable at
     375px without per-page media queries. Pair with --weight-bold on CJK
     (700 ceiling) / --weight-extra on Latin (800). */
  --display-hero: clamp(36px, 8.5vw, 96px);  /* @kind font */
  --display-xl:   clamp(30px, 6vw, 48px);    /* @kind font */
  --display-lg:   clamp(24px, 4.5vw, 32px);  /* @kind font */
}


/* ===== tokens/spacing.css ===== */
/* ============================================================
   goomuse — Spacing tokens (4px base grid)
   ============================================================ */
:root {
  --space-0:  0;
  --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;
  --space-40: 160px;

  /* ---- Layout ---- */
  --container-max: 1120px;   /* marketing content width */
  --container-wide: 1280px;

  /* Fluid page gutter: 16px on phones → 22px on desktop (Apple-style) */
  --gutter: clamp(16px, 5vw, 22px);         /* @kind spacing */

  /* Section vertical rhythm — compresses on small screens */
  --section-y: clamp(56px, 9vw, 96px);      /* @kind spacing */
  --section-y-lg: clamp(64px, 12vw, 120px); /* @kind spacing */

  /* ---- Breakpoints (REFERENCE — CSS vars can't be used in @media;
     author the literal px below. Mobile-first: base = phone, min-width up) ----
       sm  480px   large phone
       md  768px   ← primary phone→tablet boundary (single column ≤768)
       lg 1024px   tablet landscape / small laptop
       xl 1280px   desktop
     Touch-target floor: 44px. */
  --tap-min: 44px;          /* minimum hit target on touch */
  --tabbar-h: 56px;         /* mobile bottom tab bar height */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}


/* ===== tokens/effects.css ===== */
/* ============================================================
   goomuse — Effects: radius, shadow, blur, motion
   Marketing/dashboard use soft Apple shadows + generous radii.
   Exam UI uses small radii + flat surfaces (intentionally utilitarian).
   ============================================================ */
:root {
  /* ---- Corner radius ---- */
  --radius-xs:  4px;    /* exam controls */
  --radius-sm:  8px;
  --radius-md:  12px;   /* default buttons, inputs */
  --radius-lg:  18px;   /* cards */
  --radius-xl:  24px;   /* large cards / panels */
  --radius-2xl: 32px;   /* hero media */
  --radius-pill: 980px; /* Apple pill button / chips */

  /* ---- Shadows (soft, diffuse) ---- */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 18px rgba(0,0,0,0.08);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.12);
  --shadow-xl:   0 24px 64px rgba(0,0,0,0.16);
  --shadow-ring: 0 0 0 4px var(--focus-ring);

  /* ---- Glass / blur (Apple translucent nav) ---- */
  --blur-nav: saturate(180%) blur(20px); /* @kind other */
  --glass-bg: rgba(255,255,255,0.72);
  --glass-border: rgba(0,0,0,0.06);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
}