/* =============================================================
   Casper77 Design System — Tokens, Type, Themes
   3 themes share spacing/radius/shadow/type vars; only color +
   accent shifts. Toggle via [data-theme="atlas|workshop|atelier"]
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500;8..60,600;8..60,700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Serif+TC:wght@300;400;500;600;700&family=Noto+Sans+TC:wght@300;400;500;700&display=swap");

/* ---------- ROOT (defaults to Atlas) ---------- */
:root,
[data-theme="atlas"] {
  /* === Atlas — Navy / Gold / Bone === */
  --bg:           oklch(98% 0.012 80);    /* Bone */
  --bg-elev:     #ffffff;
  --bg-deep:     oklch(22% 0.06 256);     /* Navy deep */
  --fg:          oklch(18% 0.04 256);     /* Ink */
  --fg-2:        oklch(40% 0.03 256);     /* Slate */
  --fg-3:        oklch(58% 0.02 256);     /* Mist */
  --hairline:    oklch(89% 0.012 80);     /* paper grain */
  --accent:      oklch(35% 0.09 264);     /* Atlas Navy */
  --accent-on:   #ffffff;
  --gold:        oklch(72% 0.105 82);     /* Atlas Gold */
  --gold-soft:   oklch(86% 0.06 82);
  --success:     oklch(58% 0.13 152);
  --warning:     oklch(68% 0.14 70);
  --danger:      oklch(56% 0.18 25);
  --info:        oklch(60% 0.12 250);

  --shadow-1: 0 1px 2px rgb(10 31 68 / 0.06), 0 1px 0 rgb(10 31 68 / 0.04);
  --shadow-2: 0 1px 2px rgb(10 31 68 / 0.06), 0 8px 24px rgb(10 31 68 / 0.06);
  --shadow-3: 0 4px 12px rgb(10 31 68 / 0.08), 0 24px 48px rgb(10 31 68 / 0.08);
  --shadow-press: inset 0 1px 2px rgb(10 31 68 / 0.12);

  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 6px;
  --radius-3: 12px;
  --radius-4: 24px;
  --radius-pill: 999px;

  /* spacing — 4px grid, 8 visible steps */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* type families */
  --font-display:  "Source Serif 4", "Noto Serif TC", Georgia, serif;
  --font-sans:     "IBM Plex Sans", "Noto Sans TC", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif-cn: "Noto Serif TC", "Source Serif 4", Georgia, serif;
  --font-sans-cn:  "Noto Sans TC", "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:     "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* type scale (clamp where helpful) */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  44px;
  --fs-4xl:  64px;
  --fs-5xl:  96px;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  /* motion */
  --ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:    120ms;
  --dur:         240ms;
  --dur-slow:    480ms;

  /* layout */
  --container:        1280px;
  --container-narrow: 880px;
  --container-wide:   1440px;
}

/* ---------- Workshop — Carbon / Phosphor / Sky ---------- */
[data-theme="workshop"] {
  --bg:        #0E0E10;
  --bg-elev:   #14141A;
  --bg-deep:   #08080A;
  --fg:        oklch(96% 0.005 240);
  --fg-2:      oklch(72% 0.012 240);
  --fg-3:      oklch(52% 0.012 240);
  --hairline:  #2A2A33;
  --accent:    oklch(86% 0.21 152);   /* phosphor #39FF88 */
  --accent-on: #06140C;
  --gold:      oklch(80% 0.13 230);   /* sky blue secondary */
  --gold-soft: oklch(40% 0.08 230);
  --success:   oklch(82% 0.20 152);
  --warning:   oklch(80% 0.16 70);
  --danger:    oklch(68% 0.20 22);
  --info:      oklch(78% 0.14 230);

  --shadow-1: 0 0 0 1px #2A2A33 inset;
  --shadow-2: 0 0 0 1px #2A2A33 inset, 0 0 24px rgb(57 255 136 / 0.08);
  --shadow-3: 0 0 0 1px oklch(86% 0.21 152 / 0.4), 0 0 48px rgb(57 255 136 / 0.18);
  --shadow-press: inset 0 1px 0 rgb(255 255 255 / 0.04);

  --radius-1: 0;
  --radius-2: 0;
  --radius-3: 2px;
  --radius-4: 4px;
}

/* ---------- Atelier — Bone / Forest / Ember ---------- */
[data-theme="atelier"] {
  --bg:        oklch(96% 0.018 84);
  --bg-elev:   #fffdf7;
  --bg-deep:   oklch(28% 0.045 150);
  --fg:        oklch(20% 0.03 150);
  --fg-2:      oklch(38% 0.02 150);
  --fg-3:      oklch(56% 0.018 150);
  --hairline:  oklch(82% 0.025 84);
  --accent:    oklch(36% 0.07 150);   /* forest */
  --accent-on: #ffffff;
  --gold:      oklch(68% 0.16 50);    /* ember */
  --gold-soft: oklch(86% 0.08 50);
  --success:   oklch(56% 0.13 150);
  --warning:   oklch(72% 0.14 70);
  --danger:    oklch(56% 0.16 25);
  --info:      oklch(50% 0.10 220);

  --shadow-1: 2px 2px 0 var(--fg);
  --shadow-2: 4px 4px 0 var(--fg);
  --shadow-3: 6px 6px 0 var(--fg);
  --shadow-press: 1px 1px 0 var(--fg);

  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 16px;
}

/* ============================================================= */
/* Semantic typography classes                                    */
/* ============================================================= */

.h-display {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--fg);
}
.h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, var(--fs-3xl));
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  font-weight: 500;
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  font-weight: 500;
}
.h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: 600;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.lede {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--fg-2);
  font-weight: 400;
}
.p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg);
}
.small {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--fg-2);
}
.caption {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--fg-3);
}
.code, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.num, .tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.quote {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--fg);
  border-left: 2px solid var(--gold);
  padding-left: var(--space-lg);
}

/* CJK helper — apply to mixed CN/EN runs */
.cn { font-family: var(--font-serif-cn); }
.cn-sans { font-family: var(--font-sans-cn); }

/* ============================================================= */
/* Base + reset                                                   */
/* ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration-color: var(--gold); text-underline-offset: 3px; }
img, svg { display: block; max-width: 100%; }
hr { border: none; border-top: 1px solid var(--hairline); margin: var(--space-xl) 0; }

/* CJK auto-spacing helper between latin & ideograph runs */
:where(p, li, h1, h2, h3, h4, .body, .lede) { text-wrap: pretty; word-break: keep-all; }