/* ==========================================================================
   LAB 451 — tema condiviso
   Derivato da https://lab451.net (DM Sans, navy / purple / pink, fondo bianco)
   Da ospitare in un unico punto, es. https://lab451.net/assets/lab451.css
   e includere in ogni sito PRIMA del CSS specifico (lab451.<sito>.css).
   ========================================================================== */

:root {
  /* --- Brand (identici alla home) --- */
  --l451-navy:   #1e2244;
  --l451-purple: #7b5ea7;
  --l451-pink:   #c47eb5;
  --l451-gradient: linear-gradient(135deg, var(--l451-purple), var(--l451-pink));

  /* --- Tema chiaro (default) --- */
  --l451-bg:            #ffffff;
  --l451-surface:       #f6f5fa;   /* card, pannelli */
  --l451-surface-hover: #efedf6;
  --l451-border:        #e3e1ee;
  --l451-border-strong: #c9c5dc;   /* hover dei bordi */
  --l451-text:          #1e2244;   /* = navy, 15:1 su bianco */
  --l451-muted:         #6b6a86;   /* 5.2:1 su bianco */
  --l451-accent:        #7b5ea7;   /* = purple, 5.2:1 su bianco */
  --l451-accent-dim:    rgba(123, 94, 167, .10);
  --l451-selection:     rgba(123, 94, 167, .20);
  --l451-code-bg:       #f3f0f8;
  --l451-code-text:     #5b4a8a;

  /* --- Stati --- */
  --l451-ok:     #237a52;
  --l451-err:    #c2415a;
  --l451-info:   #3d6fb0;
  --l451-warn:   #946010;

  /* --- Tipografia --- */
  --l451-font:      'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --l451-font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* --- Forma --- */
  --l451-radius:    6px;
  --l451-shadow:    0 12px 40px rgba(30, 34, 68, .10);  /* come .central-logo */
}

/* Variante scura (solo dove serve un toggle, es. MD Editor) */
:root[data-theme="dark"] {
  --l451-bg:            #14162c;
  --l451-surface:       #1b1e3a;
  --l451-surface-hover: #23274a;
  --l451-border:        #2e3260;
  --l451-border-strong: #454a80;
  --l451-text:          #e6e6f2;
  --l451-muted:         #8d90b4;
  --l451-accent:        #a88bd8;
  --l451-accent-dim:    rgba(168, 139, 216, .15);
  --l451-selection:     rgba(168, 139, 216, .30);
  --l451-code-bg:       #1f2244;
  --l451-code-text:     #cbb8f0;
  --l451-ok:   #5fd39a;
  --l451-err:  #f08aa0;
  --l451-info: #8fb6f0;
  --l451-warn: #f0c060;
}

/* --- Base comune --- */
html { -webkit-font-smoothing: antialiased; }

body {
  background: var(--l451-bg);
  color: var(--l451-text);
  font-family: var(--l451-font);
}

::selection { background: var(--l451-selection); }

code, kbd, pre, samp { font-family: var(--l451-font-mono); }

a { color: var(--l451-accent); }

:focus-visible {
  outline: 2px solid var(--l451-accent);
  outline-offset: 2px;
}

/* Testo con gradiente brand (come "451" nel logo) */
.l451-gradient-text {
  background: var(--l451-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Mini-logo riutilizzabile (stesso markup della home) */
.l451-mini-logo {
  width: 40px; height: 40px;
  border: 2px solid var(--l451-navy);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; letter-spacing: .06em;
  color: var(--l451-navy); text-decoration: none;
  font-family: var(--l451-font);
}
:root[data-theme="dark"] .l451-mini-logo { border-color: var(--l451-text); color: var(--l451-text); }