/* STR4TUM v2.0 · tokens.css
   CSS variables: surfaces, text, hairlines, accents, type, spacing, radius, layout.
   Includes :root[data-theme="dark"] and prefers-color-scheme fallback.
   Auto-generated from preview.html — keep in sync.
   ============================================================================ */

/* ============================================================================
   STR4TUM v2.0 · TOKENS
   ============================================================================ */
:root {
  /* Surfaces — light (default) */
  --bg-base:        #fdfdfc;
  --bg-panel:       #f5f4f1;
  --bg-elevated:    #eceae4;

  /* Text */
  --text-primary:   #0e0d0c;
  --text-secondary: #3a3936;
  --text-muted:     #6e6c66;
  --text-dim:       #a8a59c;

  /* Hairlines */
  --hairline:        #e8e6e0;
  --hairline-strong: #0e0d0c;
  --hairline-w:      0.5px;

  /* Accents — drasticamente ridotti */
  --accent-link:     #0e0d0c;          /* grey neutro = text-primary, distinto via underline */
  --accent-positive: #1f7a3a;
  --accent-negative: #a8341c;
  --accent-warn:     #9a6b1c;

  /* Dim wash (per row highlight, mai per fill primario) */
  --positive-dim:    rgba(31, 122, 58, 0.08);
  --negative-dim:    rgba(168, 52, 28, 0.08);
  --warn-dim:        rgba(154, 107, 28, 0.10);
  --link-dim:        rgba(14, 13, 12, 0.06);

  /* Type */
  --font-screen: "Geist Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --font-print:  Arial, Helvetica, sans-serif;

  --fs-xs:   0.6875rem;  /* 11px */
  --fs-sm:   0.75rem;    /* 12px */
  --fs-base: 0.875rem;   /* 14px */
  --fs-md:   1rem;       /* 16px */
  --fs-lg:   1.25rem;    /* 20px */
  --fs-xl:   1.75rem;    /* 28px */
  --fs-2xl:  2.25rem;    /* 36px */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.4;

  --tracking-tight: -0.01em;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.12em;

  /* Spacing — 4px base, comprimato */
  --s-1: 0.25rem;  /* 4 */
  --s-2: 0.5rem;   /* 8 */
  --s-3: 0.75rem;  /* 12 */
  --s-4: 1rem;     /* 16 */
  --s-5: 1.25rem;  /* 20 */
  --s-6: 1.5rem;   /* 24 */
  --s-8: 2rem;     /* 32 */

  /* Radius — flat-first */
  --r-none: 0;
  --r-sm:   0;     /* tag, input, button */
  --r-md:   4px;   /* card, panel */
  --r-lg:   8px;   /* modal, featured */

  /* Layout */
  --container-max: 1400px;
  --page-pad-x: var(--s-6);
  --page-pad-y: var(--s-4);
}

:root[data-theme="dark"] {
  --bg-base:        #0a0a0a;
  --bg-panel:       #141413;
  --bg-elevated:    #1f1e1c;
  --text-primary:   #f5f4f1;
  --text-secondary: #c8c6c0;
  --text-muted:     #8a8880;
  --text-dim:       #5a5852;
  --hairline:        #1f1e1c;
  --hairline-strong: #f5f4f1;
  --accent-link:     #f5f4f1;          /* grey neutro = text-primary in dark */
  --accent-positive: #3ba864;
  --accent-negative: #d96a52;
  --accent-warn:     #d4a04a;
  --positive-dim:    rgba(59, 168, 100, 0.12);
  --negative-dim:    rgba(217, 106, 82, 0.12);
  --warn-dim:        rgba(212, 160, 74, 0.12);
  --link-dim:        rgba(245, 244, 241, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-base: #0a0a0a; --bg-panel: #141413; --bg-elevated: #1f1e1c;
    --text-primary: #f5f4f1; --text-secondary: #c8c6c0;
    --text-muted: #8a8880; --text-dim: #5a5852;
    --hairline: #1f1e1c; --hairline-strong: #f5f4f1;
    --accent-link: #f5f4f1; --accent-positive: #3ba864;
    --accent-negative: #d96a52; --accent-warn: #d4a04a;
  }
}

/* ============================================================================
   STR4TUM v2.0 · BASE RESET
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-screen);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  transition: background-color 200ms ease, color 200ms ease;
}
h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; line-height: var(--lh-tight); }
p, ul, ol { margin: 0; }
ul, ol { padding-left: var(--s-4); }
li + li { margin-top: var(--s-1); }
a { color: var(--accent-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
hr { border: 0; border-top: var(--hairline-w) solid var(--hairline); margin: var(--s-3) 0; }

/* Focus ring (WCAG 2.4.7) */
:focus-visible {
  outline: 2px solid var(--accent-link);
  outline-offset: 2px;
}