/* ─────────────────────────────────────────────
   STACKD Design System — colors_and_type.css
   Source of truth for color + type tokens.
   Derived from vibestackd.com (index.html, about/, widgets/).

   Fonts:
   - Space Grotesk  — display + logo + monospace-ish UI
   - Pretendard     — body + Korean-friendly UI (variable)
   - Noto Sans Mono — fallback mono (not used in product,
                      substituted where a true mono is needed)

   Load:
   <link rel="stylesheet" href="fonts.css">  (ships local Space Grotesk)
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css">
   (Pretendard is still loaded from CDN — no local file shipped.)
   ───────────────────────────────────────────── */

:root {
  /* ── CORE PALETTE ────────────────────────────── */
  /* STACKD is now BLACK + WHITE only. No brand color.
     Accent is handled by weight, contrast, and borders —
     not by hue. In dark mode the accent is white (#f0f0f0);
     in light mode it's black (#080808). Both themes read
     the same: ink-on-paper / paper-on-ink. */
  --stackd-ink:        #080808;   /* near-black */
  --stackd-paper:      #f4f4f0;   /* warm cream */

  /* Dark theme (default surfaces) */
  --stackd-black:      #080808;   /* canvas bg */
  --stackd-surface:    #111111;   /* tiles, panels */
  --stackd-surface-2:  #181818;   /* tile header / elevated */
  --stackd-surface-3:  #1a1a1a;   /* feature blocks */
  --stackd-border:     #1e1e1e;   /* default border */
  --stackd-border-2:   #222222;   /* marketing-site border */

  /* Light theme */
  --stackd-white:      #ffffff;
  --stackd-paper-2:    #e8e8e3;
  --stackd-border-lt:  #ddddd8;

  /* Neutral scale (for hover rings, emphasis) */
  --stackd-accent-d:   #f0f0f0;   /* dark-mode accent (bright white) */
  --stackd-accent-l:   #080808;   /* light-mode accent (ink black) */

  /* Accents */
  --stackd-blue:       #0066cc;   /* reserved: kept as token, not used by default */
  --stackd-red:        #ff4747;   /* destructive — the ONE remaining hue */
  --stackd-orange:     #ff8c00;   /* edit-mode indicator (use sparingly) */

  /* DEPRECATED — do not use. Kept only so old references
     resolve to a safe neutral instead of breaking. */
  --stackd-lime:       var(--stackd-accent-d);
  --stackd-lime-hover: #ffffff;
  --stackd-cyan:       #b0b0b0;

  /* Text (dark) */
  --stackd-text-d:     #d8d8d8;   /* primary text */
  --stackd-text-d-mid: #9a9a9a;   /* mid (labels) */
  --stackd-text-d-dim: #727272;   /* dim (hints, footnotes) */
  --stackd-text-d-hi:  #f0f0f0;   /* hi-emphasis headings */

  /* Text (light) */
  --stackd-text-l:     #1a1a1a;
  --stackd-text-l-mid: #555555;
  --stackd-text-l-dim: #777777;

  /* ── BG PRESET PALETTE (the 7 canvas colors) ── */
  /* "Void / Slate / Forest / Dusk / Sand / Blush / Paper" */
  --stackd-bg-void:    #080808;
  --stackd-bg-slate:   #1a1f2e;
  --stackd-bg-forest:  #0f1f14;
  --stackd-bg-dusk:    #2a1f3d;
  --stackd-bg-sand:    #2a2418;
  --stackd-bg-blush:   #2d1a1f;
  --stackd-bg-paper:   #f4f4f0;

  /* ── SEMANTIC TOKENS (dark — default) ────────── */
  --bg:          var(--stackd-black);
  --surface:     var(--stackd-surface);
  --surface-2:   var(--stackd-surface-2);
  --border:      var(--stackd-border);
  --text:        var(--stackd-text-d);
  --text-hi:     var(--stackd-text-d-hi);
  --text-mid:    var(--stackd-text-d-mid);
  --text-dim:    var(--stackd-text-d-dim);
  --accent:      var(--stackd-accent-d);   /* white in dark mode */
  --accent-2:    var(--stackd-accent-d);   /* no hue — same neutral */
  --accent-tint: rgba(255,255,255,0.07);
  --danger:      var(--stackd-red);

  /* ── TYPE FAMILIES ───────────────────────────── */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Pretendard Variable', Pretendard, ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Space Grotesk', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── TYPE SCALE (display — Space Grotesk) ────── */
  /* Display is used for logo, hero titles, section headers.
     Letter-spacing is always SMALL and positive (0.02–0.04em). */
  --fs-display-xl:  80px;   /* CTA banner ("THE ECOSYSTEM OF BUILDERS") */
  --fs-display-lg:  72px;   /* hero h1 */
  --fs-display-md:  48px;   /* section title, target-box h3 */
  --fs-display-sm:  36px;   /* submit-title, stat-num */
  --fs-display-xs:  28px;   /* modal-title */
  --fs-display-2xs: 22px;   /* logo */
  --fs-display-3xs: 18px;   /* panel-title */
  --fs-display-4xs: 16px;   /* settings-title */

  /* ── TYPE SCALE (body — Pretendard) ──────────── */
  --fs-body-lg:  20px;   /* hero subhead */
  --fs-body-md:  16px;   /* feature copy, default p */
  --fs-body-sm:  14px;   /* btn, card-desc-large */
  --fs-body-xs:  12px;   /* field-input, card-desc */
  --fs-body-2xs: 11px;   /* small desc, hints */
  --fs-body-3xs: 10px;   /* btn small, labels */
  --fs-body-4xs: 9px;    /* micro-labels, filter pills */
  --fs-body-5xs: 8px;    /* badges, micro hints */

  /* ── LETTER-SPACING PRESETS ──────────────────── */
  /* Rule of thumb: smaller the text, WIDER the tracking.
     Micro-labels (9–10px) run at 0.10–0.15em — this is
     the single strongest visual signature of STACKD UI. */
  --tracking-tight:    -0.02em;   /* hero display (h1) */
  --tracking-normal:   0em;       /* Space Grotesk display */
  --tracking-logo:     0.03em;    /* logo */
  --tracking-subtle:   0.02em;    /* card names */
  --tracking-label:    0.08em;    /* clock, meta */
  --tracking-ui:       0.10em;    /* btn, tab, pill */
  --tracking-caps:     0.12em;    /* section-title, filter-label */
  --tracking-micro:    0.15em;    /* section heads, hero-tag */
  --tracking-wide:     0.20em;    /* hero sub-tag */

  /* ── FONT WEIGHTS ────────────────────────────── */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;   /* Pretendard hero */

  /* ── LINE HEIGHTS ────────────────────────────── */
  --lh-tight:   0.95;   /* hero display */
  --lh-snug:    1.2;    /* h1 */
  --lh-normal:  1.45;   /* btn/label */
  --lh-body:    1.6;    /* body copy */
  --lh-loose:   1.8;    /* hero desc, submit-desc */

  /* ── SPACING (8px base, with some 4/6px) ─────── */
  --sp-0:   0px;
  --sp-1:   4px;
  --sp-2:   6px;
  --sp-3:   8px;
  --sp-4:   12px;
  --sp-5:   16px;
  --sp-6:   20px;
  --sp-7:   24px;
  --sp-8:   28px;
  --sp-9:   32px;
  --sp-10:  40px;
  --sp-11:  48px;
  --sp-12:  60px;
  --sp-13:  80px;
  --sp-14:  120px;    /* section padding-y */
  --sp-15:  160px;    /* CTA padding-y */

  /* ── RADII ──────────────────────────────────── */
  /* STACKD is SHARP by default. Rounded is an opt-in
     body-level mode (.tile-rounded). */
  --radius-none:  0px;
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;    /* .tile-rounded tiles */
  --radius-pill:  50px;    /* section-tag chip */
  --radius-full:  9999px;

  /* ── BORDERS ────────────────────────────────── */
  --bw:        1px;       /* almost everywhere */
  --bw-thick:  2px;       /* settings-tab active, CTA top bar */

  /* ── SHADOWS ────────────────────────────────── */
  /* Minimal. Shadows are rare; used only when lifting
     the floating action bar and when dragging a tile. */
  --shadow-fab:      0 4px 20px rgba(0,0,0,0.4);
  --shadow-drag:     0 8px 32px rgba(0,0,0,0.6);
  --shadow-card-lt:  0 2px 12px rgba(0,0,0,0.06);

  /* ── MOTION ─────────────────────────────────── */
  --dur-fast:    0.12s;   /* link hover, filter hover */
  --dur-base:    0.15s;   /* btn hover, tile hover */
  --dur-med:     0.20s;   /* panel slide-in */
  --dur-slow:    0.30s;   /* save-label fade */
  --dur-xslow:   0.40s;   /* carousel */
  --ease-std:    ease;    /* almost everywhere */
  --ease-out:    ease-out;

  /* ── Z-INDEX ────────────────────────────────── */
  --z-header:     200;
  --z-fab:        300;
  --z-settings:   800;
  --z-overlay:    799;
  --z-panel:      900;
  --z-fullscreen: 1000;
  --z-modal:      2000;
}

/* ── LIGHT THEME OVERRIDE ────────────────────── */
[data-theme="light"] {
  --bg:          var(--stackd-paper);
  --surface:     var(--stackd-white);
  --surface-2:   var(--stackd-paper-2);
  --border:      var(--stackd-border-lt);
  --text:        var(--stackd-text-l);
  --text-hi:     var(--stackd-text-l);
  --text-mid:    var(--stackd-text-l-mid);
  --text-dim:    var(--stackd-text-l-dim);
  --accent:      var(--stackd-accent-l);    /* black */
  --accent-2:    var(--stackd-accent-l);
  --accent-tint: rgba(0,0,0,0.06);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:          var(--stackd-paper);
    --surface:     var(--stackd-white);
    --surface-2:   var(--stackd-paper-2);
    --border:      var(--stackd-border-lt);
    --text:        var(--stackd-text-l);
    --text-hi:     var(--stackd-text-l);
    --text-mid:    var(--stackd-text-l-mid);
    --text-dim:    var(--stackd-text-l-dim);
    --accent:      var(--stackd-text-l);
    --accent-2:    var(--stackd-blue);
    --accent-tint: rgba(0,0,0,0.06);
  }
}

/* ─────────────────────────────────────────────
   SEMANTIC TYPOGRAPHY CLASSES
   Use these on content. Structural. Predictable.
   ───────────────────────────────────────────── */

.stackd-logo {
  font-family: var(--font-display);
  font-size: var(--fs-display-2xs);
  letter-spacing: var(--tracking-logo);
  color: var(--accent);
  font-weight: var(--fw-regular);
}

.stackd-h1 {
  font-family: var(--font-body);
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  word-break: keep-all;   /* Korean-safe */
}

/* Hero display accent — Space Grotesk inline within an h1 */
.stackd-h1--display {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  color: var(--accent);
  letter-spacing: var(--tracking-normal);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
}

.stackd-h2 {
  font-family: var(--font-body);
  font-size: var(--fs-display-md);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  letter-spacing: var(--tracking-tight);
  word-break: keep-all;
}

.stackd-h2--display {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  letter-spacing: var(--tracking-normal);
  color: var(--accent);
  font-weight: var(--fw-regular);
}

.stackd-h3 {
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: var(--fw-bold);
  line-height: 1.3;
}

.stackd-h4 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: var(--fw-semibold);
}

/* The omnipresent micro-label: the "ALL VIBE-CODED TOOLS" chip,
   the "NEW", "FEATURED", "FILTER:", section-titles, etc. */
.stackd-micro {
  font-family: var(--font-body);
  font-size: var(--fs-body-4xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-dim);
}

.stackd-section-tag {
  font-family: var(--font-body);
  font-size: var(--fs-body-2xs);
  letter-spacing: var(--tracking-micro);
  color: var(--accent);
  text-transform: uppercase;
  display: inline-block;
  border: var(--bw) solid var(--accent);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

/* The section-tag has an alt look in dark-theme UI where it's
   non-bordered — see .stackd-hero-tag */
.stackd-hero-tag {
  font-family: var(--font-body);
  font-size: var(--fs-body-4xs);
  letter-spacing: var(--tracking-wide);
  color: var(--accent-2);
  text-transform: uppercase;
}

.stackd-body {
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body);
  color: var(--text-mid);
  word-break: keep-all;
}

.stackd-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-body-xs);
  line-height: var(--lh-body);
  color: var(--text-mid);
}

.stackd-caption {
  font-family: var(--font-body);
  font-size: var(--fs-body-3xs);
  letter-spacing: var(--tracking-label);
  color: var(--text-dim);
}

.stackd-code {
  font-family: var(--font-display);
  font-size: var(--fs-body-xs);
  color: var(--accent-2);
  letter-spacing: var(--tracking-label);
  background: var(--bg);
  border: var(--bw) solid var(--border);
  padding: 12px 16px;
}

/* ─────────────────────────────────────────────
   BASELINE ELEMENT STYLES
   Opt-in via <body class="stackd-base"> or just
   pull the class rules onto your own elements.
   ───────────────────────────────────────────── */

.stackd-base {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: var(--lh-body);
}
.stackd-base h1 { @extend .stackd-h1; }   /* (conceptual — not SCSS) */