/* ==========================================================================
   Claude Code × Designer Bootcamp — Family Design System
   --------------------------------------------------------------------------
   Inherits from lanitech master DS:
     · Font stack (DIN 2014 / Urbanist / Zen Kaku Gothic New)
     · Spacing / radius / grid
     · Component grammar
   Overrides COLOR PALETTE + LOGO LOCKUP only.

   v0.2 — Removed all terminal/code aesthetic (no Mono, no >_ sigil,
          no /  separator, no CodeCard). Replaced with editorial /
          spec-sheet vocabulary.
   ========================================================================== */

@font-face {
  font-family: 'DIN 2014';
  src: url('fonts/din-2014.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DIN 2014';
  src: url('fonts/din-2014-extrabold.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;500;600;700;800&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

:root {
  /* ---------- Claude Code palette ---------- */
  --cc-paper:        #FFFFFF;   /* Base */
  --cc-cream:        #F4F1EA;   /* Surface */
  --cc-cream-deep:   #ECE7DC;
  --cc-coral:        #CC785C;   /* Primary */
  --cc-coral-deep:   #A85A40;   /* Primary Deep */
  --cc-coral-soft:   #F3DCD0;
  --cc-ink:          #1A1A1A;   /* Terminal Black (text) */
  --cc-ink-soft:     #6B6B6B;   /* Mute Gray */
  --cc-hairline:     #E5E2DC;   /* Line */
  --cc-green:        #3C8C5C;   /* tiny accent — success state only */

  /* Semantic surfaces */
  --bg-page:         var(--cc-paper);
  --bg-surface:      var(--cc-cream);
  --bg-footer:       var(--cc-ink);
  --bg-accent:       var(--cc-coral);

  --fg-default:      var(--cc-ink);
  --fg-muted:        var(--cc-ink-soft);
  --fg-inverse:      var(--cc-paper);
  --fg-link:         var(--cc-coral-deep);

  --border-soft:     var(--cc-hairline);
  --border-strong:   var(--cc-ink);

  /* ---------- Type families (inherited from lanitech master) ---------- */
  --ff-logo:         'DIN 2014', 'Futura', 'Helvetica Neue', sans-serif;
  --ff-latin:        'Urbanist', 'Futura', 'Helvetica Neue', sans-serif;
  --ff-jp:           'Zen Kaku Gothic New', 'Yu Gothic', 'YuGothic', 'Hiragino Sans', sans-serif;
  --ff-pair:         var(--ff-latin), var(--ff-jp);
  --ff-body:         var(--ff-jp), var(--ff-latin);
  /* Legacy alias for any code that still references --ff-mono; resolves to Urbanist. */
  --ff-mono:         var(--ff-latin);
  --ff-display:      var(--ff-latin);

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semi:     600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* Type scale (Desktop) */
  --fs-hero-display:   88px;
  --fs-hero-display-sm:64px;
  --fs-section-title:  44px;
  --fs-subsection:     26px;
  --fs-body:           16px;
  --fs-caption:        13px;
  --fs-eyebrow:        13px;

  /* Tracking — master DS uses +0.08em for EN labels. */
  --tr-display:        -0.02em;
  --tr-section:        -0.01em;
  --tr-eyebrow:        0.16em;   /* EN UPPER label */
  --tr-caption:        0.02em;
  --tr-jp:             0.04em;

  /* Line-heights */
  --lh-display:        1.08;
  --lh-heading:        1.4;
  --lh-body:           1.8;
  --lh-loose:          2.2;

  /* Spacing (8-px base) */
  --sp-1:  4px;  --sp-2:  8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px; --sp-8: 40px;
  --sp-10: 48px; --sp-12: 56px; --sp-14: 64px; --sp-16: 80px;
  --sp-20: 120px;

  /* Radii (4 / 8 / 16 — master DS rule) */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md: 16px;

  /* Layout */
  --max-content: 1240px;
  --max-layout:  1440px;
  --gutter-pc:   80px;
  --gutter-sp:   20px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast:      160ms;
  --t-base:      220ms;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-default);
  background: var(--bg-page);
  font-feature-settings: "palt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; }

/* ==========================================================================
   Type presets
   ========================================================================== */

/* Eyebrow — Urbanist Bold UPPER + master-DS 0.16em tracking (no mono). */
.cc-eyebrow {
  font-family: var(--ff-latin);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--cc-ink-soft);
}
.cc-eyebrow--coral { color: var(--cc-coral); }

.cc-display {
  font-family: var(--ff-pair);
  font-weight: var(--fw-bold);
  font-size: var(--fs-hero-display);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  color: var(--fg-default);
}

.cc-section-title {
  font-family: var(--ff-pair);
  font-weight: var(--fw-bold);
  font-size: var(--fs-section-title);
  letter-spacing: var(--tr-section);
  line-height: 1.2;
}

.cc-subsection {
  font-family: var(--ff-pair);
  font-weight: var(--fw-semi);
  font-size: var(--fs-subsection);
  line-height: 1.4;
}

.cc-body {
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.cc-caption {
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-caption);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

/* ==========================================================================
   Coral keyword underline (kept — not a terminal idiom)
   ========================================================================== */
.cc-keyword {
  background-image: linear-gradient(transparent 62%, var(--cc-coral) 62%, var(--cc-coral) 92%, transparent 92%);
  padding: 0 2px;
}

/* Hairline divider */
.cc-rule { border: 0; height: 1px; background: var(--cc-hairline); margin: 0; }

/* Coral vertical bar accent (▍) — kept; pure typographic mark, not terminal-specific */
.cc-bar {
  display: inline-block;
  width: 3px; height: 1em;
  background: var(--cc-coral);
  vertical-align: -0.15em;
  margin-right: 10px;
}

/* Section number block — large numeral above hairline */
.cc-section-no {
  font-family: var(--ff-latin);
  font-weight: var(--fw-bold);
  font-size: 28px;
  letter-spacing: -0.005em;
  color: var(--cc-coral);
}

:focus-visible {
  outline: 2px solid var(--cc-coral);
  outline-offset: 3px;
  border-radius: 2px;
}