/* ═══════════════════════════════════════════════════════════
   CODED NATURE — UI System · Design Tokens

   The single source of truth. Import this file everywhere,
   never hardcode values. Override :root or apply
   [data-theme="dark"] to re-skin the entire system.

   THE CONTRACT: every interactive element rests on an
   ORGANIC radius (soft surface or circle) and snaps to a
   TECHNICAL radius (--r-technical, 4px) when engaged.
   Nature at rest, code when touched.
   ═══════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────────
   Geist (human) — self-hosted variable font.
   JetBrains Mono (system) — Google Fonts CDN. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap');

@font-face {
    font-family: 'Geist';
    src: url('fonts/Geist-VariableFont_wght.ttf') format('truetype-variations'),
         url('fonts/Geist-VariableFont_wght.ttf') format('truetype');
    /* path is relative to this CSS file → styles/fonts/... */
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── Surfaces ─────────────────────────────────────────── */
    --bg:            #FBFBFC;   /* near-white — main view */
    --bg-elevated:   #FFFFFF;
    --bg-sunken:     #F2F3F5;   /* light neutral grey — menus / wells */
    --bg-overlay:    rgba(251, 251, 252, 0.82);

    /* ── Ink (text & iconography) ─────────────────────────── */
    --ink:           #08080A;
    --ink-60:        rgba(8, 8, 10, 0.6);
    --ink-25:        rgba(8, 8, 10, 0.25);
    --ink-12:        rgba(8, 8, 10, 0.12);
    --ink-06:        rgba(8, 8, 10, 0.06);

    /* ── Accent ───────────────────────────────────────────── */
    --accent:        #FF5A1F;
    --accent-ink:    #FFFFFF;
    --accent-12:     rgba(255, 90, 31, 0.12);
    --accent-25:     rgba(255, 90, 31, 0.25);
    --accent-06:     rgba(255, 90, 31, 0.06);

    /* ── Signals (emerge only when needed) ────────────────── */
    --pos:           #00C853;
    --warn:          #FF9100;
    --neg:           #FF1744;
    --info:          #2979FF;

    --pos-25:        rgba(0, 200, 83, 0.25);
    --warn-25:       rgba(255, 145, 0, 0.25);
    --neg-25:        rgba(255, 23, 68, 0.25);
    --info-25:       rgba(41, 121, 255, 0.25);

    /* ── Typography — base families ───────────────────────── */
    --font-body:     'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-data:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* ── Fluid type scale ─────────────────────────────────── */
    --size-display:  clamp(2.8rem, 5vw, 5.5rem);
    --size-title:    clamp(1.6rem, 2.8vw, 2.8rem);
    --size-heading:  clamp(1.1rem, 1.6vw, 1.5rem);
    --size-body:     0.938rem;   /* 15px */
    --size-small:    0.813rem;   /* 13px */
    --size-micro:    0.688rem;   /* 11px */

    /* ── Letter-spacing — only two levels for mono labels ── */
    --ls-tight:      0.04em;
    --ls-wide:       0.08em;

    /* ── Line-height — two rhythms ────────────────────────── */
    --lh-compact:    1.55;
    --lh-reading:    1.7;

    /* ── Spacing (4px base) ───────────────────────────────── */
    --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
    --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;
    --s9: 96px;  --s10: 140px;

    /* ── Physics — three easings, three durations ────────── */
    --fluid:  cubic-bezier(0.16, 0.85, 0.20, 1);
    --snap:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --drift:  cubic-bezier(0.4, 0, 0.2, 1);

    --t-fast: 0.18s;
    --t-med:  0.4s;
    --t-slow: 0.7s;

    /* ── Morphing Radii ───────────────────────────────────── */
    --r-surface:    16px;   /* containers — the organic rest state */
    --r-technical:  4px;    /* active / engaged */
    --r-round:      50%;    /* circles (square elements only) */

    /* ── Shadows — three levels ───────────────────────────── */
    --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md:     0 6px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg:     0 10px 32px rgba(0, 0, 0, 0.12);
    --shadow-accent: 0 6px 20px var(--accent-25);

    --scale-hover:   1.05;
}

/* ── Dark Theme ──────────────────────────────────────────── */
[data-theme="dark"] {
    --bg:            #08080C;
    --bg-elevated:   #111116;
    --bg-sunken:     #040406;
    --bg-overlay:    rgba(8, 8, 12, 0.88);

    --ink:           #E4E4E8;
    --ink-60:        rgba(228, 228, 232, 0.6);
    --ink-25:        rgba(228, 228, 232, 0.22);
    --ink-12:        rgba(228, 228, 232, 0.10);
    --ink-06:        rgba(228, 228, 232, 0.05);

    --accent:        #FF8552;
    --accent-ink:    #FFFFFF;
    --accent-12:     rgba(255, 133, 82, 0.14);
    --accent-25:     rgba(255, 133, 82, 0.22);
    --accent-06:     rgba(255, 133, 82, 0.06);

    --pos-25:        rgba(0, 200, 83, 0.20);
    --warn-25:       rgba(255, 145, 0, 0.20);
    --neg-25:        rgba(255, 23, 68, 0.20);
    --info-25:       rgba(41, 121, 255, 0.20);

    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.15);
    --shadow-md:  0 6px 20px rgba(0, 0, 0, 0.25);
    --shadow-lg:  0 10px 32px rgba(0, 0, 0, 0.35);
}


/* ═══════════════════════════════════════════════════════════
   SEMANTIC TYPE ROLES
   
   Use these classes directly, OR read the CSS vars above and
   roll your own. Every semantic role maps to one token.
   ═══════════════════════════════════════════════════════════ */

body {
    font-family: var(--font-body);
    font-size: var(--size-body);
    line-height: var(--lh-reading);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

.prox-text,
.t-display {
    font-family: var(--font-body);
    font-size: var(--size-display);
    font-weight: 300;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

h1, .t-title {
    font-family: var(--font-body);
    font-size: var(--size-title);
    font-weight: 300;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

h2, .t-heading {
    font-family: var(--font-body);
    font-size: var(--size-heading);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

p, .t-body {
    font-family: var(--font-body);
    font-size: var(--size-body);
    line-height: var(--lh-reading);
    color: var(--ink-60);
}

.t-small {
    font-family: var(--font-body);
    font-size: var(--size-small);
    line-height: var(--lh-compact);
}

/* Mono / system voice — always uppercase, always wide spaced */
.t-data,
.data-label {
    font-family: var(--font-data);
    font-size: var(--size-micro);
    font-weight: 400;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--ink-25);
}

.t-mono {
    font-family: var(--font-data);
}

code, .t-code {
    font-family: var(--font-data);
    font-size: 0.85em;
    background: var(--ink-06);
    padding: 2px 7px;
    border-radius: var(--r-technical);
    color: var(--accent);
}

/* Section markers — the "01 —" preambles */
.section-id {
    font-family: var(--font-data);
    font-size: var(--size-micro);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: var(--s3);
}
.section-id::before {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--accent);
}

/* Selection uses the accent */
::selection {
    background: var(--accent-12);
    color: var(--accent);
}