/* ============================================================================ an-tokens.css — Anchora design tokens (SORGENTE UNICA di valori letterali) ---------------------------------------------------------------------------- REGOLA DI ORCHESTRAZIONE (handover Claude Code): - Questo è l'UNICO file in cui sono ammessi valori esadecimali / rgba letterali. - Ogni altro foglio di stile DEVE usare esclusivamente var(--an-*). - Namespace obbligatorio: --an-* (globali) · --an-pane-* / --an-*-local (locali). - Font: Outfit (titoli) · Space Grotesk (corpo) · JetBrains Mono (codice/dati). Inter è BANDITO. In produzione i font sono self-hosted (woff2), MAI da CDN. - Temi: applicare [data-an-theme="ocean|void|fog"] su un antenato (o sul componente stesso). 'ocean' è il default. ========================================================================== */ :root { /* — Tipografia — */ --an-font-title: "Outfit", system-ui, sans-serif; --an-font-body: "Space Grotesk", system-ui, sans-serif; --an-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; --an-fs-8: 8px; --an-fs-9: 9px; --an-fs-10: 10px; --an-fs-11: 11px; --an-fs-12: 12px; --an-fs-13: 13px; --an-fs-14: 14px; --an-fs-15: 15px; --an-fs-16: 16px; --an-fs-20: 20px; --an-fs-26: 26px; /* HUD: i numeri leggibili a distanza e la riga-causa del telegrafo. Scala a parte perche' la leggibilita' di una dashboard si giudica a colpo d'occhio, non alla distanza di lettura di un paragrafo. */ --an-fs-hud-num: clamp(22px, 3.4vw, 32px); --an-fs-hud-cause: clamp(15px, 2.2vw, 20px); /* — Spaziatura (scala 4px) — */ --an-space-1: 4px; --an-space-2: 8px; --an-space-3: 12px; --an-space-4: 16px; --an-space-5: 24px; --an-space-6: 32px; /* — Raggi — */ --an-radius-sm: 8px; --an-radius-md: 11px; --an-radius-lg: 14px; --an-radius-xl: 20px; --an-radius-pill: 9999px; /* — Livelli z — */ /* --an-z-sheet: sopra #sk-root (shell.html, fixed z:500) e nella banda dei modali del terminale (10200-10220), sotto i dialoghi critici e i toast. */ --an-z-pane: 1; --an-z-bar: 10; --an-z-menu: 40; --an-z-toast: 70; --an-z-sheet: 10100; /* — Tinte sessione (semantiche, indipendenti dal tema) — */ --an-sess-main: #34D399; --an-sess-staging: #EAB308; --an-sess-prod: #F87171; --an-sess-logs: #A78BFA; --an-sess-work: #22D3EE; /* — Opzioni accent Settings drawer (S2.6b) — scelte utente, indipendenti dal tema — */ --an-accent-opt-violet: #A78BFA; --an-accent-opt-cyan: #22D3EE; --an-accent-opt-green: #34D399; --an-accent-opt-pink: #F472B6; --an-accent-opt-amber: #FBBF24; /* — Stati semantici — */ --an-state-ok: #34D399; --an-state-wip: #22D3EE; --an-state-warn: #FBBF24; --an-state-danger: #F87171; --an-state-agent: #A78BFA; /* Guscio vuoto: la pane tmux e' viva ma l'agente dentro e' morto. Non e' un errore (niente rosso) ne' un warning (niente ambra): e' un'ASSENZA. Stesso hue dell'identita' agente, spento. Per-tema sotto: l'ordinale e' il contrasto rispetto al fondo, non la luminanza assoluta — altrimenti su fog (bg chiaro) la scala si invertirebbe. */ --an-state-agent-dead: #6B6480; /* — Ombre / focus — */ --an-shadow-pane: 0 8px 24px rgba(0, 0, 0, .35); --an-shadow-bar: 0 -8px 24px rgba(0, 0, 0, .30); --an-shadow-menu: 0 18px 44px rgba(0, 0, 0, .55); /* — Anchor mark glow (filter: su svg) — */ --an-anchor-glow: drop-shadow(0 0 10px rgba(34, 211, 238, .30)); /* — Backward-compat (legacy aliases tipografici) — */ --font-display: "Outfit", system-ui, sans-serif; /* Token V2 legacy: --an-canvas e --an-dim RIMOSSI 2026-06-29 (migrati ai canonici --an-bg/--an-muted-2). --an-surface2/--an-border2 RIMOSSI 2026-07-03 (Fase C completata dopo regressione da merge lab 1522d55; canonici = --an-surface-2/ --an-border-2). --an-cyan/--an-purple RESTANO: riferimenti reali live in anchora-nav.css (--an-purple), anchora-keyboard.js (--an-cyan, bridge tema), app/routers/deck.py (border_color "--an-cyan"/"--an-purple"), blocco tema Void qui sotto (--an-cdesk-agent: var(--an-purple)). Vedi docs/plans/token-naming-reconciliation_*. */ /* — Alias semantici mai definiti, aggiunti 2026-08-02 (audit 4 superfici orch) — Sette nomi erano USATI in ~35 punti del repo e definiti in ZERO. Una var() indefinita senza fallback rende la dichiarazione invalid-at-computed-value: il browser non fallisce, EREDITA. Nessun errore in console, e il gate anti-esadecimali non li vedeva perche' non sono hex — sono nomi. Effetto misurato: i badge FAILED/PARTIAL/Quota Esaurita di /help/atlas-fallbacks uscivano SENZA rosso ne' ambra su tutti e 3 i temi. Il colore che deve dire salute non diceva niente. Definiti qui come alias verso i canonici — stessa scelta gia' presa per --an-cyan/--an-purple sopra: quando i riferimenti vivi esistono, l'alias resta. Sono var() e non esadecimali, quindi seguono il tema da soli. DEPRECATI: codice nuovo usa il canonico a destra. Presidio: tests/test_an_tokens_ghost.py */ --an-warning: var(--an-amber); --an-error: var(--an-red); --an-rose: var(--an-red); --an-yellow: var(--an-amber); --an-surface-hover: var(--an-surface-2); --an-muted-1: var(--an-muted); --an-canvas: var(--an-bg); --font-body: "Space Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* Ocean base fallbacks (per elementi senza data-an-theme). CRITICO: --an-text/surface/border/accent NON hanno fallback → testo nero + sfondo trasparente se il selettore tema non matcha. Questi valori = Ocean. Void/Fog li sovrascrivono via [data-an-theme] con specificità più alta. */ --an-bg: #000C14; --an-surface: #010F1E; --an-border: #0B2A3D; --an-text: #E8F7EE; --an-muted: #699187; --an-accent: #34D399; /* — Scrollbar design system (fallback Ocean; ogni tema ridefinisce nei blocchi [data-an-theme]). size-compact: unico globale, usato dal foglio an-scrollbars.css sotto i 768px. — */ --an-scrollbar-thumb: color-mix(in srgb, var(--an-muted) 45%, transparent); --an-scrollbar-thumb-hover: color-mix(in srgb, var(--an-muted) 72%, transparent); --an-scrollbar-track: transparent; --an-scrollbar-size: 8px; --an-scrollbar-size-compact: 6px; --an-accent-ink:#04130B; --an-cyan: #22D3EE; --an-purple: #A78BFA; /* Testo della tastiera: pannello scuro fisso, theme-independent (non segue i 3 temi). */ --an-kbd-text: #F3F1FF; --an-kbd-text-dim: #4E5378; --an-amber: #FBBF24; --an-amber-ink:#14100A; --an-red: #F87171; --an-red-ink: var(--an-bg); /* ink sul badge rosso (default = Ocean) */ /* Void compat */ --void-canvas: #04040C; --void-surface: #080920; --void-border: #1A1E42; --void-accent: #8B5CF6; --void-accent2: #A78BFA; --void-canvas-2: #05060F; --void-border-soft: rgba(26,30,66,.55); --void-tip-bg: rgba(8,9,32,.97); /* Global legacy aliases */ --bg-color: var(--an-bg); --text-primary: #E8F7EE; --accent: #34D399; /* — Responsive spacing (fluid, 375px→1440px) — */ --an-space-2xs: clamp(2px, 0.5vw, 4px); --an-space-xs: clamp(4px, 1vw, 8px); --an-space-sm: clamp(8px, 2vw, 12px); --an-space-md: clamp(12px, 3vw, 16px); --an-space-lg: clamp(16px, 4vw, 24px); --an-space-xl: clamp(24px, 5vw, 40px); --an-gutter: 10px; --an-hit: 44px; --an-shell-max: 460px; /* Console MODE 2: larghezza max colonna feed (mobile) */ --an-desktop-rail: 360px; /* Console MODE 2: larghezza rail destra (desktop 2-col) */ /* — Fluid font sizes — */ --an-fs-xs: clamp(0.6rem, 1.6vw, 0.72rem); --an-fs-sm: clamp(0.72rem, 2vw, 0.85rem); --an-fs-md: clamp(0.85rem, 2.4vw, 1rem); --an-fs-lg: clamp(1rem, 3.2vw, 1.4rem); --an-fs-xl: clamp(1.4rem, 5vw, 2.2rem); /* — V3 root aliases (accessible outside theme selectors) — */ --an-surface-2: #04141F; --an-border-2: #14283A; --an-info: #22D3EE; --an-muted-2: #1F4D3E; --an-accent-ink: #04130B; /* — Bottoni: sistema token per stato (docs/plans/button-state-color-system) — formula sui token base per tema; override per-tema SOLO dove il contrasto lo impone (vedi blocco fog, verificato WCAG AA per-stato). */ --an-btn-primary-bg: var(--an-accent); --an-btn-primary-bg-hover: color-mix(in oklab, var(--an-accent) 88%, white); --an-btn-primary-bg-active: color-mix(in oklab, var(--an-accent) 82%, black); --an-btn-primary-ink: var(--an-accent-ink); --an-btn-primary-ring: color-mix(in oklab, var(--an-accent) 55%, transparent); --an-btn-working-bg: color-mix(in oklab, var(--an-accent) 74%, var(--an-surface-2)); --an-btn-working-ink: var(--an-accent-ink); --an-btn-disabled-bg: var(--an-surface-2); --an-btn-disabled-ink: var(--an-muted-2); --an-btn-disabled-bd: var(--an-border); /* danger = FILL PIENO (scelta Dario 2026-07-22): testo bianco su rosso scuro pieno → contrasto AA garantito per costruzione su tutti e 3 i temi, invece del soft (testo rosso su fondo rosso) che falliva ocean/danger a 3.97:1. */ --an-btn-danger-bg: color-mix(in oklab, var(--an-red) 76%, black); --an-btn-danger-bg-hover: color-mix(in oklab, var(--an-red) 84%, black); --an-btn-danger-bg-active: color-mix(in oklab, var(--an-red) 66%, black); --an-btn-danger-ink: #FFFFFF; --an-btn-danger-bd: var(--an-red); --an-btn-ghost-bg: var(--an-surface-2); --an-btn-ghost-ink: color-mix(in oklab, var(--an-muted) 60%, var(--an-text)); --an-btn-ghost-bd: var(--an-border); --an-btn-ghost-ink-hover: var(--an-text); --an-btn-ghost-bd-hover: color-mix(in oklab, var(--an-accent) 40%, var(--an-border)); --an-btn-success-ink: var(--an-state-ok); /* — Accent soft (fix ghost-var 2026-08-07): --an-accent-bg/--an-accent-bd erano USATI in cw-cockpit-lanes.css (SEGUI/Rispondi, chip attive) senza essere MAI definiti — stessa classe di bug dell'audit 2026-08-02 sopra: var() indefinita eredita silenziosamente, zero errore console, zero hit del gate anti-esadecimali (non sono hex). Fallback qui, override per-tema sotto dove l'intensità del mix cambia per leggibilità. */ --an-accent-bg: color-mix(in oklab, var(--an-accent) 12%, transparent); --an-accent-bd: color-mix(in oklab, var(--an-accent) 38%, transparent); } /* ══ Profondità/atmosfera (piano cockpit-anti-slop 2026-08-07) ══════════════ 4 token per "pelle" tattile: --an-glow-accent (box-shadow esterno contenuto su hover), --an-top-light (hairline inset in testa a card/lane, bevel a due strati), --an-atmo (wash radiale di fondo pagina, sentito non visto), --an-btn-primary-grad (fill top-lit dell'accent per la SOLA azione primaria di ogni card). Fallback :root = Ocean; ogni [data-an-theme] li ridefinisce — Fog (fondo chiaro) inverte --an-top-light (bianco→nero: un bordo bianco al 6% è invisibile su #DDE4E1) e abbassa --an-atmo (l'accent verde scuro satura più in fretta su un fondo chiaro che su uno scuro). */ :root { --an-glow-accent: color-mix(in oklab, var(--an-accent) 40%, transparent); --an-top-light: color-mix(in oklab, white 6%, transparent); --an-atmo: radial-gradient(ellipse 90% 60% at 50% -12%, color-mix(in oklab, var(--an-accent) 7%, transparent), transparent 65%); --an-btn-primary-grad: linear-gradient(180deg, color-mix(in oklab, white 16%, var(--an-accent)), var(--an-accent)); } /* ───────────────────────── TEMA · OCEAN (default) ───────────────────────── */ [data-an-theme="ocean"] { --an-bg: #000C14; --an-surface: #010F1E; --an-surface-2: #04141F; --an-border: #0B2A3D; --an-border-2: #14283A; --an-scrollbar-thumb: color-mix(in srgb, var(--an-muted) 45%, transparent); --an-scrollbar-thumb-hover: color-mix(in srgb, var(--an-muted) 72%, transparent); --an-scrollbar-track: transparent; --an-scrollbar-size: 8px; --an-text: #E8F7EE; --an-muted: #699187; --an-muted-2: #4E6B64; --an-accent: #34D399; --an-accent-ink:#04130B; --an-info: #22D3EE; --an-emerald: #34D399; --an-amber: #FBBF24; --an-amber-ink: #14100A; --an-red: #F43F5E; --an-red-ink: var(--an-bg); /* Ocean: ink scuro sul rosso chiaro — 5.4:1 */ --an-dot-glow-em: 0 0 8px #34D399; --an-dot-glow-cy: 0 0 8px #22D3EE; --an-fab-glow: 0 0 18px rgba(52,211,153,.55); --an-emerald-bg: rgba(52,211,153,.12); --an-amber-bg: rgba(251,191,36,.09); --an-amber-bd: rgba(251,191,36,.34); --an-red-bg: rgba(244,63,94,.10); --an-red-bd: rgba(244,63,94,.34); --an-active-bg: rgba(52,211,153,.14); /* — Session sheet mobile (S3.2a) · scrim, elevazione, badge info/agente — */ --an-scrim: rgba(0,0,0,.82); --an-elev-1: rgba(255,255,255,.04); --an-info-bg: rgba(34,211,238,.10); --an-info-bd: rgba(34,211,238,.28); --an-agent-bg: rgba(167,139,250,.12); --an-agent-bd: rgba(167,139,250,.28); /* — Lacy-router · verdetto input (verde=shell, magenta=ai, neutro=ambiguo) — */ --an-magenta: #F472B6; --an-magenta-bg: rgba(244,114,182,.12); --an-magenta-bd: rgba(244,114,182,.34); --an-kbd-route-shell: var(--an-emerald); --an-kbd-route-shell-bg: var(--an-emerald-bg); --an-kbd-route-ai: var(--an-magenta); --an-kbd-route-ai-bg: var(--an-magenta-bg); --an-kbd-route-neutral: var(--an-muted); --an-kbd-route-neutral-bg: transparent; /* Bottone Admin — rosso: accesso riservato, potere, rischio controllato */ --an-admin: #EF4444; --an-admin-strong: #DC2626; --an-admin-ink: #FFFFFF; --an-admin-soft: rgba(239,68,68,.12); --an-admin-ring: rgba(239,68,68,.30); --an-admin-shadow: rgba(239,68,68,.38); --an-admin-shadow-hi:rgba(239,68,68,.52); --an-admin-badge: #34D399; /* Bottone Demo — ciano profondo (−1 stop da cyan-300 → cyan-500) */ --an-demo: #06B6D4; --an-demo-strong: #0891B2; --an-demo-ink: #021820; --an-demo-soft: rgba(6,182,212,.12); --an-demo-ring: rgba(6,182,212,.30); --an-demo-shadow: rgba(6,182,212,.38); --an-demo-shadow-hi:rgba(6,182,212,.52); --an-demo-badge: #34D399; /* — Console MODE 2 · stati feed (alias ai semantici per-tema) — */ --an-status-done: var(--an-emerald); --an-status-wip: var(--an-info); --an-status-planned: var(--an-amber); --an-status-danger: var(--an-red); /* — Colori-stato LOGICI (handover moduli atomici 2026-07-03) — alias semantici sopra i token DEV (DEV autorevole). Definiti PER-TEMA per ricalcolarsi a ogni confine [data-an-theme] (es. Fleet forza Void sul proprio root). Vedi docs/plans/handover-atomics-merge_INDEV_2026-07-03_PLAN.md §F0. */ --an-st-you: var(--an-emerald); /* YOU / sessione corrente (verde brillante) */ --an-st-live: var(--an-emerald); /* attiva (verde) */ --an-st-idle: var(--an-muted); /* idle (grigio del tema) */ --an-st-cond: var(--an-amber); /* condizionale (ambra) */ --an-st-shared: var(--an-amber); /* shared ×N · rischio concorrenza (ambra) */ --an-st-agent: var(--an-state-agent); /* identità agente (viola) */ --an-agent-dead: #6B6480; /* guscio: agente morto, pane viva */ --an-agent-dead-bg: rgba(107,100,128,.14); --an-agent-dead-bd: rgba(107,100,128,.38); --an-st-kill: var(--an-red); /* kill / distruttivo (rosso) */ /* — Stati card Deck (T3, canale SEPARATO da data-type/spine) — alias sugli stessi semantici sopra: running/idle/awaiting-input riusano lo stato logico gia' tematizzato, dead e' la transizione d'uscita (.dead); usage e gate hanno detector reale in deck.py (_pane_usage_exhausted/ _pane_gate_blocked, piano out-of-usage U1). */ --an-card-run: var(--an-st-live); --an-card-idle: var(--an-st-idle); --an-card-await:var(--an-st-cond); --an-card-dead: var(--an-agent-dead); --an-st-usage: var(--an-chart-6); --an-st-gate: var(--an-amber); /* gate smart-compact bloccato (ambra: temporaneo, si risolve da solo) */ /* gate/keyboard token: derivati dalla palette VPS in Fase 6/7 (vedi HANDOVER) */ /* — Console Desktop 3-pannelli (Fase C, 2026-07-01) · scoped, non riusare altrove — */ --an-cdesk-text-soft: #7FA8A0; --an-cdesk-muted-3: #1F4D3E; --an-cdesk-accent-deep: #16A574; --an-cdesk-warn: #FBBF24; --an-cdesk-danger: #F87171; --an-cdesk-purple: #A78BFA; --an-cdesk-agent: var(--an-info); /* identità agente: ciano in Ocean */ --an-cdesk-taskhdr: #020D15; --an-cdesk-surface-3: #020A10; --an-cdesk-cockpit: linear-gradient(160deg, #021824, #010F1E); --an-cdesk-cockpit-bd: rgba(34,211,238,.22); --an-cdesk-tip-bg: #04141F; --an-cdesk-gate-bg: linear-gradient(160deg, rgba(251,191,36,.07), rgba(2,10,16,.4)); /* — Palette categorica grafici (anchora-charts.js · /help/ai-usage) — serie 1 = accent tema */ --an-chart-1: #34D399; --an-chart-2: #22D3EE; --an-chart-3: #A78BFA; --an-chart-4: #FBBF24; --an-chart-5: #F472B6; --an-chart-6: #60A5FA; --an-chart-grid: rgba(20,40,58,.9); --an-chart-fill: rgba(52,211,153,.14); --an-chart-tip-bg: #04141F; /* — Palette ANSI 16 colori (Deck T2c, preview terminale colorata) — hue ancorate ai token semantici (mai --an-accent: cambia identità per tema, un ANSI-verde non deve diventare viola in Void). I "bright" 9-14 sono tinte Tailwind-300 più chiare dei semantici, leggibili su bg scuro. */ --an-ansi-0: var(--an-border-2); --an-ansi-1: var(--an-red); --an-ansi-2: var(--an-emerald); --an-ansi-3: var(--an-amber); --an-ansi-4: var(--an-chart-6); --an-ansi-5: var(--an-magenta); --an-ansi-6: var(--an-info); --an-ansi-7: var(--an-muted); --an-ansi-8: var(--an-muted-2); --an-ansi-9: #FB7185; --an-ansi-10: #6EE7B7; --an-ansi-11: #FCD34D; --an-ansi-12: #93C5FD; --an-ansi-13: #F9A8D4; --an-ansi-14: #67E8F9; --an-ansi-15: var(--an-text); /* — Skeleton loader (SP1 nv-skel) — sweep transform/opacity, mai proprietà layout — */ --an-skel-base: #0B2A3D; --an-skel-hi: rgba(52,211,153,.18); /* — AI Usage page · card e calendar glaze (gradient backdrop) — */ --aiu-card-glaze: linear-gradient(180deg, rgba(2,20,34,.9), rgba(1,15,30,.95)); --aiu-cal-glaze: linear-gradient(180deg, rgba(2,21,36,.94), rgba(1,12,22,.97)); /* — Profondità/atmosfera (Ocean) — */ --an-accent-bg: color-mix(in oklab, var(--an-accent) 12%, transparent); --an-accent-bd: color-mix(in oklab, var(--an-accent) 38%, transparent); --an-glow-accent: color-mix(in oklab, var(--an-accent) 40%, transparent); --an-top-light: color-mix(in oklab, white 6%, transparent); --an-atmo: radial-gradient(ellipse 90% 60% at 50% -12%, color-mix(in oklab, var(--an-accent) 7%, transparent), transparent 65%); --an-btn-primary-grad: linear-gradient(180deg, color-mix(in oklab, white 16%, var(--an-accent)), var(--an-accent)); } /* ───────────────────────── TEMA · VOID (low-power) ──────────────────────── */ [data-an-theme="void"] { --an-bg: #000000; --an-surface: #050614; --an-surface-2: #080920; --an-border: #1A1E42; --an-border-2: #2D2F52; --an-scrollbar-thumb: color-mix(in srgb, var(--an-muted) 45%, transparent); --an-scrollbar-thumb-hover: color-mix(in srgb, var(--an-muted) 72%, transparent); --an-scrollbar-track: transparent; --an-scrollbar-size: 8px; --an-text: #CFD3E6; --an-muted: #7A7FAA; --an-muted-2: #4E5378; --an-accent: #8B5CF6; --an-accent-ink:#FFFFFF; --an-info: #22D3EE; --an-emerald: #34D399; --an-amber: #FBBF24; --an-amber-ink: #14100A; --an-red: #F43F5E; --an-red-ink: var(--an-bg); /* Void: ink scuro sul rosso chiaro */ --an-dot-glow-em: 0 0 8px #34D399; --an-dot-glow-cy: 0 0 8px #22D3EE; --an-fab-glow: 0 0 18px rgba(139,92,246,.55); --an-emerald-bg: rgba(52,211,153,.12); --an-amber-bg: rgba(251,191,36,.09); --an-amber-bd: rgba(251,191,36,.34); --an-red-bg: rgba(244,63,94,.10); --an-red-bd: rgba(244,63,94,.34); --an-active-bg: rgba(139,92,246,.14); /* — Session sheet mobile (S3.2a) · scrim, elevazione, badge info/agente — */ --an-scrim: rgba(0,0,0,.85); --an-elev-1: rgba(255,255,255,.05); --an-info-bg: rgba(34,211,238,.10); --an-info-bd: rgba(34,211,238,.28); --an-agent-bg: rgba(167,139,250,.12); --an-agent-bd: rgba(167,139,250,.28); /* — Lacy-router · verdetto input (verde=shell, magenta=ai, neutro=ambiguo) — */ --an-magenta: #FB5BA6; --an-magenta-bg: rgba(251,91,166,.12); --an-magenta-bd: rgba(251,91,166,.34); --an-kbd-route-shell: var(--an-emerald); --an-kbd-route-shell-bg: var(--an-emerald-bg); --an-kbd-route-ai: var(--an-magenta); --an-kbd-route-ai-bg: var(--an-magenta-bg); --an-kbd-route-neutral: var(--an-muted); --an-kbd-route-neutral-bg: transparent; /* Bottone Admin — rosso (badge ciano in tema Void) */ --an-admin: #EF4444; --an-admin-strong: #DC2626; --an-admin-ink: #FFFFFF; --an-admin-soft: rgba(239,68,68,.12); --an-admin-ring: rgba(239,68,68,.30); --an-admin-shadow: rgba(239,68,68,.38); --an-admin-shadow-hi:rgba(239,68,68,.52); --an-admin-badge: #22D3EE; /* Bottone Demo — ciano profondo (−1 stop da cyan-300 → cyan-500) */ --an-demo: #06B6D4; --an-demo-strong: #0891B2; --an-demo-ink: #021820; --an-demo-soft: rgba(6,182,212,.12); --an-demo-ring: rgba(6,182,212,.30); --an-demo-shadow: rgba(6,182,212,.38); --an-demo-shadow-hi:rgba(6,182,212,.52); --an-demo-badge: #34D399; /* — Console MODE 2 · stati feed (alias ai semantici per-tema) — */ --an-status-done: var(--an-emerald); --an-status-wip: var(--an-info); --an-status-planned: var(--an-amber); --an-status-danger: var(--an-red); /* — Colori-stato LOGICI (handover moduli atomici 2026-07-03) — alias semantici sopra i token DEV (DEV autorevole). Definiti PER-TEMA per ricalcolarsi a ogni confine [data-an-theme] (es. Fleet forza Void sul proprio root). Vedi docs/plans/handover-atomics-merge_INDEV_2026-07-03_PLAN.md §F0. */ --an-st-you: var(--an-emerald); /* YOU / sessione corrente (verde brillante) */ --an-st-live: var(--an-emerald); /* attiva (verde) */ --an-st-idle: var(--an-muted); /* idle (grigio del tema) */ --an-st-cond: var(--an-amber); /* condizionale (ambra) */ --an-st-shared: var(--an-amber); /* shared ×N · rischio concorrenza (ambra) */ --an-st-agent: var(--an-state-agent); /* identità agente (viola) */ --an-agent-dead: #6F6A90; /* guscio: agente morto, pane viva */ --an-agent-dead-bg: rgba(111,106,144,.16); --an-agent-dead-bd: rgba(111,106,144,.42); --an-st-kill: var(--an-red); /* kill / distruttivo (rosso) */ /* — Stati card Deck (T3, canale SEPARATO da data-type/spine) — alias sugli stessi semantici sopra: running/idle/awaiting-input riusano lo stato logico gia' tematizzato, dead e' la transizione d'uscita (.dead); usage e gate hanno detector reale in deck.py (_pane_usage_exhausted/ _pane_gate_blocked, piano out-of-usage U1). */ --an-card-run: var(--an-st-live); --an-card-idle: var(--an-st-idle); --an-card-await:var(--an-st-cond); --an-card-dead: var(--an-agent-dead); --an-st-usage: var(--an-chart-6); --an-st-gate: var(--an-amber); /* gate smart-compact bloccato (ambra: temporaneo, si risolve da solo) */ /* gate/keyboard token: derivati dalla palette VPS in Fase 6/7 (vedi HANDOVER) */ /* — Console Desktop 3-pannelli (Fase C, 2026-07-01) · scoped, non riusare altrove — */ --an-cdesk-text-soft: #A9A7C8; --an-cdesk-muted-3: #4A4A6A; --an-cdesk-accent-deep: #16A574; --an-cdesk-warn: #FBBF24; --an-cdesk-danger: #F87171; --an-cdesk-purple: #A78BFA; --an-cdesk-agent: var(--an-purple); /* identità agente: viola in Void */ --an-cdesk-taskhdr: #070814; --an-cdesk-surface-3: #070814; --an-cdesk-cockpit: linear-gradient(160deg, #16132E, #0A0B1E); --an-cdesk-cockpit-bd: rgba(167,139,250,.25); --an-cdesk-tip-bg: #0C0B20; --an-cdesk-gate-bg: linear-gradient(160deg, rgba(251,191,36,.07), rgba(6,4,15,.4)); /* — Palette categorica grafici (anchora-charts.js · /help/ai-usage) — serie 1 = accent tema */ --an-chart-1: #A78BFA; --an-chart-2: #22D3EE; --an-chart-3: #F472B6; --an-chart-4: #FBBF24; --an-chart-5: #34D399; --an-chart-6: #818CF8; --an-chart-grid: rgba(45,47,82,.9); --an-chart-fill: rgba(167,139,250,.14); --an-chart-tip-bg: #0B0D18; /* — Palette ANSI 16 colori (Deck T2c) — vedi nota Ocean; stesse tinte bright (bg scuro comune), gli 0-8/15 ereditano i semantici di Void. */ --an-ansi-0: var(--an-border-2); --an-ansi-1: var(--an-red); --an-ansi-2: var(--an-emerald); --an-ansi-3: var(--an-amber); --an-ansi-4: var(--an-chart-6); --an-ansi-5: var(--an-magenta); --an-ansi-6: var(--an-info); --an-ansi-7: var(--an-muted); --an-ansi-8: var(--an-muted-2); --an-ansi-9: #FB7185; --an-ansi-10: #6EE7B7; --an-ansi-11: #FCD34D; --an-ansi-12: #93C5FD; --an-ansi-13: #F9A8D4; --an-ansi-14: #67E8F9; --an-ansi-15: var(--an-text); /* — Skeleton loader (SP1 nv-skel) — sweep transform/opacity, mai proprietà layout — */ --an-skel-base: #1A1E42; --an-skel-hi: rgba(139,92,246,.20); /* — AI Usage page · card e calendar glaze (gradient backdrop) — */ --aiu-card-glaze: linear-gradient(180deg, rgba(2,20,34,.9), rgba(1,15,30,.95)); --aiu-cal-glaze: linear-gradient(180deg, rgba(2,21,36,.94), rgba(1,12,22,.97)); /* — Override contrasto bottoni (S1-fix): Void ha accent-ink bianco come Fog, quindi "schiarire con white" abbassa il contrasto del testo bianco. Gate WCAG AA (test_button_tokens): senza override void/primary/hover=3.44, void/danger/hover+active=4.28 — sotto 4.5:1. Scuriti/schiariti per AA. — */ --an-btn-primary-bg-hover: color-mix(in oklab, var(--an-accent) 82%, black); /* accent viola #8B5CF6 col testo bianco = 4.23:1 (sotto AA): scurito per idle */ --an-btn-primary-bg: color-mix(in oklab, var(--an-accent) 86%, black); /* — Profondità/atmosfera (Void) — glow leggermente più forte: il viola su fondo #000000 puro ha meno "aria" attorno di un verde su blu Ocean. — */ --an-accent-bg: color-mix(in oklab, var(--an-accent) 14%, transparent); --an-accent-bd: color-mix(in oklab, var(--an-accent) 40%, transparent); --an-glow-accent: color-mix(in oklab, var(--an-accent) 45%, transparent); --an-top-light: color-mix(in oklab, white 5%, transparent); --an-atmo: radial-gradient(ellipse 90% 60% at 50% -12%, color-mix(in oklab, var(--an-accent) 8%, transparent), transparent 65%); --an-btn-primary-grad: linear-gradient(180deg, color-mix(in oklab, white 14%, var(--an-accent)), var(--an-accent)); } /* ─────────────────────── TEMA · FOG / NAUTICO CHIARO (giorno) ────────────── */ [data-an-theme="fog"] { --an-bg: #CDD6D2; --an-surface: #DDE4E1; --an-surface-2: #E8EDEB; --an-border: #B0BEB9; --an-border-2: #C2CCC7; /* Fog è il tema chiaro: --an-muted (#4E5E59) è scuro, quindi il 45% dà un thumb grigio-verde leggibile su bg chiaro — stessa formula degli altri temi. */ --an-scrollbar-thumb: color-mix(in srgb, var(--an-muted) 45%, transparent); --an-scrollbar-thumb-hover: color-mix(in srgb, var(--an-muted) 72%, transparent); --an-scrollbar-track: transparent; --an-scrollbar-size: 8px; --an-text: #14201C; --an-muted: #4E5E59; --an-muted-2: #6B7D77; --an-accent: #0B6E52; --an-accent-ink:#FFFFFF; --an-info: #0A6A77; /* a11y audit B1 (2026-07-14): --an-state-ok non era mai tematizzato per Fog → ereditava l'Ocean #34D399 (~1.4:1 su bg chiaro, badge "attiva/ok" invisibile). #096747 verificato 4.65:1 su --an-bg fog, 5.34:1 su --an-surface. */ --an-state-ok: #096747; --an-sess-prod: #C43434; --an-shadow-pane: 0 8px 20px rgba(20, 32, 28, .14); --an-shadow-bar: 0 -8px 20px rgba(20, 32, 28, .10); --an-shadow-menu: 0 18px 40px rgba(20, 32, 28, .20); --an-emerald: #0E9F6E; --an-amber: #B5740C; /* Fog è l'unico tema a fondo chiaro, e lì un solo ambra non può servire due requisiti diversi: WCAG chiede 3:1 per bordi e indicatori, 4.5:1 per il testo. --an-amber su #E8EDEB misura 3.25:1 — basta per un bordo o un dot, NON per una riga di testo. Questo è l'ambra da usare quando l'ambra è testo: 5.10:1 misurato. Sugli altri due temi (fondo scuro) il problema non esiste e --an-amber va bene per entrambi gli usi. */ --an-amber-text: #8A5807; --an-amber-ink: #14100A; --an-red: #CC3048; --an-red-ink: #FFFFFF; /* Fog: BIANCO sul rosso scuro — 5.14:1 (B4.3) */ --an-dot-glow-em: 0 0 0 3px rgba(14,159,110,.2); --an-dot-glow-cy: 0 0 0 3px rgba(14,143,168,.2); --an-fab-glow: 0 6px 14px rgba(14,159,110,.35); --an-emerald-bg: rgba(14,159,110,.11); --an-amber-bg: rgba(181,116,12,.10); --an-amber-bd: rgba(181,116,12,.34); --an-red-bg: rgba(204,48,72,.10); --an-red-bd: rgba(204,48,72,.34); --an-active-bg: rgba(11,110,82,.14); /* — Session sheet mobile (S3.2a) · scrim, elevazione, badge info/agente — */ --an-scrim: rgba(20,32,28,.55); --an-elev-1: rgba(20,32,28,.05); --an-info-bg: rgba(10,106,119,.10); --an-info-bd: rgba(10,106,119,.30); --an-agent-bg: rgba(109,91,181,.12); --an-agent-bd: rgba(109,91,181,.30); /* — Lacy-router · verdetto input (verde=shell, magenta=ai, neutro=ambiguo) — */ --an-magenta: #B0186E; --an-magenta-bg: rgba(176,24,110,.12); --an-magenta-bd: rgba(176,24,110,.34); --an-kbd-route-shell: var(--an-emerald); --an-kbd-route-shell-bg: var(--an-emerald-bg); --an-kbd-route-ai: var(--an-magenta); --an-kbd-route-ai-bg: var(--an-magenta-bg); --an-kbd-route-neutral: var(--an-muted); --an-kbd-route-neutral-bg: transparent; /* Bottone Admin — rosso scurito per contrasto su canvas chiaro */ --an-admin: #DC2626; --an-admin-strong: #B91C1C; --an-admin-ink: #FFFFFF; --an-admin-soft: rgba(220,38,38,.10); --an-admin-ring: rgba(220,38,38,.28); --an-admin-shadow: rgba(220,38,38,.35); --an-admin-shadow-hi:rgba(220,38,38,.48); --an-admin-badge: #1B8F5E; /* Bottone Demo — ciano scurito per contrasto su canvas chiaro */ --an-demo: #0A6A77; --an-demo-strong: #074F58; --an-demo-ink: #FFFFFF; --an-demo-soft: rgba(10,106,119,.10); --an-demo-ring: rgba(10,106,119,.30); --an-demo-shadow: rgba(10,106,119,.40); --an-demo-shadow-hi:rgba(10,106,119,.55); --an-demo-badge: #1B8F5E; /* — Console MODE 2 · stati feed (alias ai semantici per-tema) — */ --an-status-done: var(--an-emerald); --an-status-wip: var(--an-info); --an-status-planned: var(--an-amber); --an-status-danger: var(--an-red); /* — Colori-stato LOGICI (handover moduli atomici 2026-07-03) — alias semantici sopra i token DEV (DEV autorevole). Definiti PER-TEMA per ricalcolarsi a ogni confine [data-an-theme] (es. Fleet forza Void sul proprio root). Vedi docs/plans/handover-atomics-merge_INDEV_2026-07-03_PLAN.md §F0. */ --an-st-you: var(--an-emerald); /* YOU / sessione corrente (verde brillante) */ --an-st-live: var(--an-emerald); /* attiva (verde) */ --an-st-idle: var(--an-muted); /* idle (grigio del tema) */ --an-st-cond: var(--an-amber); /* condizionale (ambra) */ --an-st-shared: var(--an-amber); /* shared ×N · rischio concorrenza (ambra) */ --an-st-agent: var(--an-state-agent); /* identità agente (viola) */ --an-agent-dead: #565073; /* guscio: agente morto, pane viva */ --an-agent-dead-bg: rgba(86,80,115,.10); --an-agent-dead-bd: rgba(86,80,115,.40); --an-st-kill: var(--an-red); /* kill / distruttivo (rosso) */ /* — Stati card Deck (T3, canale SEPARATO da data-type/spine) — alias sugli stessi semantici sopra: running/idle/awaiting-input riusano lo stato logico gia' tematizzato, dead e' la transizione d'uscita (.dead); usage e gate hanno detector reale in deck.py (_pane_usage_exhausted/ _pane_gate_blocked, piano out-of-usage U1). */ --an-card-run: var(--an-st-live); --an-card-idle: var(--an-st-idle); --an-card-await:var(--an-st-cond); --an-card-dead: var(--an-agent-dead); --an-st-usage: var(--an-chart-6); --an-st-gate: var(--an-amber); /* gate smart-compact bloccato (ambra: temporaneo, si risolve da solo) */ /* gate/keyboard token: derivati dalla palette VPS in Fase 6/7 (vedi HANDOVER) */ /* — Console Desktop 3-pannelli (Fase C, 2026-07-01) · scoped, non riusare altrove — */ --an-cdesk-text-soft: #4B5560; --an-cdesk-muted-3: #9AA4AB; --an-cdesk-accent-deep: #13744B; --an-cdesk-warn: #B45309; --an-cdesk-danger: #DC2626; --an-cdesk-purple: #6D5BB5; --an-cdesk-agent: var(--an-info); /* identità agente: teal in Fog */ --an-cdesk-taskhdr: #F4F7F8; --an-cdesk-surface-3: #F1F4F5; --an-cdesk-cockpit: linear-gradient(160deg, #E8F3F5, #F6F8F9); --an-cdesk-cockpit-bd: rgba(14,116,144,.25); --an-cdesk-tip-bg: #FFFFFF; --an-cdesk-gate-bg: linear-gradient(160deg, rgba(180,83,9,.08), rgba(246,248,249,.6)); /* — Palette categorica grafici (anchora-charts.js · /help/ai-usage) — scurita per fondo chiaro */ --an-chart-1: #0B6E52; --an-chart-2: #0E7490; --an-chart-3: #6D28D9; --an-chart-4: #B45309; --an-chart-5: #BE185D; --an-chart-6: #1D4ED8; --an-chart-grid: rgba(176,190,185,.9); --an-chart-fill: rgba(11,110,82,.12); --an-chart-tip-bg: #E8EDEB; /* — Skeleton loader (SP1 nv-skel) — sweep transform/opacity, mai proprietà layout — */ --an-skel-base: #B0BEB9; --an-skel-hi: rgba(255,255,255,.55); /* — AI Usage page · card e calendar glaze (gradient backdrop) — */ --aiu-card-glaze: linear-gradient(180deg, var(--an-surface), var(--an-surface-2)); --aiu-cal-glaze: linear-gradient(180deg, var(--an-surface), var(--an-surface-2)); /* — Command Keyboard v3 · palette Fog dedicata (piano keyboard-contrast-fog-and-paste-key) — bridge [data-theme="grigio"] #sk-kbd-v3 in shell-keyboard.css rimappa --v3-* qui. Ogni trio verificato WCAG 2.2: testo ≥4.5:1 (SC 1.4.3), bordo ≥3:1 (SC 1.4.11) sul proprio sfondo tasto; i 9 colori testo sono tutti distinti (nessun collasso). */ --an-kbd-v3-panel: #E8EDEB; --an-kbd-v3-panel-2: #DDE4E1; --an-kbd-v3-edge: #B0BEB9; --an-kbd-v3-edge-soft: #C2CCC7; --an-kbd-v3-esc: #B3123B; --an-kbd-v3-esc-bg: #F6DCE3; --an-kbd-v3-esc-bd: #EA3362; --an-kbd-v3-tab: #0E6B78; --an-kbd-v3-tab-bg: #DCEEF0; --an-kbd-v3-tab-bd: #1390A2; --an-kbd-v3-arrow: #1B4F9C; --an-kbd-v3-arrow-bg: #DCE6F7; --an-kbd-v3-arrow-bd: #3F7FDE; --an-kbd-v3-mod: #7C22C4; --an-kbd-v3-mod-bg: #EFE2F9; --an-kbd-v3-mod-bd: #A85DE3; --an-kbd-v3-chord: #B23A15; --an-kbd-v3-chord-bg: #F7E1D6; --an-kbd-v3-chord-bd: #E44A1B; --an-kbd-v3-fn: #8A5A00; --an-kbd-v3-fn-bg: #F5E9C8; --an-kbd-v3-fn-bd: #B47500; --an-kbd-v3-nav: #066B49; --an-kbd-v3-nav-bg: #DBEFE8; --an-kbd-v3-nav-bd: #089566; --an-kbd-v3-sym: #3F4B52; --an-kbd-v3-sym-bg: #E4E9E8; --an-kbd-v3-sym-bd: #6F8491; --an-kbd-v3-paste: #3730A9; --an-kbd-v3-paste-bg: #E3E1F7; --an-kbd-v3-paste-bd: #7872D7; /* — Bottoni · override Fog (verificato con contrast_check.py, WCAG AA 4.5:1) — primary-bg-hover NON serve override: mix(accent 88%, white) resta 4.79:1 su white ink (l'ipotesi "schiarire rompe il contrasto" non si conferma). working-bg invece fallisce: mix(accent 74%, surface-2) su Fog dà #538E77/white = 3.82:1. Fix: sostituita la parte chiara (surface-2, molto chiara su Fog) con black, stessa % accent → #044734/white = 10.74:1. danger-bg/danger-bg-hover falliscono contro l'ink rosso pieno (3.74:1 e 3.28:1: più rosso nel mix avvicina bg e ink, riduce il contrasto invece di aumentarlo). Fix: un solo override su danger-ink (scurito, non sul bg, per coprire idle+hover con una formula sola) → idle 6.47:1, hover 5.68:1. disabled resta 3.68:1 senza override: WCAG SC 1.4.3 esenta esplicitamente il testo di componenti UI inattivi dal requisito di contrasto minimo. */ --an-btn-working-bg: color-mix(in oklab, var(--an-accent) 74%, black); /* — Profondità/atmosfera (Fog) — TARATE AL CONTRARIO: fondo chiaro, quindi --an-top-light diventa un filo SCURO (bianco al 6% è invisibile su #DDE4E1) e --an-atmo scende di intensità (il verde scuro dell'accent sporca un fondo chiaro molto prima del verde brillante di Ocean su blu scurissimo). Il gradiente bottone resta chiaro-in-alto: l'ink è bianco anche qui, la lettura non si inverte. — */ --an-accent-bg: color-mix(in oklab, var(--an-accent) 10%, transparent); --an-accent-bd: color-mix(in oklab, var(--an-accent) 32%, transparent); --an-glow-accent: color-mix(in oklab, var(--an-accent) 28%, transparent); --an-top-light: color-mix(in oklab, black 8%, transparent); --an-atmo: radial-gradient(ellipse 90% 60% at 50% -12%, color-mix(in oklab, var(--an-accent) 5%, transparent), transparent 65%); --an-btn-primary-grad: linear-gradient(180deg, color-mix(in oklab, white 14%, var(--an-accent)), var(--an-accent)); } /* ══ Motion foundation (piano run-timeline-impl U6, spec 2026-07-22 §7) ══ Curve spring via linear() — Tier 1 vibecurb awwwards-motion (.agents/ skills/): fisica reale con overshoot che cubic-bezier non può esprimere. Theme-independent: vivono in :root, nessun blocco per-tema. I fallback cubic-bezier sono per i consumer che vogliono un solo token. */ :root { --an-ease-spring-snappy: linear( 0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067 22.5%, 1.089 26.0%, 1.079 30.3%, 1.049 36.0%, 1.024 42.6%, 1.011 50.3%, 1.004 59.2%, 1.001 69.3%, 1); --an-ease-spring-smooth: linear( 0, 0.004, 0.016 2.3%, 0.063 4.7%, 0.141 7.2%, 0.25 9.9%, 0.601 16.5%, 0.815 21.0%, 0.929 25.2%, 0.987 29.0%, 1.025 33.5%, 1.042 38.0%, 1.04 43.5%, 1.027 50.0%, 1.013 57.5%, 1.005 67.0%, 1.001 79.0%, 1); --an-ease-spring-bouncy: linear( 0, 0.014, 0.055 1.8%, 0.218 3.7%, 0.867 8.5%, 1.085 10.7%, 1.212 12.9%, 1.264 15.0%, 1.262 17.0%, 1.217 19.5%, 1.098 24.0%, 1.035 28.5%, 0.993 33.0%, 0.981 38.0%, 0.988 45.0%, 0.998 55.0%, 1.001 68.0%, 1); /* --an-ease MANCAVA pur essendo invocato da 38 punti del prodotto: 23 con fallback `ease`, 6 con `ease-out`, e 9 SENZA fallback — quelli producevano una dichiarazione invalida, silenziosamente. Definito col valore che la maggioranza già otteneva dal fallback: ripara i 9 rotti senza cambiare il feel di ciò che oggi funziona. Chi vuole la curva espressiva del prodotto usa --an-ease-out-expo, che è lì sotto e non è un sinonimo. */ --an-ease: ease; --an-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --an-ease-glide: cubic-bezier(0.22, 1, 0.36, 1); --an-ease-breath: cubic-bezier(0.37, 0, 0.63, 1); --an-ease-trace: cubic-bezier(0.4, 0, 0.2, 1); --an-dur-micro: 120ms; --an-dur-state: 220ms; --an-dur-reveal: 300ms; --an-dur-trace: 420ms; --an-dur-settle: 520ms; --an-dur-breath: 2600ms; --an-stagger-step: 40ms; } /* ── Token invocati dal prodotto e mai definiti (2026-08-08) ──────────────── Stessa famiglia di difetto di --an-ease qui sopra, moltiplicata per 34: un `var(--x)` non definito e SENZA fallback non eredita e non avvisa — rende invalida l'intera dichiarazione a tempo di calcolo, in silenzio. Il bordo sparisce, il raggio torna squadrato, il testo attenuato torna pieno, e nessuno vede un errore da nessuna parte. Misurato prima di scrivere: 309 token --an-* invocati in app/templates e app/static, 274 definiti. Dei 35 mancanti, 4 sono prefissi composti a runtime (--an-chart-, --an-font-, --an-kbd-route-, --an-space-) e non sono token; 19 hanno un fallback nel var() e quindi funzionano — quelli NON sono definiti qui apposta, perche' definirli cambierebbe il rendering di ciò che oggi rende bene, e il fallback dichiara gia' l'intento di chi l'ha scritto. Restano i 34 di sotto, tutti usati nudi, tutti rotti. CRITERIO: nessun valore inventato. Ognuno è derivato dal token gemello già presente nel design system, guardando la proprietà CSS in cui è usato — così i tre temi (ocean/void/fog) seguono da soli, senza triplicare le righe. Dove il gemello non esisteva (scale numeriche, ombre, opacità) il valore continua la scala già definita sopra, non ne apre una nuova. */ :root { /* Alias di nomi paralleli: stessa cosa, secondo nome entrato nell'uso */ --an-bd: var(--an-border); --an-bg-base: var(--an-bg); --an-bg-light: var(--an-surface); --an-text-primary: var(--an-text); --an-accent-glow: var(--an-glow-accent); --an-agent: var(--an-state-agent); --an-state-fail: var(--an-state-danger); --an-green: var(--an-state-ok); --an-blue: var(--an-accent-opt-cyan); --an-font-display: var(--an-font-title); --an-font-heading: var(--an-font-title); --an-radius: var(--an-radius-md); /* Testo attenuato: il sistema ne dichiara UN livello (--an-muted), non due. 'secondary' e 'muted' puntano quindi allo stesso token invece di inventare una gerarchia che il design non ha mai definito. */ --an-text-secondary: var(--an-muted); --an-text-muted: var(--an-muted); /* Trasparenze: la percentuale è nel nome, il colore resta quello del tema */ --an-accent-30: color-mix(in oklab, var(--an-accent) 30%, transparent); --an-border-30: color-mix(in oklab, var(--an-border) 30%, transparent); --an-error-20: color-mix(in oklab, var(--an-error) 20%, transparent); --an-emerald-bd: color-mix(in oklab, var(--an-emerald) 32%, transparent); --an-bg-overlay: color-mix(in oklab, var(--an-bg) 72%, transparent); --an-zebra: color-mix(in oklab, var(--an-text) 4%, transparent); /* Terzo gradino di superficie e bordo: continua surface/surface-2 e border/border-2 nella stessa direzione, verso il testo */ --an-surface-3: color-mix(in oklab, var(--an-surface-2) 88%, var(--an-text)); --an-border-3: color-mix(in oklab, var(--an-border-2) 85%, var(--an-text)); /* Scale numeriche: proseguono quelle sopra, non ne aprono una seconda. fs: 12/13/14/16/20/26 esistono — qui i gradini mancanti. space: 1..6 = 4/8/12/16/24/32 — 7 e 8 continuano il passo. */ --an-fs-18: 18px; --an-fs-24: 24px; --an-fs-28: 28px; --an-fs-32: 32px; --an-space-7: 40px; --an-space-8: 48px; --an-radius-xs: 5px; /* Ombre e glow: --an-shadow-lift sta fra pane (.35) e menu (.55), cioè l'elevazione intermedia che mancava. --an-dot-glow è la forma generica di --an-dot-glow-em/-cy, sull'accento del tema invece che su un verde fisso. */ --an-shadow-lift: 0 12px 32px rgba(0, 0, 0, .45); --an-dot-glow: 0 0 8px var(--an-accent); --an-grain-op: 0.035; /* Nav: fra la barra (10) e i menu (40) */ --an-z-nav: 20; /* Il suffisso '-local' dice che doveva essere definito nel componente e non lo è mai stato: due usi nudi, quindi oggi il sigillo non ha sfondo. */ --an-fable-seal-gradient-local: linear-gradient(135deg, var(--an-accent) 0%, var(--an-accent-opt-violet) 100%); }