/* ============================================================================ ARTYS DESIGN SYSTEM - Design tokens Colour + type + spacing + radius + shadow tokens as CSS custom properties. No build step: link this file in and use the variables anywhere. Source of truth: Artys Design System (Claude Design). Product-agnostic. ========================================================================== */ :root{ /* ========================================================================= 1. BRAND CORE ====================================================================== */ --brand-azure: #0090DA; /* Logo mark + wordmark colour */ --brand-azure-dark: #007BBA; --brand-primary: #5B8DA6; /* INDRA UI primary (teal-blue) */ --brand-primary-dark: #1E5E77; /* dark variant / active */ --brand-black: #212529; /* logo on light / max-contrast ink */ /* ========================================================================= 2. PRIMARY SCALE — teal-blue (tints 50–400, base 500, shades 600–900) ====================================================================== */ --primary-50: #EEF4F7; --primary-100: #D8E6EE; --primary-200: #B4CCD9; --primary-300: #8FB1C3; --primary-400: #729DB2; --primary-500: #5B8DA6; /* BASE — brand-primary */ --primary-500-rgb: 91, 141, 166; /* for rgba() alpha tints of primary-500 */ --primary-600: #497A93; /* hover */ --primary-700: #1E5E77; /* active / dark variant */ --primary-800: #184E63; --primary-900: #133D4E; /* ========================================================================= 3. SECONDARY / ACCENT SCALE — brand azure (links, highlights, focus) ====================================================================== */ --azure-50: #E5F4FC; --azure-100: #C2E6F7; --azure-200: #87CDEF; --azure-300: #46B2E6; --azure-400: #149EDF; --azure-500: #0090DA; /* BASE — brand azure */ --azure-600: #007BBA; --azure-700: #00669A; --azure-800: #03506F; --azure-900: #053D54; /* ========================================================================= 4. NEUTRAL / SLATE-GREY SCALE ====================================================================== */ --grey-0: #FFFFFF; --grey-50: #F8F9FA; /* app background */ --grey-100: #F1F3F5; /* subtle fill / striped rows */ --grey-200: #E9ECEF; /* hover fill / dividers */ --grey-300: #DEE2E6; /* BASE border */ --grey-400: #CED4DA; /* input border / disabled border */ --grey-500: #ADB5BD; /* placeholder / disabled text */ --grey-600: #868E96; /* muted text / icons */ --grey-700: #6C757D; /* uppercase labels (slate-grey) */ --grey-800: #495057; /* secondary body text */ --grey-900: #343A40; /* strong text */ --grey-950: #212529; /* primary text / ink */ /* ========================================================================= 5. SEMANTIC STATUS (monitoring — each as bg-tint / base / fg-on-tint) All base-on-white & fg-on-tint pairs meet WCAG AA (>=4.5 normal text) ====================================================================== */ --success-50: #E8F6EE; --success-100: #C9EAD6; --success: #2E9E5B; /* GOOD / nominal */ --success-600: #248049; --success-700: #1C6539; /* text on success-50 */ --warning-50: #FDF3E0; --warning-100: #FAE3BB; --warning: #E8A317; /* WARNING / attention */ --warning-600: #B97F08; /* AA text on white */ --warning-700: #8F6206; /* text on warning-50 */ --danger-50: #FBEAE9; --danger-100: #F5CBC8; --danger: #D64545; /* ALERT / critical */ --danger-600: #B5302F; --danger-700: #8F2422; /* text on danger-50 */ --info-50: #E5F4FC; --info-100: #C2E6F7; --info: #0090DA; /* INFO (brand azure) */ --info-600: #007BBA; --info-700: #00669A; /* text on info-50 */ /* Light-cyan "live/auto" pill (from INDRA timestamp chip) */ --live-bg: #CFF4FC; --live-fg: #055160; /* INDRA alarm-level icon colours (attenzione / pre-allarme / allarme). Custom tokens preserving the exact legacy values used in maps.js. */ --alarm-1: #f1c40f; /* level 1 — attenzione */ --alarm-2: #e67e22; /* level 2 — pre-allarme */ --alarm-3: #e74c3c; /* level 3 — allarme */ /* ========================================================================= 6. SEMANTIC ROLES (foreground / background / surface / border / nav) ====================================================================== */ /* Foreground (text) */ --fg-1: var(--grey-950); /* primary text contrast 15.9:1 on bg */ --fg-2: var(--grey-800); /* secondary text contrast 8.6:1 */ --fg-3: var(--grey-700); /* muted / labels contrast 5.6:1 */ --fg-4: var(--grey-500); /* placeholder/disabled */ --fg-on-accent: #FFFFFF; /* text on primary/azure/status fills */ --fg-link: var(--azure-600); --fg-link-hover:var(--azure-700); /* Background (page) */ --bg-1: var(--grey-50); /* app canvas */ --bg-2: var(--grey-100); /* sunken / inset areas */ /* Surface (cards, panels, menus) */ --surface-1: var(--grey-0); /* cards, panels, navbar, dropdowns */ --surface-2: var(--grey-50); /* nested surface / table header */ --surface-hover: var(--grey-100); --surface-active:var(--grey-200); --surface-inverse: var(--grey-950); /* Border */ --border-1: var(--grey-300); /* default hairline */ --border-2: var(--grey-400); /* input / stronger */ --border-strong: var(--grey-600); --border-focus: var(--azure-500); /* Navigation / menu */ --nav-bg: var(--grey-0); /* top navbar surface */ --nav-fg: var(--primary-500);/* nav item text (teal-blue) */ --nav-fg-hover: var(--primary-700); --nav-fg-active: var(--primary-700); --nav-border: var(--grey-300); --sidebar-bg: var(--grey-0); --sidebar-label: var(--grey-700); /* uppercase section labels */ --sidebar-hover: var(--grey-100); /* Focus ring */ --focus-ring: 0 0 0 3px rgba(0,144,218,.30); /* ========================================================================= 7. DATA-VIZ — categorical (colourblind-safe) + sequential overlays ====================================================================== */ --chart-1: #1E5E77; /* deep teal-blue */ --chart-2: #0090DA; /* azure */ --chart-3: #E8A317; /* amber */ --chart-4: #2E9E5B; /* green */ --chart-5: #D6453D; /* red */ --chart-6: #7B5EA7; /* violet */ --chart-7: #00A6A6; /* teal-cyan */ --chart-8: #9C6B3F; /* ochre-brown */ /* Sequential intensity ramp (e.g. rainfall / AQI overlays) — low→high */ --seq-1: #E9ECEF; --seq-2: #9FD8E6; --seq-3: #3FB1C9; --seq-4: #2E9E5B; --seq-5: #E8A317; --seq-6: #E8730C; --seq-7: #D6453D; --seq-8: #7B2D8E; /* ========================================================================= 8. TYPOGRAPHY ====================================================================== */ --font-sans: "Raleway", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, Menlo, Consolas, monospace; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Type scale (px). Data-dense console → base 14px. */ --fs-display: 48px; --lh-display: 1.08; --ls-display: -0.02em; --fs-h1: 32px; --lh-h1: 1.18; --ls-h1: -0.01em; --fs-h2: 26px; --lh-h2: 1.22; --ls-h2: -0.005em; --fs-h3: 20px; --lh-h3: 1.30; --ls-h3: 0; --fs-h4: 17px; --lh-h4: 1.40; --ls-h4: 0; --fs-body-lg: 16px; --lh-body-lg: 1.55; --ls-body-lg: 0; --fs-body: 14px; --lh-body: 1.55; --ls-body: 0; /* BASE */ --fs-body-sm: 13px; --lh-body-sm: 1.50; --ls-body-sm: 0; --fs-caption: 12px; --lh-caption: 1.40; --ls-caption: 0.01em; --fs-label: 11px; --lh-label: 1.35; --ls-label: 0.08em; /* UPPER */ /* ========================================================================= 9. SPACING — 4 / 8 base ====================================================================== */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ========================================================================= 10. RADIUS ====================================================================== */ --radius-xs: 2px; --radius-sm: 4px; /* inputs, buttons, chips */ --radius-md: 6px; /* cards, panels */ --radius-lg: 8px; /* modals, large panels */ --radius-pill: 999px; /* toggles, status pills */ /* ========================================================================= 11. ELEVATION / SHADOWS — subtle, cool-tinted ====================================================================== */ --shadow-xs: 0 1px 2px rgba(30,94,119,.06); --shadow-sm: 0 1px 3px rgba(30,94,119,.10), 0 1px 2px rgba(30,94,119,.06); --shadow-md: 0 4px 12px rgba(30,94,119,.10), 0 2px 4px rgba(30,94,119,.06); --shadow-lg: 0 12px 28px rgba(30,94,119,.14), 0 4px 8px rgba(30,94,119,.06); --shadow-focus: var(--focus-ring); /* ========================================================================= 12. MOTION ====================================================================== */ --ease-standard: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(0,0,.2,1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; /* Layout */ --navbar-h: 56px; --sidebar-w: 320px; }