/* Erika Design System — Copyright (c) 2026 Simon Sanladerer
   The visual design, composition, layout patterns, token values, and
   individual styles in this file are protected creative work.
   Licensed under the Elastic License 2.0 — see LICENSE in this directory. */

/* ================================================================
   Erika Layout — Single Source of Truth
   ================================================================
   All stage HTML files import this file via:
     <link rel="stylesheet" href="../styles/layout.css">

   This file contains:
     1. Design tokens    — :root custom properties (colors, type, spacing, etc.)
     2. Reset + base     — *, body
     3. Layout utilities — .container, .grid, .grid--* variants

   No :root block should appear in individual stage files.
   Stage-specific CSS goes in <style> within each HTML file.

   Baseline rhythm:
     Base font: 14px, line-height: 18px baseline unit.
     ALL vertical spacing, component heights, and line-heights
     resolve to multiples of 18px. The background grid uses 72px
     (4 x baseline) for a clean visual cadence.

   Layout classes:

     .container              — max-width 960px, centered, 24px inline padding
     .grid                   — display:grid, gap 18px (1 baseline unit)
     .grid.grid--auto-fill   — repeat(auto-fill, minmax(200px, 1fr))
     .grid.grid--2col        — repeat(2, 1fr)
     .grid.grid--3col        — repeat(3, 1fr)
     .grid.grid--sidebar     — 200px 1fr  (--progress-width)
     .grid.grid--holy-grail  — 200px 1fr 200px  (--progress-width)

     All multi-col grids collapse to 1fr below 768px.
   ================================================================ */

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

:root {
  /* ============================================================
     BASELINE RHYTHM
     ============================================================
     The fundamental vertical unit. Every vertical measurement
     (line-heights, component heights, vertical spacing, margins)
     MUST resolve to a multiple of this value.

     Derivation: 14px base font, 18px line-height (ratio 1.286).
     Path C adopted per BASELINE_DECISION.md — tighter density
     for the spatial application shell while preserving rhythm.
     ============================================================ */
  --baseline: 18px;

  /* ============================================================
     COLORS — Midnight Neon palette
     ============================================================ */

  /* --- Backgrounds --- */
  --bg-page: #1a1a2e;
  --bg-surface: #212136;
  --bg-elevated: #28283e;
  --bg-overlay: rgba(0, 0, 0, 0.55);

  /* --- Primary accent — cyan H195 --- */
  --accent-primary: #00d4ff;
  --accent-primary-hover: #33ddff;
  --accent-primary-subtle: rgba(0, 212, 255, 0.08);
  --accent-primary-glow: rgba(0, 212, 255, 0.4);
  --accent-primary-glow-strong: rgba(0, 212, 255, 0.7);
  --accent-primary-dim: color-mix(in srgb, var(--accent-primary) 50%, var(--bg-page));

  /* --- Secondary accent — neon pink, WCAG AA on elevated --- */
  --accent-secondary: #ff4d6a;
  --accent-secondary-hover: #ff6b83;
  --accent-secondary-subtle: rgba(255, 77, 106, 0.08);
  --accent-secondary-glow: rgba(255, 77, 106, 0.35);
  --accent-secondary-dim: color-mix(in srgb, var(--accent-secondary) 50%, var(--bg-page));

  /* --- Status — semantic colors --- */
  /* Success: neon green — 12.59:1 contrast, AAA */
  --status-success: #00ff66;
  --status-success-subtle: rgba(0, 255, 102, 0.08);
  --status-warning: #ffcc00;
  --status-warning-subtle: color-mix(in srgb, var(--status-warning) 7%, transparent);
  /* Error: secondary pink, 15% darker toward bg
     #d7457b = mix(#ff4d6a, #1a1a2e, 15%) in OKLCH — 4.08:1 contrast */
  --status-error: #d7457b;
  --status-error-subtle: rgba(215, 69, 123, 0.08);
  --status-info: #8fdafc;
  --status-info-subtle: color-mix(in srgb, var(--status-info) 7%, transparent);

  /* --- Text hierarchy --- */
  --text-primary: #f1f1f7;
  --text-secondary: #d3d4d9;
  --text-muted: #aaaab0;
  --text-disabled: #55556a;
  --text-inverse: var(--bg-page);

  /* --- Borders --- */
  --border-default: #323349;
  --border-strong: #3d3d55;
  --border-accent: var(--accent-primary);

  /* --- Terminal --- */
  --terminal-bg: #12122a;
  --terminal-text: #dcdcdc;

  /* Terminal ANSI palette */
  --term-color-0: #2e3436;   /* black */
  --term-color-1: #cc0000;   /* red */
  --term-color-2: #4e9a06;   /* green */
  --term-color-3: #c4a000;   /* yellow */
  --term-color-4: #3465a4;   /* blue */
  --term-color-5: #75507b;   /* magenta */
  --term-color-6: #06989a;   /* cyan */
  --term-color-7: #d3d7cf;   /* white */
  --term-color-8: #555753;   /* bright black (gray) */
  --term-color-9: #ef2929;   /* bright red */
  --term-color-10: #8ae234;  /* bright green */
  --term-color-11: #fce94f;  /* bright yellow */
  --term-color-12: #729fcf;  /* bright blue */
  --term-color-13: #ad7fa8;  /* bright magenta */
  --term-color-14: #34e2e2;  /* bright cyan */
  --term-color-15: #eeeeec;  /* bright white */
  --term-default-fg: #d4d4d4;
  --term-default-bg: #0a0a0a;

  /* ============================================================
     TYPOGRAPHY — Minor Third (1.2) from 14px base
     ============================================================
     Line heights are absolute px values that are exact multiples
     of --baseline (18px). This guarantees every text element
     occupies whole baseline units regardless of font size.

     Font size  | line-height | Baseline units
     -----------|-------------|---------------
     10px (xs)  |    18px     | 1
     12px (sm)  |    18px     | 1
     14px (base)|    18px     | 1
     17px (lg)  |    18px     | 1
     20px (xl)  |    18px     | 1
     24px (2xl) |    36px     | 2
     29px (3xl) |    36px     | 2
     ============================================================ */

  /* Font families */
  --font-body: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Geist Mono', 'JetBrains Mono', monospace;

  /* Type scale: 14px x 1.2^n, rounded to whole px */
  --text-xs: 0.625rem;    /* 10px — step -2 */
  --text-sm: 0.75rem;     /* 12px — step -1 */
  --text-base: 0.875rem;  /* 14px — step 0 (base) */
  --text-lg: 1.0625rem;   /* 17px — step +1 */
  --text-xl: 1.25rem;     /* 20px — step +2 */
  --text-2xl: 1.5rem;     /* 24px — step +3 */
  --text-3xl: 1.8125rem;  /* 29px — step +4 (display) */

  /* Line heights — absolute values snapped to baseline grid.
     Ratio-based --leading-* tokens kept for reference / fallback,
     but components SHOULD use the absolute --lh-* tokens. */
  --lh-xs: var(--baseline);                    /* 10px text: 1 baseline unit */
  --lh-sm: var(--baseline);                    /* 12px text: 1 baseline unit */
  --lh-base: var(--baseline);                  /* 14px text: 1 baseline unit */
  --lh-lg: var(--baseline);                    /* 17px text: 1 baseline unit */
  --lh-xl: calc(var(--baseline) * 2);           /* 20px text: 2 baseline units = 36px */
  --lh-2xl: calc(var(--baseline) * 2);         /* 24px text: 2 baseline units */
  --lh-3xl: calc(var(--baseline) * 2);         /* 29px text: 2 baseline units */
  --lh-mono: 20px;                             /* monospace: hardcoded for terminal reading comfort (1.43 ratio at 14px) */

  /* Legacy ratio tokens — kept for compatibility, but prefer --lh-* */
  --leading-tight: 1.3125;   /* 21px/16px approximation for headings */
  --leading-snug: 1.235;     /* 21px/17px */
  --leading-normal: 1.5;     /* 21px/14px — exact */
  --leading-relaxed: 1.75;   /* 21px/12px */
  --leading-mono: 1.5;       /* 21px/14px */

  /* Letter spacing */
  --tracking-tight: -0.02em;    /* display/headings — tighter feels more confident */
  --tracking-normal: 0;         /* body text */
  --tracking-wide: 0.06em;      /* small uppercase labels */
  --tracking-wider: 0.12em;     /* badges, timestamps */

  /* Weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ============================================================
     SPACING — Baseline-aligned vertical rhythm
     ============================================================
     Horizontal spacing remains on the 4px grid.
     Vertical spacing tokens that affect rhythm use baseline
     multiples: 18px, 36px, 54px, 72px.

     The --space-N tokens are kept for horizontal use and for
     fine internal adjustments. For vertical rhythm, use --rhythm-*.
     ============================================================ */
  --space-0\.5: 2px;
  --space-1: 4px;
  --space-1\.5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Rhythm-aligned vertical spacing (derived from --baseline) */
  --rhythm-quarter: calc(var(--baseline) / 4);  /* 0.25 units (4.5px) — tight padding */
  --rhythm-half: calc(var(--baseline) / 2);    /* 0.5 units (9px) — compact padding */
  --rhythm-1: var(--baseline);                 /* 1 unit — standard gap */
  --rhythm-2: calc(var(--baseline) * 2);       /* 2 units — section spacing */
  --rhythm-3: calc(var(--baseline) * 3);       /* 3 units — major section break */
  --rhythm-4: calc(var(--baseline) * 4);       /* 4 units — page-level separation */

  /* Named spacing shortcuts */
  --space-inline: var(--space-4);      /* default horizontal padding */
  --space-stack: var(--rhythm-1);      /* default vertical gap = 1 baseline */

  /* ============================================================
     LAYOUT / GRID
     ============================================================ */
  --container-max: 960px;
  --container-padding: var(--space-6);
  --grid-gap: var(--rhythm-1);                   /* 1 baseline unit */
  --header-height: var(--rhythm-3);              /* 3 baseline units */
  --sidebar-width: 260px;                        /* spatial shell sidebar column */

  /* Breakpoints (documented as tokens; used as raw values in @media) */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1440px;

  /* ============================================================
     COMPONENT SIZING — baseline-snapped heights
     ============================================================
     All interactive component heights are multiples of 18px
     so they occupy whole baseline units in vertical flow.

     btn-sm = 27px (1.5 units) — compact inline actions.
     btn-md / input-sm / input-md = 36px (2 units).
     btn-lg / input-lg = 54px (3 units).
     ============================================================ */
  --btn-height-sm: calc(var(--baseline) * 1.5);   /* 1.5 baseline units (27px) */
  --btn-height-md: var(--rhythm-2);              /* 2 baseline units */
  --btn-height-lg: var(--rhythm-3);              /* 3 baseline units */
  --input-height-sm: var(--rhythm-2);            /* 2 baseline units */
  --input-height-md: var(--rhythm-2);            /* 2 baseline units */
  --input-height-lg: var(--rhythm-3);            /* 3 baseline units */

  /* Component-specific sizing */
  --toast-min-width: 320px;
  --toast-max-width: 420px;
  --modal-max-width: 480px;
  --progress-width: 200px;

  /* ============================================================
     SHAPE
     ============================================================ */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-full: 9999px;

  /* ============================================================
     GLASS EFFECT
     ============================================================ */
  --glass-blur: 8px;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 15px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.65);
  --glow-accent: 0 0 20px rgba(0, 212, 255, 0.25);
  --glow-error: 0 0 20px color-mix(in srgb, var(--status-error) 25%, transparent);

  /* ============================================================
     ANIMATION
     ============================================================ */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --easing-default: ease-out;

  /* ============================================================
     Z-INDEX LAYERS
     ============================================================ */
  --z-overlay-backdrop: 200;
  --z-overlay-panel: 201;
}

/* ================================================================
   RESET + BASE
   ================================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background: var(--status-success); color: var(--text-inverse); }
html { position: relative; width: 100%; height: 100%; }
body { position: relative; width: 100%; min-height: 100%; }

body {
  font-family: var(--font-body);
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 212, 255, 0.06) 0px,
      rgba(0, 212, 255, 0.06) 1px,
      transparent 0px,
      transparent 72px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 212, 255, 0.06) 0px,
      rgba(0, 212, 255, 0.06) 1px,
      transparent 0px,
      transparent 72px
    ),
    var(--bg-page);
  /* Background grid at 72px (4 baselines). Grid lines at 0, 72, 144, ... */
  background-position: 0px, -2px, 0, 0;
  color: var(--text-primary);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-shadow: 0 12px 100px rgba(0, 0, 0, 0.36) inset;
}

/* ================================================================
   LAYOUT UTILITIES
   ================================================================
   Reusable layout classes that consume tokens.
   These are NOT tokens — they are utility classes for common patterns.
   ================================================================ */

/* --- Container --- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-padding);
}

/* --- Grid layouts --- */
.grid {
  display: grid;
  gap: var(--grid-gap);
}

/* auto-fill: raw value required — var() invalid in repeat(auto-fill, ...) per CSS Grid spec */
.grid--auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

.grid--sidebar {
  grid-template-columns: var(--progress-width) 1fr;
}

.grid--holy-grail {
  grid-template-columns: var(--progress-width) 1fr var(--progress-width);
}

/* --- Responsive grid collapse --- */
@media (max-width: 767px) {
  .grid--2col,
  .grid--3col,
  .grid--sidebar,
  .grid--holy-grail {
    grid-template-columns: 1fr;
  }
}