/* Quindi.Excalidraw design tokens — dark chrome, green accent, white canvas (Excalidraw native). */ :root { /* Brand */ --quindi-green: #00D68F; --quindi-green-hover: #00B879; --quindi-green-soft: rgba(0, 214, 143, 0.14); --quindi-amber: #FFB020; --quindi-amber-soft: rgba(255, 176, 32, 0.14); --quindi-red: #E5484D; --quindi-red-text: #F08080; /* accessible destructive text on dark surfaces */ /* Chrome (dark) — layered surfaces, stessa palette neutra */ --quindi-bg: #0A0A0A; /* page bg */ --quindi-surface-0: #0E0E0E; /* recessed areas (rails, wells) */ --quindi-surface: #141414; /* panels */ --quindi-surface-2: #1C1C1C; /* hover surfaces */ --quindi-surface-3: #242424; /* elevated (popovers, menus) */ --quindi-card-top: #181818; /* card gradient — top-lit */ --quindi-card-bottom: #121212; /* card gradient — bottom */ --quindi-text: #F4F6F9; --quindi-text-soft: #8B95A5; --quindi-border: rgba(255, 255, 255, 0.08); --quindi-border-soft: rgba(255, 255, 255, 0.04); --quindi-on-accent: #050505; /* text on accent fills */ /* Excalidraw canvas (immutable white) */ --canvas-bg: #FFFFFF; /* Semantic — favour these in new code */ --accent: var(--quindi-green); --accent-hover: var(--quindi-green-hover); --accent-soft: var(--quindi-green-soft); --scrim: rgba(0, 0, 0, 0.6); /* Mobile / safe areas — chrome offsets that clear notches & home indicators. Needs viewport-fit=cover on the ; resolve to 0 on inset-free devices, so they're safe to add unconditionally. */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); /* /shared section — aliases of brand accent, isolated so the page can be re-tinted without chasing hardcoded values across app.css. */ --share-accent: var(--accent); --share-accent-soft: var(--quindi-green-soft); --share-accent-strong: var(--accent-hover); /* Liquid Glass — soft glass on floating chrome (topbar, editor chrome, modals, toasts). Flat surfaces elsewhere; `.glass*` components opt into blur via the @supports pattern. */ --glass-bg: rgba(255, 255, 255, 0.04); --glass-bg-strong: rgba(255, 255, 255, 0.07); --glass-bg-dark: rgba(0, 0, 0, 0.55); --glass-tint: rgba(20, 20, 20, 0.72); --glass-border: rgba(255, 255, 255, 0.08); --glass-border-bright: rgba(255, 255, 255, 0.12); --glass-border-dark: rgba(0, 0, 0, 0.4); --glass-blur: 18px; --glass-saturate: 140%; --glass-shadow: 0 10px 32px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04); --glass-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.03); /* Elevation scale — soft shadows that replace hairlines on raised surfaces */ --elev-1: 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05); --elev-2: 0 1px 2px rgba(0, 0, 0, 0.6), 0 10px 24px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06); --elev-3: 0 10px 32px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08); /* Compatibility shims — old blue/navy refs keep working but resolve to neutral/green so we don't have to chase every hardcoded reference in v1. Removed in next iteration. */ --quindi-navy: #0A0A0A; --quindi-navy-soft: #1C1C1C; --quindi-blue: var(--quindi-green); --quindi-blue-soft: var(--quindi-green-soft); /* Compact control radius: deliberately squarer than cards and panels. */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; /* Type scale */ --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-lg: 16px; --text-xl: 20px; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; --font-hand: "Excalifont", "Virgil", "Cascadia Code", ui-monospace, monospace; /* Sketch-native shell — the hand-drawn language of the Excalidraw canvas extended to the app chrome. Irregular radii read as pencilled corners; two variants (a/b) alternate across grid siblings so cards don't look stamped from the same mould. NOT applied to: editor chrome, admin, modals, tables — those stay flat and precise. */ --sketch-radius-a: 8px 10px 7px 9px / 10px 7px 9px 8px; --sketch-radius-b: 10px 7px 9px 8px / 7px 9px 8px 10px; --sketch-radius-sm: 6px 8px 5px 7px / 7px 5px 8px 6px; --sketch-border: rgba(255, 255, 255, 0.14); --sketch-border-w: 1.5px; /* The "paper": a faint dot grid (Excalidraw's canvas signature) layered over the ambient backdrop on content pages. */ --dot-grid: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1.5px); --dot-grid-size: 26px; /* Green brush-stroke underline for section titles — a wavy SVG stroke, repeated on x. */ --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='6' viewBox='0 0 40 6'%3E%3Cpath d='M0 3 Q 5 0.5, 10 3 T 20 3 T 30 3 T 40 3' fill='none' stroke='%2300D68F' stroke-width='2' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter/inter-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter/inter-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter/inter-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Excalifont"; font-style: normal; font-weight: 400; font-display: swap; /* The bundle copy is hashed and long-cached, but wwwroot/lib/excalidraw is built, not committed: without the local fallback the hand font silently degrades to monospace wherever the bundle is absent (dev runs, tests). */ src: url("../lib/excalidraw/fonts/Excalifont/Excalifont-Regular-a88b72a24fb54c9f94e3b5fdaa7481c9.woff2") format("woff2"), url("../fonts/excalifont.woff2") format("woff2"); } @font-face { font-family: "Virgil"; font-style: normal; font-weight: 400; font-display: swap; src: url("../lib/excalidraw/fonts/Virgil/Virgil-Regular.woff2") format("woff2"); }