/*
 * Oraculum — Design Tokens (Phase 0)
 *
 * Single source of truth per i design tokens dell'UI Oraculum-RAG.
 * Definiti come CSS custom properties su :root cosicché qualsiasi
 * selettore CSS esistente possa progressivamente migrarci.
 *
 * IMPORTANTE: Phase 0 = define-only. Nessun selettore concreto qui
 * dentro applica i tokens — quello succede in Phase 1+. Linkato in
 * head.html prima degli altri stylesheet per garantire cascade.
 *
 * Palette istituzionale: navy #0D1F3A derivato dalla brand identity
 * Regione Lazio · Direzione Sviluppo Economico (canvas Claude Design
 * 2026-05-15, frame WOW 3 gradazioni).
 */

:root {
  /* ─── Palette primaria (navy istituzionale) ─── */
  --oc-primary:       #0D1F3A;
  --oc-navy2:         #08122A;       /* CD Q6C306 · background profondo cover */
  --oc-navy3:         #142E55;       /* CD Q6C306 · card su sfondo navy */
  --oc-accent:        #2A5A91;       /* CD Q6C306 · separatori / link */
  --oc-accent-dark:   #1F4778;       /* CD keSYUd · accent hover/active */
  --oc-accent-light:  #D9E4F1;       /* CD keSYUd · accent pale spotlight, hover gentle */
  --oc-primary-dark:  #08122A;
  --oc-primary-hover: #13294B;
  --oc-primary-light: #E5EAF1;

  /* ─── Signal demo (banner non-PROD) — gold-light isolato come segnale, NON brand ─── */
  --oc-signal-demo:      #F4E4B0;
  --oc-signal-demo-dark: #9E7820;

  /* ─── Testo (4 livelli di gerarchia) ─── */
  --oc-text:    #17324D;
  --oc-text-2:  #455B71;
  --oc-text-3:  #5C6F82;
  --oc-text-4:  #8C9DAD;

  /* ─── Background (3 livelli) ─── */
  --oc-bg:   #FFFFFF;
  --oc-bg-2: #F4F5F7;
  --oc-bg-3: #E9ECEF;

  /* ─── Border ─── */
  --oc-border:   #D9DEE3;
  --oc-border-2: #C1C9D2;

  /* ─── Stati semantici ─── */
  --oc-success: #008055;
  --oc-warning: #A66300;
  --oc-danger:  #CC334D;
  --oc-info:    #005C99;
  --oc-focus:   #FFC107;
  --oc-gold:    #C3962D;       /* CD --gold · signal compatibilità (stelle); uso parsimonioso, non brand */

  /* ─── Badge color mapping ─── */
  --oc-badge-open-bg:   #D8F2E6;
  --oc-badge-open-fg:   #046642;
  --oc-badge-soon-bg:   #FFF4D6;
  --oc-badge-soon-fg:   #A66300;
  --oc-badge-closed-bg: #E9ECEF;
  --oc-badge-closed-fg: #5C6F82;
  --oc-badge-fesr-bg:   #D8F2E6;
  --oc-badge-fesr-fg:   #046642;
  --oc-badge-fse-bg:    #D6E9F7;
  --oc-badge-fse-fg:    #004C99;
  --oc-badge-pnrr-bg:   #EADDF5;
  --oc-badge-pnrr-fg:   #5B2E91;
  /* Porting operatore-ente: FEASR ambra · Regionali grigio · PSP viola · Nazionale slate */
  --oc-badge-feasr-bg:  #F7E6C7;
  --oc-badge-feasr-fg:  #8A5A00;
  --oc-badge-regionali-bg: #E9ECEF;
  --oc-badge-regionali-fg: #5C6F82;
  --oc-badge-psp-bg:    #E0D9F3;
  --oc-badge-psp-fg:    #3D2E91;
  --oc-badge-nazionale-bg: #DCE3EC;
  --oc-badge-nazionale-fg: #34495E;
  --oc-badge-altro-bg:  #E9ECEF;
  --oc-badge-altro-fg:  #5C6F82;

  /* ─── Font families ─── */
  --oc-font-sans:  "Titillium Web", "Helvetica Neue", Arial, system-ui, sans-serif;
  --oc-font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --oc-font-mono:  "JetBrains Mono", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ─── Font sizes (scala minor third 1.2) ─── */
  --oc-text-xs:   11px;
  --oc-text-sm:   12.5px;
  --oc-text-base: 14px;
  --oc-text-md:   15.5px;
  --oc-text-lg:   17px;
  --oc-text-xl:   22px;
  --oc-text-2xl:  28px;

  /* ─── Spacing (scala 4-px) ─── */
  --oc-space-1:  4px;
  --oc-space-2:  8px;
  --oc-space-3:  12px;
  --oc-space-4:  16px;
  --oc-space-5:  20px;
  --oc-space-6:  24px;
  --oc-space-8:  32px;
  --oc-space-10: 40px;
  --oc-space-12: 48px;

  /* ─── Border radius ─── */
  --oc-radius-sm:   3px;
  --oc-radius:      6px;
  --oc-radius-lg:   8px;
  --oc-radius-pill: 999px;

  /* ─── Shadows (subtili, istituzionali) ─── */
  --oc-shadow-sm: 0 1px 2px rgba(23,50,77,0.04);
  --oc-shadow:    0 1px 3px rgba(23,50,77,0.05), 0 4px 16px rgba(23,50,77,0.06);
  --oc-shadow-md: 0 4px 12px rgba(0,76,153,0.10);
  --oc-shadow-lg: 0 10px 40px rgba(23,50,77,0.18), 0 4px 12px rgba(23,50,77,0.08);
  --oc-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ─── Brand gradients ─── */
  --oc-gradient-brand:    linear-gradient(135deg, #2A5A91 0%, #0D1F3A 100%);
  --oc-gradient-cta:      linear-gradient(180deg, #2A5A91 0%, #0D1F3A 100%);
  --oc-gradient-bg-soft:  linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  --oc-gradient-card:     linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  --oc-gradient-gov:      linear-gradient(180deg, #EEF1F4 0%, #E4E8EC 100%);

  /* ─── Transition ─── */
  --oc-transition-fast:   120ms cubic-bezier(.4, 0, .2, 1);
  --oc-transition:        160ms cubic-bezier(.4, 0, .2, 1);
  --oc-transition-slow:   240ms cubic-bezier(.4, 0, .2, 1);
}

/* ─── Varianti palette (tweaks-panel canvas) ─── */
/*
 * Override via data-blue="..." su <body>. Default è navy istituzionale.
 * "bright" è la palette acquosa del canvas iniziale (#0066CC), conservata
 * come alternativa selezionabile ma NON come default.
 */
[data-blue="pale"] {
  --oc-primary:       #4A6480;
  --oc-primary-dark:  #2E4A66;
  --oc-primary-hover: #3A5878;
  --oc-primary-light: #EFF2F6;
}
[data-blue="bright"] {
  --oc-primary:       #0066CC;
  --oc-primary-dark:  #004C99;
  --oc-primary-hover: #0059B3;
  --oc-primary-light: #E6F0FA;
}
[data-blue="bold"] {
  --oc-primary:       #003D80;
  --oc-primary-dark:  #002952;
  --oc-primary-hover: #002D5C;
  --oc-primary-light: #DCE8F5;
}

/* ─── prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --oc-transition-fast: 0ms;
    --oc-transition:      0ms;
    --oc-transition-slow: 0ms;
  }
}