/* ============================================================
   baywarp — design tokens
   Tre direzioni visive selezionabili via [data-theme]:
   ardesia (default) · sabbia · notte
   Densità via [data-density="compact|comfortable"]
   ============================================================ */

:root {
  /* ---- type scale (rem) ---- */
  --fs-2xs: 0.6875rem;  /* 11 */
  --fs-xs:  0.75rem;    /* 12 */
  --fs-sm:  0.8125rem;  /* 13 */
  --fs-md:  0.9375rem;  /* 15 */
  --fs-lg:  1.0625rem;  /* 17 */
  --fs-xl:  1.375rem;   /* 22 */
  --fs-2xl: 1.75rem;    /* 28 */
  --fs-3xl: 2.25rem;    /* 36 */
  --fs-4xl: 3rem;       /* 48 */

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

  /* ---- spacing (8pt-ish) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;
  --s9: 48px; --s10: 64px;

  /* ---- density (overridden by [data-density]) ---- */
  --row-h: 40px;
  --cell-py: 9px;
  --section-gap: var(--s6);
  --card-pad: var(--s5);

  /* ---- radius / shadow / motion (per-theme can override) ---- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px; --r-pill: 999px;
  --ring: 0 0 0 3px var(--accent-ring);
  --ease: cubic-bezier(.2,.7,.3,1);
  --dur: .18s;

  /* fonts (per-theme overrides below) */
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-display: var(--font-sans);
}

[data-density="compact"] {
  --row-h: 34px;
  --cell-py: 6px;
  --section-gap: var(--s5);
  --card-pad: var(--s4);
}
[data-density="comfortable"] {
  --row-h: 48px;
  --cell-py: 13px;
  --section-gap: var(--s8);
  --card-pad: var(--s6);
}

/* ============================================================
   DIREZIONE 1 — ARDESIA  (cool slate + blu · densa · DeepVision)
   ============================================================ */
[data-theme="ardesia"] {
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-display: 'IBM Plex Sans', system-ui, sans-serif;
  --display-weight: 600;
  --r-card: var(--r-md);
  --r-ctl: var(--r-sm);

  --bg: oklch(0.968 0.006 247);
  --surface: #ffffff;
  --surface-2: oklch(0.978 0.006 247);
  --surface-3: oklch(0.955 0.008 247);
  --border: oklch(0.905 0.01 247);
  --border-strong: oklch(0.84 0.014 247);
  --text: oklch(0.27 0.03 257);
  --text-2: oklch(0.45 0.025 257);
  --text-3: oklch(0.6 0.02 257);

  --accent: oklch(0.55 0.17 256);
  --accent-hover: oklch(0.49 0.17 256);
  --accent-fg: #ffffff;
  --accent-weak: oklch(0.95 0.04 256);
  --accent-text: oklch(0.46 0.16 256);
  --accent-ring: oklch(0.55 0.17 256 / 0.35);

  --danger: oklch(0.55 0.2 25);
  --danger-weak: oklch(0.955 0.03 25);
  --danger-text: oklch(0.48 0.2 25);
  --warn: oklch(0.7 0.16 70);
  --warn-weak: oklch(0.96 0.05 80);
  --warn-text: oklch(0.52 0.13 70);
  --ok: oklch(0.6 0.13 155);
  --ok-weak: oklch(0.95 0.04 155);
  --ok-text: oklch(0.46 0.12 155);
  --info-weak: oklch(0.95 0.035 256);
  --info-text: oklch(0.46 0.13 256);

  --nav-bg: #ffffff;
  --nav-fg: oklch(0.4 0.025 257);
  --nav-fg-muted: oklch(0.6 0.02 257);
  --nav-active-bg: oklch(0.95 0.04 256);
  --nav-active-fg: oklch(0.42 0.16 256);
  --nav-border: var(--border);
  --nav-brand: var(--text);

  --topbar-bg: rgba(255,255,255,0.85);
  --topbar-fg: var(--text);

  --sandbox-bg: oklch(0.93 0.09 85);
  --sandbox-fg: oklch(0.42 0.09 70);
  --sandbox-accent: oklch(0.7 0.16 70);

  --shadow-1: 0 1px 2px oklch(0.4 0.03 257 / 0.06), 0 1px 3px oklch(0.4 0.03 257 / 0.04);
  --shadow-2: 0 4px 16px oklch(0.4 0.03 257 / 0.08), 0 1px 3px oklch(0.4 0.03 257 / 0.05);
  --shadow-pop: 0 12px 32px oklch(0.3 0.03 257 / 0.16);
}

/* ============================================================
   DIREZIONE 2 — SABBIA  (warm stone + teal · ariosa · editoriale)
   ============================================================ */
[data-theme="sabbia"] {
  --font-sans: 'Libre Franklin', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-display: 'Newsreader', Georgia, serif;
  --display-weight: 500;
  --r-card: var(--r-lg);
  --r-ctl: var(--r-md);

  --bg: oklch(0.972 0.008 83);
  --surface: oklch(0.995 0.004 83);
  --surface-2: oklch(0.978 0.008 83);
  --surface-3: oklch(0.958 0.01 83);
  --border: oklch(0.9 0.012 80);
  --border-strong: oklch(0.83 0.016 75);
  --text: oklch(0.28 0.018 60);
  --text-2: oklch(0.46 0.016 60);
  --text-3: oklch(0.6 0.014 65);

  --accent: oklch(0.52 0.082 200);
  --accent-hover: oklch(0.46 0.082 200);
  --accent-fg: oklch(0.99 0.01 200);
  --accent-weak: oklch(0.95 0.03 200);
  --accent-text: oklch(0.45 0.08 200);
  --accent-ring: oklch(0.52 0.082 200 / 0.32);

  --danger: oklch(0.54 0.17 28);
  --danger-weak: oklch(0.955 0.028 35);
  --danger-text: oklch(0.47 0.17 28);
  --warn: oklch(0.68 0.13 65);
  --warn-weak: oklch(0.96 0.045 75);
  --warn-text: oklch(0.5 0.11 60);
  --ok: oklch(0.56 0.1 160);
  --ok-weak: oklch(0.95 0.035 160);
  --ok-text: oklch(0.44 0.095 160);
  --info-weak: oklch(0.95 0.03 200);
  --info-text: oklch(0.44 0.08 200);

  --nav-bg: oklch(0.985 0.006 83);
  --nav-fg: oklch(0.4 0.018 60);
  --nav-fg-muted: oklch(0.58 0.014 65);
  --nav-active-bg: oklch(0.94 0.03 200);
  --nav-active-fg: oklch(0.42 0.08 200);
  --nav-border: var(--border);
  --nav-brand: var(--text);

  --topbar-bg: oklch(0.985 0.006 83 / 0.85);
  --topbar-fg: var(--text);

  --sandbox-bg: oklch(0.92 0.075 70);
  --sandbox-fg: oklch(0.42 0.09 55);
  --sandbox-accent: oklch(0.66 0.14 55);

  --shadow-1: 0 1px 2px oklch(0.4 0.02 60 / 0.06), 0 1px 3px oklch(0.4 0.02 60 / 0.04);
  --shadow-2: 0 6px 20px oklch(0.4 0.02 60 / 0.08), 0 1px 3px oklch(0.4 0.02 60 / 0.05);
  --shadow-pop: 0 14px 36px oklch(0.3 0.02 60 / 0.15);
}

/* ============================================================
   DIREZIONE 3 — NOTTE  (dark chrome + indigo · sharp · moderna)
   ============================================================ */
[data-theme="notte"] {
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --display-weight: 600;
  --r-card: var(--r-xs);
  --r-ctl: var(--r-xs);

  --bg: oklch(0.965 0.004 270);
  --surface: #ffffff;
  --surface-2: oklch(0.975 0.004 270);
  --surface-3: oklch(0.95 0.006 270);
  --border: oklch(0.9 0.008 270);
  --border-strong: oklch(0.82 0.012 270);
  --text: oklch(0.24 0.02 275);
  --text-2: oklch(0.44 0.02 275);
  --text-3: oklch(0.58 0.018 275);

  --accent: oklch(0.56 0.19 280);
  --accent-hover: oklch(0.5 0.19 280);
  --accent-fg: #ffffff;
  --accent-weak: oklch(0.95 0.04 280);
  --accent-text: oklch(0.48 0.18 280);
  --accent-ring: oklch(0.56 0.19 280 / 0.38);

  --danger: oklch(0.56 0.21 22);
  --danger-weak: oklch(0.95 0.035 22);
  --danger-text: oklch(0.49 0.21 22);
  --warn: oklch(0.72 0.16 75);
  --warn-weak: oklch(0.96 0.05 80);
  --warn-text: oklch(0.52 0.13 70);
  --ok: oklch(0.62 0.15 150);
  --ok-weak: oklch(0.95 0.045 150);
  --ok-text: oklch(0.47 0.13 150);
  --info-weak: oklch(0.95 0.04 280);
  --info-text: oklch(0.48 0.15 280);

  /* dark chrome */
  --nav-bg: oklch(0.22 0.025 278);
  --nav-fg: oklch(0.82 0.02 278);
  --nav-fg-muted: oklch(0.62 0.02 278);
  --nav-active-bg: oklch(0.32 0.08 280);
  --nav-active-fg: oklch(0.95 0.02 280);
  --nav-border: oklch(0.32 0.02 278);
  --nav-brand: #ffffff;

  --topbar-bg: oklch(0.26 0.025 278 / 0.9);
  --topbar-fg: oklch(0.92 0.015 278);

  --sandbox-bg: oklch(0.72 0.16 75);
  --sandbox-fg: oklch(0.25 0.06 60);
  --sandbox-accent: oklch(0.4 0.1 60);

  --shadow-1: 0 1px 2px oklch(0.2 0.02 278 / 0.08), 0 1px 3px oklch(0.2 0.02 278 / 0.05);
  --shadow-2: 0 6px 20px oklch(0.2 0.02 278 / 0.1), 0 1px 3px oklch(0.2 0.02 278 / 0.06);
  --shadow-pop: 0 16px 40px oklch(0.15 0.02 278 / 0.22);
}

/* ============================================================
   DIREZIONE 4 — AURORA  (light + viola · morbida · moderna)
   ============================================================ */
[data-theme="aurora"] {
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --display-weight: 600;
  --r-card: var(--r-lg);
  --r-ctl: var(--r-md);

  --bg: oklch(0.976 0.007 300);
  --surface: #ffffff;
  --surface-2: oklch(0.982 0.008 300);
  --surface-3: oklch(0.962 0.012 300);
  --border: oklch(0.91 0.012 300);
  --border-strong: oklch(0.85 0.018 300);
  --text: oklch(0.27 0.03 305);
  --text-2: oklch(0.45 0.028 305);
  --text-3: oklch(0.6 0.022 305);

  --accent: oklch(0.55 0.19 300);
  --accent-hover: oklch(0.49 0.19 300);
  --accent-fg: #ffffff;
  --accent-weak: oklch(0.96 0.04 300);
  --accent-text: oklch(0.47 0.18 300);
  --accent-ring: oklch(0.55 0.19 300 / 0.34);

  --danger: oklch(0.56 0.2 18);
  --danger-weak: oklch(0.955 0.03 18);
  --danger-text: oklch(0.49 0.2 18);
  --warn: oklch(0.7 0.15 65);
  --warn-weak: oklch(0.96 0.05 75);
  --warn-text: oklch(0.52 0.12 60);
  --ok: oklch(0.62 0.13 160);
  --ok-weak: oklch(0.95 0.04 160);
  --ok-text: oklch(0.47 0.12 160);
  --info-weak: oklch(0.96 0.035 300);
  --info-text: oklch(0.48 0.16 300);

  --nav-bg: oklch(0.985 0.008 300);
  --nav-fg: oklch(0.4 0.03 305);
  --nav-fg-muted: oklch(0.6 0.022 305);
  --nav-active-bg: oklch(0.95 0.045 300);
  --nav-active-fg: oklch(0.45 0.18 300);
  --nav-border: var(--border);
  --nav-brand: var(--text);

  --topbar-bg: oklch(0.99 0.006 300 / 0.85);
  --topbar-fg: var(--text);

  --sandbox-bg: oklch(0.93 0.085 88);
  --sandbox-fg: oklch(0.42 0.09 70);
  --sandbox-accent: oklch(0.7 0.16 75);

  --shadow-1: 0 1px 2px oklch(0.4 0.03 305 / 0.05), 0 2px 6px oklch(0.4 0.03 305 / 0.05);
  --shadow-2: 0 8px 26px oklch(0.4 0.04 305 / 0.1), 0 1px 3px oklch(0.4 0.03 305 / 0.05);
  --shadow-pop: 0 18px 44px oklch(0.3 0.05 305 / 0.18);
}

/* ============================================================
   DIREZIONE 5 — GRAFITE  (warm graphite + terracotta · industriale · netta)
   ============================================================ */
[data-theme="grafite"] {
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-display: 'Archivo', system-ui, sans-serif;
  --display-weight: 700;
  --r-card: var(--r-xs);
  --r-ctl: var(--r-xs);

  --bg: oklch(0.962 0.005 70);
  --surface: oklch(0.992 0.003 70);
  --surface-2: oklch(0.972 0.005 70);
  --surface-3: oklch(0.946 0.007 70);
  --border: oklch(0.88 0.009 65);
  --border-strong: oklch(0.78 0.012 60);
  --text: oklch(0.24 0.012 55);
  --text-2: oklch(0.42 0.012 55);
  --text-3: oklch(0.56 0.011 58);

  --accent: oklch(0.55 0.15 38);
  --accent-hover: oklch(0.49 0.15 38);
  --accent-fg: #ffffff;
  --accent-weak: oklch(0.95 0.04 45);
  --accent-text: oklch(0.47 0.15 35);
  --accent-ring: oklch(0.55 0.15 38 / 0.32);

  --danger: oklch(0.53 0.2 25);
  --danger-weak: oklch(0.95 0.03 25);
  --danger-text: oklch(0.46 0.2 25);
  --warn: oklch(0.66 0.13 88);
  --warn-weak: oklch(0.95 0.05 90);
  --warn-text: oklch(0.48 0.1 85);
  --ok: oklch(0.55 0.11 150);
  --ok-weak: oklch(0.94 0.04 150);
  --ok-text: oklch(0.43 0.1 150);
  --info-weak: oklch(0.95 0.025 230);
  --info-text: oklch(0.45 0.1 240);

  --nav-bg: oklch(0.978 0.005 70);
  --nav-fg: oklch(0.38 0.012 55);
  --nav-fg-muted: oklch(0.56 0.011 58);
  --nav-active-bg: oklch(0.94 0.045 45);
  --nav-active-fg: oklch(0.45 0.15 35);
  --nav-border: var(--border-strong);
  --nav-brand: var(--text);

  --topbar-bg: oklch(0.985 0.004 70 / 0.88);
  --topbar-fg: var(--text);

  --sandbox-bg: oklch(0.88 0.07 92);
  --sandbox-fg: oklch(0.38 0.07 75);
  --sandbox-accent: oklch(0.62 0.12 80);

  --shadow-1: 0 1px 0 oklch(0.3 0.012 55 / 0.05), 0 1px 2px oklch(0.3 0.012 55 / 0.07);
  --shadow-2: 0 2px 4px oklch(0.3 0.012 55 / 0.08), 0 4px 14px oklch(0.3 0.012 55 / 0.07);
  --shadow-pop: 0 10px 30px oklch(0.25 0.012 55 / 0.18);
}