/* ─────────────────────────────────────────────────────────────────────────────
   SPACING · SHAPE · ELEVATION · MOTION — Danbi

   Built on an 8px architectural grid. Brutalist shape language: corners are sharp
   (radius 0–2px), borders are honest hairlines and structural 2–3px lines, and
   elevation is a HARD offset block-shadow — never a soft blur — when it appears
   at all. Most surfaces are flat and defined by their border. Motion is snappy
   and linear-ish: this product values legible movement (a spinning gate glyph
   that means "running"), not theatrical easing.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Spacing scale (8px grid; step 1 = 4px half-unit) ──────────────────── */
  --space-0:  0;
  --space-px: 1px;
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.5rem;   /* 24px */
  --space-6:  2rem;     /* 32px */
  --space-7:  3rem;     /* 48px */
  --space-8:  4rem;     /* 64px */
  --space-9:  6rem;     /* 96px */
  --space-10: 8rem;     /* 128px */

  --grid-unit: 8px;     /* the underlying baseline grid */

  /* ── Radius — modest (moonjar default). Brutalist themes restore sharp. ── */
  --radius-0:    4px;      /* default for structural surfaces */
  --radius-1:    6px;      /* controls (inputs, buttons) */
  --radius-2:    8px;      /* cards */
  --radius-pill: 999px;    /* status dots only */

  /* ── Borders ───────────────────────────────────────────────────────────── */
  --border-hair:       1px;
  --border-1:          1.5px;
  --border-2:          2px;
  --border-structural: 3px;   /* the heavy modernist frame */

  /* ── Elevation — flat by default (moonjar): hairlines + whitespace do the
     structural work; one soft shadow survives for true overlays. Brutalist
     themes restore the hard offset blocks below. ─────────────────────────── */
  --shadow-block-sm: none;
  --shadow-block:    none;
  --shadow-block-lg: 0 8px 24px -12px rgba(30, 35, 32, 0.10);
  /* A single quiet ambient shadow for dark-surface panels where a block shadow
     would read as a glitch rather than structure. */
  --shadow-ambient:  0 1px 0 0 var(--line), 0 12px 28px -18px rgba(0,0,0,0.55);

  /* ── Focus ─────────────────────────────────────────────────────────────── */
  --focus-width: 2px;
  --focus-offset: 2px;

  /* ── Layout rhythm ─────────────────────────────────────────────────────── */
  --measure: 64ch;          /* max reading width for prose */
  --container: 1100px;      /* the desktop app's content column */
  --gutter: var(--space-5);

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --dur-fast: 120ms;     /* @kind other */
  --dur:      200ms;     /* @kind other */
  --dur-slow: 320ms;     /* @kind other */
  --ease-out:    cubic-bezier(0.2, 0.6, 0.2, 1);  /* @kind other */
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1);    /* @kind other */
  --ease-linear: linear;                          /* @kind other */

  /* ── Z-index ───────────────────────────────────────────────────────────── */
  --z-base: 0;        /* @kind other */
  --z-raised: 10;     /* @kind other */
  --z-sticky: 100;    /* @kind other */
  --z-overlay: 1000;  /* @kind other */
  --z-toast: 1100;    /* @kind other */
}

/* ── Per-theme SHAPE + ELEVATION overrides ───────────────────────────────────
   Colour themes live in colors.css, fonts in typography.css; the shape language
   is this file's domain, so the two themes that soften the brutalist geometry
   override it HERE. `--shadow-tint` is the single knob for the blur colour.   */

/* Moonjar pin — restores the flat modest-rounding default under a host-applied
   dark/brutalist theme. */
[data-theme='moonjar'] {
  --radius-0: 4px;
  --radius-1: 6px;
  --radius-2: 8px;

  --shadow-block-sm: none;
  --shadow-block:    none;
  --shadow-block-lg: 0 8px 24px -12px rgba(30, 35, 32, 0.10);
}

/* Sambe — the middle ground: gently rounded, soft warm-ink shadows. */
[data-theme='sambe'] {
  --radius-0: 6px;
  --radius-1: 8px;
  --radius-2: 12px;

  --shadow-tint: 42, 38, 32;   /* warm ink (stone-800) */
  --shadow-block-sm: 0 1px 3px rgba(var(--shadow-tint), 0.14);
  --shadow-block:    0 3px 10px -2px rgba(var(--shadow-tint), 0.16);
  --shadow-block-lg: 0 8px 22px -6px rgba(var(--shadow-tint), 0.18);
}

/* The brutalist shape — sharp corners, hard offset blocks — is opt-in for the
   original themes. */
[data-theme='hanji'],
[data-theme='meok'],
[data-theme='dark'],
[data-theme='terminal'],
[data-theme='contrast'] {
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;

  --shadow-block-sm: 1px 1px 0 0 var(--line-strong);
  --shadow-block:    3px 3px 0 0 var(--line-strong);
  --shadow-block-lg: 5px 5px 0 0 var(--line-strong);
}

/* Jegi — fully round, friendly violet-tinted blur (never a hard block). */
[data-theme='jegi'] {
  --radius-0: 10px;
  --radius-1: 12px;
  --radius-2: 16px;

  --shadow-tint: 124, 58, 237;   /* the violet primary */
  --shadow-block-sm: 0 2px 6px -1px rgba(var(--shadow-tint), 0.18);
  --shadow-block:    0 6px 16px -4px rgba(var(--shadow-tint), 0.22);
  --shadow-block-lg: 0 12px 30px -8px rgba(var(--shadow-tint), 0.26);
}