/* ==========================================================================
   TECNOACCESS — DESIGN TOKENS
   Magazine editoriale brutalist · WCAG 2.2 AAA · responsive iPhone/iPad/Desktop
   ========================================================================== */

:root {
  /* COLOR · LIGHT (default) -------------------------------------------------- */
  --tn-paper:        #FFFFFF;          /* sfondo pagina, bianco carta */
  --tn-paper-2:      #F7F4EE;          /* sfondo crema per blocchi differenziati */
  --tn-paper-3:      #EDE8DD;          /* sfondo crema più scuro */
  --tn-ink:          #111111;          /* testo principale, contrasto 19.7:1 con paper */
  --tn-ink-2:        #2A2A2A;          /* testo secondario */
  --tn-ink-3:        #4F4F4F;          /* metadata, caption — AAA 7.5:1 su paper */
  --tn-line:         #111111;          /* divisori netti, brutalist */
  --tn-line-soft:    #D9D2C3;          /* divisori sottili crema */

  --tn-orange:       #E85D04;          /* accent puro, hover, focus, badge */
  --tn-orange-deep:  #B53F00;          /* link base — AAA su #FFF (ratio 7.0:1) */
  --tn-orange-soft:  #FFF1E8;          /* highlight tenue (mai per testo) */

  --tn-warn:         #B53F00;
  --tn-good:         #1B6E3E;          /* AAA su bianco */

  /* TYPOGRAPHY ------------------------------------------------------------- */
  --tn-font-display: 'Newsreader', 'Source Serif 4', 'Times New Roman', serif;
  --tn-font-body:    'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  --tn-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* type scale 1.250 (major third) — basato su 16px */
  --tn-text-xs:    0.75rem;     /* 12 — kicker, caption */
  --tn-text-sm:    0.875rem;    /* 14 — meta, byline */
  --tn-text-base:  1rem;        /* 16 — body mobile */
  --tn-text-md:    1.125rem;    /* 18 — body desktop */
  --tn-text-lg:    1.25rem;     /* 20 — lead paragraphs */
  --tn-text-xl:    1.5625rem;   /* 25 — h4, summary articolo */
  --tn-text-2xl:   1.953rem;    /* 31 — h3 */
  --tn-text-3xl:   2.441rem;    /* 39 — h2, card headlines */
  --tn-text-4xl:   3.052rem;    /* 49 — h1 articolo */
  --tn-text-5xl:   3.815rem;    /* 61 — display medio */
  --tn-text-6xl:   5.96rem;     /* 95 — hero display */

  /* line height */
  --tn-lh-tight:   1.05;
  --tn-lh-snug:    1.2;
  --tn-lh-normal:  1.4;
  --tn-lh-prose:   1.65;        /* body article */
  --tn-lh-loose:   1.8;

  /* letter spacing */
  --tn-tracking-tight:  -0.02em;
  --tn-tracking-normal: 0;
  --tn-tracking-wide:   0.04em;
  --tn-tracking-mono:   0.06em;     /* per kicker mono uppercase */

  /* SPACING ratio 1.5 ----------------------------------------------------- */
  --space-1:  0.25rem;     /* 4 */
  --space-2:  0.5rem;      /* 8 */
  --space-3:  0.75rem;     /* 12 */
  --space-4:  1rem;        /* 16 */
  --space-5:  1.5rem;      /* 24 */
  --space-6:  2rem;        /* 32 */
  --space-7:  3rem;        /* 48 */
  --space-8:  4rem;        /* 64 */
  --space-9:  6rem;        /* 96 */
  --space-10: 8rem;        /* 128 */

  /* CONTAINERS ----------------------------------------------------------- */
  --tn-container:    72rem;     /* 1152px - main grid */
  --tn-container-md: 56rem;     /* 896px */
  --tn-container-sm: 42.5rem;   /* 680px - article body, optimal reading width */

  /* RADIUS · brutalist: nessuno (0) tranne logo/avatar */
  --tn-radius-0: 0;
  --tn-radius-pill: 9999px;
  --tn-radius-circle: 50%;

  /* BORDERS ---------------------------------------------------------------- */
  --tn-border-hair:   1px solid var(--tn-line-soft);
  --tn-border-thin:   1px solid var(--tn-line);
  --tn-border-thick:  2px solid var(--tn-line);
  --tn-border-heavy:  4px solid var(--tn-line);

  /* MOTION (rispetta prefers-reduced-motion sotto) ------------------------- */
  --tn-ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --tn-ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --tn-dur-fast:    120ms;
  --tn-dur-base:    200ms;
  --tn-dur-slow:    400ms;
  --tn-dur-reveal:  600ms;

  /* Z-INDEX ---------------------------------------------------------------- */
  --tn-z-skip:    100;
  --tn-z-header:  50;
  --tn-z-overlay: 60;
  --tn-z-modal:   70;

  /* FOCUS RING (AAA) -------------------------------------------------------- */
  --tn-focus-ring: 3px solid var(--tn-orange);
  --tn-focus-offset: 4px;
}

/* DARK MODE — auto + opt-in ------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --tn-paper:     #0E0D0B;
    --tn-paper-2:   #16140F;
    --tn-paper-3:   #1F1C16;
    --tn-ink:       #F4EFE4;
    --tn-ink-2:     #D6CFBF;
    --tn-ink-3:     #918979;
    --tn-line:      #F4EFE4;
    --tn-line-soft: #2A2620;
    --tn-orange-deep: #FF8A3D;     /* AAA su dark bg */
    --tn-orange-soft: #2A1A0E;
  }
}

[data-theme="dark"] {
  --tn-paper:     #0E0D0B;
  --tn-paper-2:   #16140F;
  --tn-paper-3:   #1F1C16;
  --tn-ink:       #F4EFE4;
  --tn-ink-2:     #D6CFBF;
  --tn-ink-3:     #918979;
  --tn-line:      #F4EFE4;
  --tn-line-soft: #2A2620;
  --tn-orange-deep: #FF8A3D;
  --tn-orange-soft: #2A1A0E;
}

[data-theme="light"] {
  --tn-paper:     #FFFFFF;
  --tn-paper-2:   #F7F4EE;
  --tn-paper-3:   #EDE8DD;
  --tn-ink:       #111111;
  --tn-ink-2:     #2A2A2A;
  --tn-ink-3:     #4F4F4F;
  --tn-line:      #111111;
  --tn-line-soft: #D9D2C3;
  --tn-orange-deep: #B53F00;
  --tn-orange-soft: #FFF1E8;
}