/* ============================================================
* AreaTeam v3 — Design Tokens
* ============================================================
* Copia autoritativa da _local/design_handoff_areateam_v3/tokens/tokens.css
* NON modificare valori senza prima allinearsi con il designer.
*
* All 4 themes as CSS custom properties.
* Apply a theme by setting [data-theme="v1"|"v2"|"v3"|"v4"]
* on the element. The active theme overrides the base
* tokens; everything in the app reads from `var(--at-*)`.
*
* Theme behavior flags (read with attribute selectors):
* [data-theme="v3"] → uppercase labels, hazard accents
* [data-theme="v4"] → dark canvas, glow on primary
*
* Header style (V3 + V4 use a dark sidebar/topbar):
* [data-theme="v3"], [data-theme="v4"] {
* --at-header-bg, --at-header-fg, --at-header-border
* }
*
* Font loading strategy:
* In production self-host the fonts of the variant(s) the
* organization commits to ship. The @import below loads ALL
* 7 families used across the 4 themes — fine for prototypes,
* bad for production CLS / TTFB.
*
* If shipping all 4 themes, split into 4 conditional imports
* loaded only when the matching [data-theme] is applied
* (font-display: optional + preload the active variant).
*
* ============================================================ */
/* TEMP — single Google Fonts call. Replace with self-hosted @font-face
blocks in production. See MIGRATION.md § Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {
/* ── Spacing scale ─────────────────────────────────────── */
--at-space-1: 4px;
--at-space-2: 8px;
--at-space-3: 12px;
--at-space-4: 16px;
--at-space-5: 20px;
--at-space-6: 24px;
--at-space-7: 28px;
--at-space-8: 32px;
--at-space-10: 40px;
/* ── Default = V1 fallback if [data-theme] not set ───── */
--at-font-sans: "Inter", -apple-system, system-ui, sans-serif;
--at-font-mono: "IBM Plex Mono", ui-monospace, monospace;
--at-radius: 6px;
--at-radius-sm: 3px;
--at-radius-lg: 8px;
/* surfaces */
--at-bg: #f5f7fb;
--at-surface: #ffffff;
--at-surface-alt: #f0f3f9;
--at-surface-hi: #e7ecf5;
/* text */
--at-text: #0d1530;
--at-text-muted: #5b6478;
--at-text-subtle: #8a93a8;
/* borders */
--at-border: #dde2ec;
--at-border-strong: #c4cad8;
/* brand */
--at-primary: #1d3a8a;
--at-primary-hover: #16307a;
--at-primary-soft: #e6ecf7;
--at-primary-fg: #ffffff;
--at-primary-glow: transparent;
/* status */
--at-success: #15803d;
--at-success-soft: #dcfce7;
--at-warning: #b45309;
--at-warning-soft: #fef3c7;
--at-danger: #b91c1c;
--at-danger-soft: #fee2e2;
--at-info: #1d4ed8;
--at-info-soft: #dbeafe;
--at-accent: #ce2b37;
--at-accent-secondary: #009246;
/* shadows */
--at-shadow-sm: 0 1px 2px rgba(13, 21, 48, 0.06);
--at-shadow-md: 0 4px 12px rgba(13, 21, 48, 0.08);
--at-shadow-lg: 0 24px 56px rgba(13, 21, 48, 0.18);
/* header / sidebar style:
V1, V2 → light sidebar (default). V3, V4 → dark sidebar (override below). */
--at-header-bg: var(--at-surface);
--at-header-fg: var(--at-text);
--at-header-muted: var(--at-text-muted);
--at-header-border: var(--at-border);
/* typography behavior */
--at-text-transform: none;
--at-letter-spacing-loose: 0;
--at-font-weight-bold: 600;
--at-font-weight-display: 700;
}
/* ============================================================
* V1 — Industrial Navy
* Corporate enterprise. Inter + Plex Mono. Italian tricolor accent.
* ============================================================ */
[data-theme="v1"] {
--at-font-sans: "Inter", -apple-system, system-ui, sans-serif;
--at-font-mono: "IBM Plex Mono", ui-monospace, monospace;
--at-radius: 6px;
--at-radius-sm: 3px;
--at-radius-lg: 8px;
--at-bg: #f5f7fb;
--at-surface: #ffffff;
--at-surface-alt: #f0f3f9;
--at-surface-hi: #e7ecf5;
--at-text: #0d1530;
--at-text-muted: #5b6478;
--at-text-subtle: #8a93a8;
--at-border: #dde2ec;
--at-border-strong: #c4cad8;
--at-primary: #1d3a8a;
--at-primary-hover: #16307a;
--at-primary-soft: #e6ecf7;
--at-primary-fg: #ffffff;
--at-primary-glow: transparent;
--at-success: #15803d;
--at-success-soft: #dcfce7;
--at-warning: #b45309;
--at-warning-soft: #fef3c7;
--at-danger: #b91c1c;
--at-danger-soft: #fee2e2;
--at-info: #1d4ed8;
--at-info-soft: #dbeafe;
--at-accent: #ce2b37;
--at-accent-secondary: #009246;
--at-shadow-sm: 0 1px 2px rgba(13, 21, 48, 0.06);
--at-shadow-md: 0 4px 12px rgba(13, 21, 48, 0.08);
--at-shadow-lg: 0 24px 56px rgba(13, 21, 48, 0.18);
--at-text-transform: none;
--at-letter-spacing-loose: 0;
--at-font-weight-bold: 600;
--at-font-weight-display: 700;
}
/* ============================================================
* V2 — Smart Workspace
* Modern Linear-style. Geist + Geist Mono. Soft shadows, big radius.
* ============================================================ */
[data-theme="v2"] {
--at-font-sans: "Geist", "Inter", system-ui, sans-serif;
--at-font-mono: "Geist Mono", "IBM Plex Mono", ui-monospace, monospace;
--at-radius: 12px;
--at-radius-sm: 8px;
--at-radius-lg: 16px;
--at-bg: #fafaf9;
--at-surface: #ffffff;
--at-surface-alt: #f5f5f4;
--at-surface-hi: #eeece8;
--at-text: #1c1917;
--at-text-muted: #78716c;
--at-text-subtle: #a8a29e;
--at-border: #eeece8;
--at-border-strong: #d6d3d1;
--at-primary: #3358ef;
--at-primary-hover: #2a47d4;
--at-primary-soft: #eef1ff;
--at-primary-fg: #ffffff;
--at-primary-glow: transparent;
--at-success: #16a34a;
--at-success-soft: #dcfce7;
--at-warning: #ea580c;
--at-warning-soft: #ffedd5;
--at-danger: #dc2626;
--at-danger-soft: #fee2e2;
--at-info: #0284c7;
--at-info-soft: #e0f2fe;
--at-accent: #3358ef;
--at-accent-secondary: #3358ef;
--at-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
--at-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
--at-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.16);
--at-text-transform: none;
--at-letter-spacing-loose: 0;
--at-font-weight-bold: 600;
--at-font-weight-display: 600;
}
/* ============================================================
* V3 — Factory Floor
* Industrial bold. Manrope + JetBrains Mono. Hazard accents.
* UPPERCASE labels everywhere. Tight 4px radius.
* ============================================================ */
[data-theme="v3"] {
--at-font-sans: "Manrope", "Inter", system-ui, sans-serif;
--at-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
--at-radius: 4px;
--at-radius-sm: 2px;
--at-radius-lg: 6px;
--at-bg: #eef0f4;
--at-surface: #ffffff;
--at-surface-alt: #f7f8fb;
--at-surface-hi: #e3e7ee;
--at-text: #0b1220;
--at-text-muted: #475569;
--at-text-subtle: #94a3b8;
--at-border: #d6dae3;
--at-border-strong: #b8bfcc;
--at-primary: #0e4cd6;
--at-primary-hover: #0b3eb1;
--at-primary-soft: #e3edff;
--at-primary-fg: #ffffff;
--at-primary-glow: transparent;
--at-success: #059669;
--at-success-soft: #d1fae5;
--at-warning: #d97706;
--at-warning-soft: #fef3c7;
--at-danger: #dc2626;
--at-danger-soft: #fee2e2;
--at-info: #0891b2;
--at-info-soft: #cffafe;
--at-accent: #f59e0b; /* SIGNAL AMBER */
--at-accent-secondary: #b45309; /* deep amber for text on amber bg */
--at-shadow-sm: 0 1px 0 rgba(11, 18, 32, 0.06);
--at-shadow-md: 0 4px 0 rgba(11, 18, 32, 0.05);
--at-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.4);
/* DARK header/sidebar */
--at-header-bg: #0b1220;
--at-header-fg: #ffffff;
--at-header-muted: rgba(255, 255, 255, 0.55);
--at-header-border: rgba(255, 255, 255, 0.10);
/* behavior */
--at-text-transform: uppercase;
--at-letter-spacing-loose: 0.04em;
--at-font-weight-bold: 700;
--at-font-weight-display: 800;
}
/* V3-specific hazard stripe utility */
[data-theme="v3"] .at-hazard-stripe {
background: repeating-linear-gradient(135deg,
var(--at-accent) 0 10px,
var(--at-text) 10px 20px);
}
/* ============================================================
* V4 — Control Room
* Dark-first operations console. Space Grotesk + JetBrains Mono.
* Mint live-data accent with glow. For NOC / sala controllo.
* ============================================================ */
[data-theme="v4"] {
--at-font-sans: "Space Grotesk", "Inter", system-ui, sans-serif;
--at-font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
--at-radius: 5px;
--at-radius-sm: 3px;
--at-radius-lg: 6px;
--at-bg: #080c14;
--at-surface: #0f1421;
--at-surface-alt: #161c2c;
--at-surface-hi: #1d2438;
--at-text: #e6ecf7;
--at-text-muted: #8590a8;
--at-text-subtle: #525c75;
--at-border: #1e2638;
--at-border-strong: #2c3650;
--at-primary: #38f0c2;
--at-primary-hover: #15b893;
--at-primary-soft: rgba(56, 240, 194, 0.12);
--at-primary-fg: #04140f;
--at-primary-glow: rgba(56, 240, 194, 0.35);
--at-success: #38f0c2;
--at-success-soft: rgba(56, 240, 194, 0.10);
--at-warning: #ffaa55;
--at-warning-soft: rgba(255, 170, 85, 0.10);
--at-danger: #ff6680;
--at-danger-soft: rgba(255, 102, 128, 0.10);
--at-info: #60a5fa;
--at-info-soft: rgba(96, 165, 250, 0.10);
--at-accent: #c490ff; /* PURPLE ALERT */
--at-accent-secondary: #c490ff;
--at-shadow-sm: 0 0 0 1px rgba(56, 240, 194, 0.10);
--at-shadow-md: 0 0 24px rgba(56, 240, 194, 0.15);
--at-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 60px rgba(56, 240, 194, 0.10);
/* DARK header/sidebar (same surface as cards in V4) */
--at-header-bg: var(--at-surface);
--at-header-fg: var(--at-text);
--at-header-muted: var(--at-text-muted);
--at-header-border: var(--at-border);
--at-text-transform: none;
--at-letter-spacing-loose: 0;
--at-font-weight-bold: 600;
--at-font-weight-display: 700;
color-scheme: dark;
}
/* V4-specific dot-grid background utility (for modals/backdrops) */
[data-theme="v4"] .at-dot-grid {
background-image: radial-gradient(circle at 1px 1px, var(--at-border) 1px, transparent 0);
background-size: 24px 24px;
}
/* V4-specific glow utility for live indicators */
[data-theme="v4"] .at-live-glow {
box-shadow: 0 0 8px var(--at-primary);
}
/* ============================================================
* Behavioral utilities (theme-aware)
* Apply these classes/attributes; they read from the active theme.
* ============================================================ */
/* ============================================================
* CRITICAL DISTINCTION — .at-label vs .at-data
* ============================================================
* V3 turns labels UPPERCASE via --at-text-transform.
* NEVER apply text-transform: var(--at-text-transform) directly
* to user-generated content (customer names, project titles,
* descriptions, search input values).
*
* Rule:
* .at-label → OK to uppercase (UI chrome, column headers, KPI label, kicker)
* .at-data → ALWAYS text-transform: none (DB-sourced strings)
*
* Example HTML:
* Cliente
← "CLIENTE" in V3
* Marcegaglia Carbon S.r.l.
← always as-is
* ============================================================ */
/* Label-style text: uppercase in V3, normal elsewhere */
.at-label {
font-family: var(--at-font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase; /* labels are always uppercase by design */
color: var(--at-text-muted);
}
/* User-generated content: never uppercase, never letter-spaced.
Apply this class explicitly to any DB-sourced string. */
.at-data {
text-transform: none !important;
letter-spacing: normal !important;
}
/* Section title casing: uppercase only in V3 */
.at-title-cased {
text-transform: var(--at-text-transform);
letter-spacing: var(--at-letter-spacing-loose);
font-weight: var(--at-font-weight-display);
}
/* Pulse animation for live indicators */
@keyframes at-pulse {
0%, 100% { opacity: 1 }
50% { opacity: 0.5 }
}
.at-pulse { animation: at-pulse 1.6s ease-in-out infinite; }
/* Tabular numerics — apply to anything with numbers in tables/KPIs */
.at-tabular { font-variant-numeric: tabular-nums; }
/* ============================================================
* V4 layering caveat
* ============================================================
* --at-primary-soft in V4 is rgba(...0.12) — semitransparent.
* Backgrounds painted with it pick up whatever sits beneath.
* Always set it on a child that has --at-surface (or --at-bg)
* as its parent. Never use it on a floating element with
* `position: fixed` over arbitrary content.
*
* If you need an opaque variant, hard-code:
* background: #131e2d; // approximation on V4 surface
* or composite explicitly with the underlying surface color.
* ============================================================ */