/* ============================================
   SeaVIN — Design Tokens
   Editorial Premium / Forensic Dossier
   ============================================ */

:root {
  /* ════════════════════════════════════════════════════
     SeaVIN — Palette "Azure Marine" (default light)
     Sfondi white-frost, ink navy profondo, accent Azure.
     ════════════════════════════════════════════════════ */

  /* ---- Sfondi & superfici (chiari) ---- */
  --cream:   #FFFFFF;   /* bianco puro */
  --cream-2: #F1F6FB;   /* light frost */
  --cream-3: #E2ECF5;   /* mist sub-surface */
  --paper:   #F5F9FD;   /* card / sezioni alternate (frost sottile) */

  /* ---- Linee ---- */
  --line:      #D4DEEB; /* bordi standard */
  --line-soft: #E5EDF6; /* bordi tenui */

  /* ---- Testo (ink) ---- */
  --ink-2:        #0E2C4D;
  --ink-strong:   #0B2540;
  --ink-secondary:#1A2D42;
  --ink-disabled: #3A5068;

  /* ---- Accent — i blu protagonisti ---- */
  --terra:   #0EA5E9;   /* Azure, accent primario */
  --terra-d: #0284C7;   /* Azure scuro, hover */
  --clay:    #7FB3DC;   /* Sky pale, accent secondario tenue */
  --sand:    #C8DCED;   /* Powder, pastello chiaro */

  /* ---- Supporti tematici ---- */
  --sea-deep: #1B3D5E;
  --sea:      #2A5278;
  --green:    #4A7C5C;  /* verde sobrio per stati ok */

  /* ════════════════════════════════════════════════════
     Mapping legacy → nuova palette
     (le variabili usate ovunque puntano ai nuovi colori)
     ════════════════════════════════════════════════════ */
  --bg:        var(--cream);
  --bg-elev:   var(--cream-2);
  --bg-card:   var(--cream);
  --ink:       var(--ink-strong);
  --ink-soft:  var(--ink-secondary);
  --ink-mute:  var(--ink-disabled);
  --ink-faint: #4A6275;
  --rule:      var(--line);
  --rule-soft: var(--line-soft);

  --accent:      var(--terra);
  --accent-deep: var(--terra-d);
  --accent-soft: var(--clay);

  --secondary:      var(--terra);
  --secondary-deep: var(--terra-d);
  --secondary-soft: var(--clay);
  --secondary-wash: var(--sand);
  --secondary-tint: var(--cream-3);

  --stamp:   #9e2a1e;       /* red-oxide stamp invariato */
  --success: var(--green);
  --danger:  #9e2a1e;
  --info:    var(--sea);

  --sea-soft: var(--clay);
  --sea-wash: var(--cream-3);
  --azure:      var(--terra);
  --azure-soft: var(--clay);
  --azure-wash: var(--cream-3);
  --azure-deep: var(--terra-d);

  /* ---- Type pairing (DM Sans + Instrument Serif italic accents) ---- */
  --font-display: "DM Sans", "Söhne", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "DM Sans", "Söhne", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent:  "Instrument Serif", "GT Sectra", "Canela", "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", "SF Mono", ui-monospace, monospace;

  /* ---- Scale ---- */
  --step--2: clamp(0.72rem, 0.70rem + 0.1vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.90rem);
  --step-0:  clamp(0.96rem, 0.94rem + 0.1vw, 1.02rem);
  --step-1:  clamp(1.12rem, 1.05rem + 0.35vw, 1.32rem);
  --step-2:  clamp(1.38rem, 1.20rem + 0.80vw, 1.80rem);
  --step-3:  clamp(1.85rem, 1.50rem + 1.6vw, 2.80rem);
  --step-4:  clamp(2.60rem, 2.00rem + 3.0vw, 4.40rem);
  --step-5:  clamp(3.40rem, 2.60rem + 4.2vw, 6.60rem);
  --step-6:  clamp(4.40rem, 3.20rem + 6.0vw, 9.00rem);

  /* ---- Spacing ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  --max-w: 1440px;
  --edge: clamp(20px, 4vw, 56px);
}

/* ---- Palette: Marine Navy (sezioni "dark" sull-ink) ---- */
[data-palette="navy"] {
  --bg:        var(--ink-strong, #0B2540);
  --bg-elev:   var(--ink-2, #0E2C4D);
  --bg-card:   var(--sea-deep, #1B3D5E);
  --ink:       var(--cream, #FFFFFF);
  --ink-soft:  var(--sand, #C8DCED);
  --ink-mute:  var(--clay, #7FB3DC);
  --ink-faint: #5A7589;
  --rule:      #1F4063;
  --rule-soft: #18324C;
  --accent:      var(--terra, #0EA5E9);
  --accent-deep: var(--terra-d, #0284C7);
  --accent-soft: var(--clay, #7FB3DC);
  --secondary:      var(--terra, #0EA5E9);
  --secondary-deep: var(--terra-d, #0284C7);
  --secondary-soft: var(--clay, #7FB3DC);
  --secondary-wash: #16385A;
  --secondary-tint: #14304F;
  --stamp:   #c4523e;
  --sea-soft: var(--clay, #7FB3DC);
  --sea-wash: #16385A;
  --azure:      var(--terra, #0EA5E9);
  --azure-soft: var(--clay, #7FB3DC);
  --azure-wash: #16385A;
  --azure-deep: var(--terra-d, #0284C7);
}

/* ---- Palette: Paper (white-frost più "pulito") ---- */
[data-palette="paper"] {
  --bg:        var(--cream, #FFFFFF);   /* bianco puro */
  --bg-elev:   #F1F6FB;                 /* mist — sezioni alternate per ritmo */
  --bg-card:   var(--cream, #FFFFFF);
  --ink:       var(--ink-strong, #0B2540);
  --ink-soft:  var(--ink-secondary, #1A2D42);
  --ink-mute:  var(--ink-disabled, #3A5068);
  --ink-faint: #4A6275;
  --rule:      #C5D2E0;                 /* bordi visibili senza pesare */
  --rule-soft: #DEE6EF;
  --accent:      var(--terra, #0EA5E9);
  --accent-deep: var(--terra-d, #0284C7);
  --accent-soft: var(--clay, #7FB3DC);
  --secondary:      var(--terra, #0EA5E9);
  --secondary-deep: var(--terra-d, #0284C7);
  --secondary-soft: var(--clay, #7FB3DC);
  --secondary-wash: var(--sand, #C8DCED);
  --secondary-tint: var(--cream-3, #E2ECF5);
  --stamp: #9e2a1e;
  --sea-soft: var(--clay, #7FB3DC);
  --sea-wash: var(--cream-3, #E2ECF5);
  --azure:      var(--terra, #0EA5E9);
  --azure-soft: var(--clay, #7FB3DC);
  --azure-wash: var(--cream-3, #E2ECF5);
  --azure-deep: var(--terra-d, #0284C7);
}

/* ---- Dark override (theme="dark", su qualunque palette) ---- */
[data-theme="dark"] {
  --bg:        #061629;
  --bg-elev:   #0B2540;
  --bg-card:   #0E2C4D;
  --ink:       #FFFFFF;
  --ink-soft:  #C8DCED;
  --ink-mute:  #7FB3DC;
  --ink-faint: #5A7589;
  --rule:      #1F4063;
  --rule-soft: #14304F;
  --accent:      #0EA5E9;
  --accent-deep: #38BDF8;
  --accent-soft: #7FB3DC;
  --stamp:   #c4523e;
  --sea-deep: #1B3D5E;
  --sea:      #2A5278;
  --sea-soft: #7FB3DC;
  --sea-wash: #14304F;
  --azure:      #0EA5E9;
  --azure-soft: #7FB3DC;
  --azure-wash: #14304F;
  --azure-deep: #0284C7;
}

/* ---- Type pairing: Technical sans ---- */
[data-typeset="technical"] {
  --font-display: "DM Sans", "Söhne", -apple-system, sans-serif;
  --font-body:    "DM Sans", "Söhne", -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", monospace;
}

/* ============================================
   Base reset
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

[data-typeset="technical"] h1,
[data-typeset="technical"] h2,
[data-typeset="technical"] h3 {
  font-weight: 500;
  letter-spacing: -0.035em;
}

/* Editorial italic accent — Instrument Serif italic on <em> and .accent
   for keeping the nautical/editorial flair on emphasized words. */
em, .accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
h1 em, h2 em, h3 em, h4 em, h5 em,
h1 .accent, h2 .accent, h3 .accent, h4 .accent, h5 .accent {
  font-size: 1.08em;
  letter-spacing: -0.005em;
  font-weight: 400;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

input, textarea, select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  outline: 0;
}

hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: 0;
}

::selection { background: var(--accent); color: var(--bg); }

/* ============================================
   Utility primitives
   ============================================ */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "ss02", "zero";
  letter-spacing: -0.01em;
}
.serif { font-family: var(--font-display); }
.kicker {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: currentColor;
  display: inline-block;
}

.rule { height: 1px; background: var(--rule); width: 100%; }
.rule-thick { height: 2px; background: var(--ink); width: 100%; }

.shell {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--edge);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: -0.01em;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, transform 0.18s;
  white-space: nowrap;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--bg); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn--accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--bg); }
.btn--sm { padding: 9px 14px; font-size: var(--step--1); }
.btn--lg { padding: 18px 28px; font-size: var(--step-1); }

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
}

/* Stamp (forensic) */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 5px;
  border: 1.5px solid var(--stamp);
  color: var(--stamp);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  background: transparent;
  font-weight: 600;
}

/* Placeholder imagery (striped) */
.placeholder {
  background:
    repeating-linear-gradient(
      135deg,
      var(--rule-soft) 0 10px,
      transparent 10px 20px
    ),
    var(--bg-elev);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
}

/* Tabular nums everywhere for data */
.tabular { font-variant-numeric: tabular-nums; }

/* Focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--rule); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); }