/* ============================================================================ CRAnotify — Product Design System (application skin). Source of truth for everything visual in app.cranotify.eu. Ported from the PDS reference export (src/components/product/**, src/data/pds/**): Inter + IBM Plex Mono, cold working grey with white panels, 0–2 px radius, 1 px borders, 36–40 px rows, semantic compliance colours kept strictly separate from the brand blue. Rules that must not be broken: · brand blue = interaction, selection, navigation. NEVER "compliant". · every state carries icon + label + colour, never colour alone. · elevation only on overlays (menus, toasts, modals, drawers). · legacy class names (.card .btn .inp .stat …) are kept as PDS aliases so no page loses styling during the migration. ========================================================================== */ @font-face{font-family:'Inter var';font-style:normal;font-weight:100 900;font-display:swap;src:url('/static/fonts/inter-var.woff2') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/ibm-plex-mono-400.woff2') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/ibm-plex-mono-500.woff2') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/ibm-plex-mono-600.woff2') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/ibm-plex-mono-700.woff2') format('woff2')} /* ---------------------------------------------------------------- tokens -- */ :root{ /* brand — interaction only */ --blue:#1638A0; --blue-ink:#0D2670; --blue-bg:#E8ECF7; --blue-line:#BCC8E4; /* application neutrals */ --bg:#F2F4F7; --panel:#FFFFFF; --surface2:#F8F9FB; --line:#DCE0E6; --line-soft:#E7EAEF; --line-strong:#A5ACB8; --ink:#101317; --muted:#464D59; --faint:#767D8A; --faint2:#AEB4BE; /* semantic — compliance states only */ --info:#1F5F8B; --info-bg:#EBF3F8; --info-line:#B9D3E4; --green:#16653F; --green-ink:#124D30; --green-bg:#E9F3EE; --green-line:#B3D6C4; --amber:#7A5C00; --amber-ink:#7A5C00; --amber-bg:#F8F3E2; --amber-line:#E0D0A0; --warn:#A65B12; --warn-bg:#FBF1E7; --warn-line:#E7CBAB; --crit:#96161C; --crit-ink:#7C1116; --crit-bg:#F9EAEB; --crit-line:#E4B4B7; --red:#B3261E; --red-ink:#8E1E17; --red-bg:#FBECEB; --red-line:#EEC0BC; --neutral:#5B6470; --neutral-bg:#F1F3F5; --neutral-line:#D2D7DE; /* navigation surface */ --nav:#101317; --nav-hover:#1C2027; --nav-panel:#1A1E25; --nav-line:#282D35; --nav-txt:#B9BFC9; --nav-mut:#868D99; /* type */ --sans:'Inter var',system-ui,-apple-system,sans-serif; --disp:var(--sans); --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace; /* geometry */ --r:2px; --r0:0px; --ctl-sm:28px; --ctl:36px; --ctl-lg:44px; --el1:0 2px 8px rgba(16,19,23,.12); --el2:0 8px 24px rgba(16,19,23,.18); } /* ------------------------------------------------------------------ tema -- */ /* Il tema scuro vive qui, come selettore [data-theme="dark"] sull': la fonte di verità è l'attributo, non un