/* ============================================================
   CADMira · Tokens · v1.0
   Type + color foundations. Import into any artifact, deck, or
   UI kit to get the full CADMira look out of the box.
   ============================================================ */

/* ---- WEB FONTS ----
   Geist (Latin display + UI) loaded from Google Fonts.
   Pretendard (Korean + Latin body fallback) loaded locally.
   JetBrains Mono (code + micro labels) — OFL, from Google Fonts.
   (Geist Mono kept locally as "Geist Mono Local" fallback only.)
   Montserrat is included only as a hard fallback / alt-display.
   The original CADMira system uses Geist + Noto Sans KR; we
   substitute Pretendard for Korean — it is a more refined modern
   Korean sans and pairs beautifully with Geist. See README.md.
*/

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Nanum+Gothic+Coding:wght@400;700&display=swap");

@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Pretendard-Light.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Pretendard-Regular.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Pretendard-Medium.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Pretendard-SemiBold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Pretendard-Bold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Pretendard-ExtraBold.woff") format("woff");
}
@font-face {
  font-family: "Geist Mono Local";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: url("fonts/GeistMono-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Geist Mono Local";
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: url("fonts/GeistMono-Italic-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face {
  font-family: "Montserrat Alt";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Montserrat-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat Alt";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Montserrat-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat Alt";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Montserrat-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat Alt";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Montserrat-Bold.ttf") format("truetype");
}

/* ============================================================
   :root — design tokens
   ============================================================ */
:root {
  /* --- INK SCALE (foreground / surface) --- */
  --ink:       #0A0E1C; /* primary ink — body text, buttons, marks       */
  --graphite:  #141931; /* hover state for ink; nested dark surface       */
  --steel:     #2A3046; /* secondary body text                            */
  --slate:     #5C6478; /* tertiary text, meta labels, captions           */
  --silver:    #9CA3B4; /* disabled, placeholders, on-dark muted body     */
  --mist:      #DDE3EE; /* input borders, disabled fills                  */
  --fog:       #F1F4F9; /* chip backgrounds, hover surfaces               */
  --paper:     #FAFBFC; /* page-paper section, raised surfaces            */
  --white:     #FFFFFF; /* base                                           */

  /* --- BRAND SPARK (electric blue — the only chromatic in heavy use) --- */
  --accent:    #2E80FF; /* CTA, focus, brand spark, link                  */
  --accent-d:  #1B68DC; /* accent hover/pressed                           */
  --accent-l:  #E8F1FF; /* accent tint background                         */
  --glow:      #6FB6FF; /* soft accent tint, syntax keywords              */

  /* --- SEMANTIC SIGNALS (rare, intentional) --- */
  --lumen:     #00C2D6; /* secondary cyan — chart, secondary AI accent    */
  --spark:     #00D9A6; /* success                                         */
  --spark-d:   #00946F;
  --spark-l:   #E0F8F0;
  --signal:    #FF8A3D; /* warning                                         */
  --signal-d:  #B0531B;
  --signal-l:  #FFEDD9;
  --critical:  #C0432D; /* error / destructive                             */
  --critical-d:#8B2D1B;
  --critical-l:#FAE3DD;

  /* --- HAIRLINES (the heart of the system — everything is divided
         with 1px ink at low alpha; never a colored border) --- */
  --hair:        rgba(10, 14, 28, 0.08);  /* default divider                */
  --hair-strong: rgba(10, 14, 28, 0.16);  /* card outline                   */
  --hair-light:  rgba(255, 255, 255, 0.10); /* divider on dark surfaces     */
  --hair-light-strong: rgba(255, 255, 255, 0.16);

  /* --- TYPE FAMILIES --- */
  --sans: "Geist", "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* @kind font */
  --sans-kr: "Pretendard", "Geist", "Noto Sans KR", sans-serif; /* @kind font */
  --mono: "JetBrains Mono", "Nanum Gothic Coding", "Apple SD Gothic Neo", "Pretendard", "Geist Mono Local", ui-monospace, monospace; /* @kind font */
  --mono-kr: "Nanum Gothic Coding", "JetBrains Mono", "Apple SD Gothic Neo", monospace; /* @kind font */
  --display-alt: "Montserrat Alt", "Geist", sans-serif; /* @kind font */

  /* --- SPACING SCALE (4px base) --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* --- RADIUS — the system is mostly square. Use these only for
         small interactive surfaces (chips, buttons, inputs, soft cards).
         Anchored cards and section panels stay radius 0. --- */
  --r-0: 0px;
  --r-sm: 4px;             /* chips, buttons, inputs, status pills        */
  --r-md: 6px;             /* soft cards, panels, dropdowns               */
  --r-lg: 10px;            /* modals, large floating surfaces             */
  --r-pill: 999px;         /* switches, toggles, status dots only         */

  /* --- BORDER WIDTHS --- */
  --bw-hair: 1px;           /* everything                                  */
  --bw-emph: 1.5px;         /* anchor squares, brand mark stroke           */
  --bw-rule: 2px;           /* accent rule under AI cards, focus ring      */

  /* --- ELEVATION (used sparingly; the system prefers borders to shadow) */
  --shadow-card: 0 1px 2px rgba(10, 14, 28, 0.04);
  --shadow-pop:  0 32px 80px -40px rgba(10, 14, 28, 0.20);
  --shadow-deep: 0 40px 80px -40px rgba(10, 14, 28, 0.28);

  /* --- MOTION --- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* @kind other */
  --dur-fast: 0.15s; /* @kind other */
  --dur-mid:  0.20s; /* @kind other */
  --dur-slow: 0.32s; /* @kind other */

  /* --- LAYOUT --- */
  --page-max: 1280px;
  --page-pad: 64px;
  --grid-cell: 64px;         /* engineering grid background tile           */
}

/* ============================================================
   BASE — html / body
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "tnum", "kern";
  word-break: keep-all;          /* Korean: break by word, not by char     */
  overflow-wrap: anywhere;
  line-break: strict;
  font-optical-sizing: auto;
}
::selection { background: var(--ink); color: var(--white); }

html[lang="en"] body { word-break: normal; line-break: auto; }
html[lang="ko"] body, [data-lang="ko"] { line-height: 1.7; letter-spacing: -0.005em; }

/* ============================================================
   DARK THEME — opt-in via [data-theme="dark"] on <html>.
   Use semantic vars (--bg / --fg / --surface / --divider / etc) in
   themed components so they swap automatically. The raw ink/accent
   scale stays constant; only the role mappings flip.
   ============================================================ */
:root {
  --bg:        var(--white);     /* page background                         */
  --fg:        var(--ink);       /* body text                               */
  --fg-2:      var(--steel);     /* secondary body                          */
  --fg-3:      var(--slate);     /* meta / captions                         */
  --fg-mute:   var(--silver);    /* disabled / very low-emphasis            */
  --surface:   var(--white);     /* card / panel default fill               */
  --surface-2: var(--paper);     /* section paper, raised inset             */
  --surface-3: var(--fog);       /* chips, hover                            */
  --divider:   var(--hair);      /* default 1px line                        */
  --divider-s: var(--hair-strong); /* card outline                          */
  --overlay:   rgba(10,14,28,0.40); /* modal backdrop                       */
}
[data-theme="dark"] {
  --bg:        #07091A;
  --fg:        #F4F6FB;
  --fg-2:      #C2C8D5;
  --fg-3:      #8A92A6;
  --fg-mute:   #5C6478;
  --surface:   #11142A;
  --surface-2: #0A0D1E;
  --surface-3: #1B2042;
  --divider:   rgba(255,255,255,0.08);
  --divider-s: rgba(255,255,255,0.16);
  --overlay:   rgba(0,0,0,0.60);
}
[data-theme="dark"] body { color: var(--fg); background: var(--bg); }
[data-theme="dark"] ::selection { background: var(--accent); color: var(--white); }

/* ============================================================
   SEMANTIC TYPE — use these classes, not raw sizes
   Display sizes are TUNED for English. Korean compresses ~15%
   and adjusts weight up (KR feels lighter at the same weight).
   ============================================================ */

/* Headings */
h1, .t-h1 {
  font-family: var(--sans);
  font-size: 80px;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.0;
  color: var(--ink);
}
[data-lang="ko"] h1, .t-h1-ko {
  font-size: 60px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

h2, .t-h2 {
  font-family: var(--sans);
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--ink);
}
[data-lang="ko"] h2, .t-h2-ko {
  font-size: 38px;
  line-height: 1.22;
}

h3, .t-h3 {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--ink);
}
[data-lang="ko"] h3, .t-h3-ko { font-size: 24px; line-height: 1.32; }

h4, .t-h4 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--ink);
}
[data-lang="ko"] h4, .t-h4-ko { line-height: 1.45; }

h5, .t-h5 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* Display (cover & slide hero) */
.t-display {
  font-family: var(--sans);
  font-size: 128px;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--ink);
}
[data-lang="ko"] .t-display, .t-display-ko {
  font-size: 92px;
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

/* Body */
p, .t-body {
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.62;
  color: var(--steel);
}
[data-lang="ko"] p, [data-lang="ko"] .t-body {
  font-size: 15px;
  line-height: 1.78;        /* Korean needs more leading than Latin */
  letter-spacing: 0.005em;
}

.t-lead {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.58;
  color: var(--steel);
  max-width: 640px;
}
[data-lang="ko"] .t-lead { font-size: 17px; line-height: 1.75; letter-spacing: 0.004em; }

.t-meta {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--slate);
}

/* Micro — the workhorse mono label.
   Used for every section number, every key-value, every CAD callout.
   Always UPPERCASE, always wide-tracked, always slate or accent. */
.t-micro {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--slate);
  line-height: 1.4;
}

/* ----------------------------------------------------------------
   KOREAN MONO LEGIBILITY
   JetBrains Mono has no Hangul, so Korean in mono labels falls back
   to a proportional face squeezed by wide Latin tracking + small size.
   In Korean mode, tighten tracking, drop uppercasing (no effect on
   Hangul anyway) and bump weight so small labels stay readable.
   Nanum Gothic Coding (OFL) supplies real mono Hangul glyphs.
---------------------------------------------------------------- */
[lang="ko"] .t-micro,
[data-lang="ko"] .t-micro,
[lang="ko"] .section-mark,
[data-lang="ko"] .section-mark {
  letter-spacing: 0.03em;
  font-weight: 600;
}
:lang(ko) .t-micro { letter-spacing: 0.03em; }

/* Code inline + block */
code, .t-code {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--fog);
  padding: 1px 6px;
}
pre, .t-pre {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: #CDD5E2;             /* brighter than --silver for code-on-dark contrast */
  background: var(--graphite);
  padding: 24px 28px;
  border-left: var(--bw-rule) solid var(--accent);
  overflow-x: auto;
}

/* Tabular nums for any data display */
.t-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Helpers */
em { font-style: normal; color: var(--slate); font-weight: 400; }
[data-lang="ko"] em { font-weight: 500; }
strong, b { font-weight: 500; color: var(--ink); }

/* ============================================================
   UTILITIES (low-level, opt-in)
   ============================================================ */

/* Engineering grid backdrop — apply to a positioned ancestor */
.bg-grid {
  background-image:
    linear-gradient(to right, var(--hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hair) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
}
.bg-grid--fade {
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 30%, transparent 90%);
}

/* Hairline rule */
.rule       { height: 1px; background: var(--hair);        border: 0; }
.rule--strong { height: 1px; background: var(--hair-strong); border: 0; }

/* Section mark — small dot + line + caption */
.section-mark {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  color: var(--slate);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 28px;
}
.section-mark .dot  { width: 6px; height: 6px; background: var(--ink); flex-shrink: 0; }
.section-mark .line { flex: 1; height: 1px; background: var(--hair); }

/* The CADMira "anchored card" — 4 hollow square anchors at corners.
   This is the canonical card decoration; used wherever we want to
   say "this is a measured, surveyed thing." */
.anchored {
  position: relative;
  border: 1px solid var(--hair-strong);
  background: var(--paper);
}
.anchored::before, .anchored::after,
.anchored > .ac1, .anchored > .ac2 {
  content: "";
  position: absolute;
  width: 9px; height: 9px;
  border: 1.5px solid var(--ink);
  background: var(--white);
  z-index: 2;
}
.anchored::before { top: -5px; left: -5px; }
.anchored::after  { top: -5px; right: -5px; }
.anchored > .ac1  { bottom: -5px; left: -5px; }
.anchored > .ac2  { bottom: -5px; right: -5px; }