/* ========================================================= Besian Shala — Design System Editorial: serif/Geist type (Tipografia tweak), kept light. "Old money" palette — warm off-white canvas, one deep-navy signature accent (brighter on dark), and matte near-black dark surfaces (#0C0C0B), never pure black. Color stays a condiment. ========================================================= */ :root { /* ----- Near-white neutrals — a clean, almost-white canvas with the faintest warm undertone so it never reads clinical. Cards are pure white; text is a near-black with a hair of warmth. ----- */ --bg: #FBF9F4; /* warm off-white canvas (Tweaks: Sfondo) */ --fg: #18191B; /* near-black text */ --muted: #6B6C70; /* neutral stone gray */ --surface: #F2F0EA; /* subtle warm card gray */ --card: #FFFFFF; /* pure white for cards */ --card-glass-hover: hsla(0, 0%, 100%, 0.8); --border: #E8E5DF; /* warm hairline border */ --focus-ring: var(--accent); --card-inner-glow: inset 0 1px 0 0 rgba(255, 255, 255, 0.6); --ink: #12151C; /* navy-black — dark surface tone (selection, chips) */ /* ===== ONE SIGNATURE ACCENT + TWO SEMANTIC STATUS COLORS ===== "Old money" model. The page is warm black/white; color appears ONLY on small interactive + status points (~10%): link hover & arrow, primary CTA, active nav underline, active filter chip, status dots, focus ring, the 01/02 section numerals. Never on section backgrounds, cards, titles, body text, or main borders. One signature accent (deep navy), with a darker hover, plus two functional status hues used only where they signal real state. */ --accent-navy: #1B2A4A; /* deep navy — the signature accent */ --accent-navy-hover: #142038; /* darker on hover */ --accent-sig: var(--accent-navy); /* signature accent — deep navy (lighter gradation on dark) */ --accent-sig-hover: var(--accent-navy-hover); --accent: var(--accent-sig); /* fills (button bg, etc.) */ --accent-hover: var(--accent-sig-hover); --accent-fg: var(--accent); /* foreground accent (text/thin lines) — lifted on dark, see style.css */ --status-online: #34C759; /* green — Online */ --status-soon: #FF9F0A; /* amber — Coming soon */ --cat-bar: 3px; /* neutral top-rule thickness (Tweaks) */ /* Legacy per-category hue tokens collapse to the one signature via --accent-sig (NOT --accent — that would cycle with the per-card style="--accent: var(--accent-X)" overrides). Zero markup changes. */ --accent-red: var(--accent-sig); --accent-green: var(--accent-sig); --accent-blue: var(--accent-sig); /* ----- Type — Geist Sans is the principal family (titoli + testi), Geist Mono for numbers/labels/details. Driven by the Tipografia tweak via three knobs: --font-display (titoli), --font-logo (wordmark), --font-sans (testo). Defaults below = "Geist" set; the panel loads the web fonts and can swap to the serif editorial set. System fallbacks keep it readable before the web font lands. */ --font-display: "Geist", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-sans: "Geist", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-logo: "Geist", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-serif: "Newsreader", Georgia, serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --shadow-panel: 0 14px 44px hsla(240, 10%, 10%, 0.04), 0 2px 8px hsla(240, 10%, 10%, 0.02); --shadow-cinematic: 0 30px 80px hsla(240, 10%, 10%, 0.08), 0 4px 16px hsla(240, 10%, 10%, 0.03); --radius: 14px; --maxw: 1080px; /* ----- Portfolio compatibility (--bs-* mapped to Toggle) ----- */ --bs-bg: var(--bg); --bs-bg-raised: var(--card); --bs-bg-subtle: var(--surface); --bs-bg-muted: var(--surface); --bs-fg: var(--fg); --bs-fg-secondary: var(--muted); --bs-fg-tertiary: var(--muted); --bs-border: var(--border); --bs-border-subtle: var(--border); --bs-white: var(--card); --bs-black: var(--fg); --bs-border-width: 1px; --bs-border-width-thin: 1px; --bs-radius-xs: 6px; --bs-radius-sm: 10px; --bs-radius-md: 14px; --bs-radius-lg: 20px; --bs-font-sans: var(--font-sans); --bs-font-display: var(--font-display); --bs-font-mono: var(--font-mono); --bs-text-2xs: 9.8px; --bs-text-xs: 10.6px; --bs-text-sm: 11.9px; --bs-text-md: 13.6px; --bs-text-lg: 15.3px; --bs-text-xl: 18.7px; --bs-text-2xl: 23.8px; --bs-text-3xl: 30.6px; --bs-text-4xl: 42.5px; --bs-text-5xl: 74.8px; /* Legacy grayscale (for sub-elements still referencing the old scale) */ --bs-200: var(--border); --bs-400: var(--muted); --bs-500: var(--muted); --bs-600: var(--muted); --bs-800: var(--fg); --bs-bg-inverse: var(--fg); --bs-border-strong: var(--fg); /* Layout gutters */ --bs-gutter: 24px; --bs-margin-desktop: 32px; --bs-margin-tablet: 24px; --bs-margin-mobile: 20px; --bs-shadow-md: var(--shadow-panel); --bs-shadow-lg: var(--shadow-cinematic); --bs-z-overlay: 50; --bs-z-toast: 60; --bs-space-32: 128px; --bs-space-1: 4px; --bs-space-2: 6px; --bs-space-3: 8px; --bs-space-4: 10px; --bs-space-5: 12px; --bs-space-6: 16px; --bs-space-7: 20px; --bs-space-8: 24px; --bs-space-9: 28px; --bs-space-10: 32px; --bs-space-12: 40px; --bs-space-14: 48px; --bs-space-16: 56px; --bs-space-20: 72px; --bs-space-24: 96px; --bs-ease: cubic-bezier(0.16, 1, 0.3, 1); --bs-duration-fast: 150ms; --bs-duration-base: 250ms; --bs-duration-slow: 550ms; } /* ----- Dark theme tokens ----- Matte-black dark — a true deep near-black (#0C0C0B) with only a whisper of warmth so it never reads clinical or cold. No sheen: surfaces lift in small, matte steps and depth comes from value contrast, not glow. Applies on OS dark preference (unless a manual light theme is set) and on an explicit [data-theme="dark"] toggle. Both branches carry identical tokens. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --bg: #0C0C0B; /* matte black canvas */ --fg: #ECEAE4; /* soft off-white text */ --muted: #8F8B83; /* muted warm gray */ --surface: #161614; /* raised matte container */ --card: #1A1A17; /* card — one matte step above canvas */ --card-glass-hover: hsla(48, 6%, 11%, 0.82); --border: #2B2A26; /* matte hairline */ /* Accent lifts to a luminous navy on dark — the deep #191970 reads muddy on matte black, so dark mode brightens it (and hover goes lighter, not darker). Cascades to --accent via --accent-navy. */ --accent-navy: #00004D; /* luminous navy on dark */ --accent-navy-hover: #000070; /* lighter on hover */ --focus-ring: var(--accent); --card-inner-glow: inset 0 1px 0 0 rgba(255, 255, 255, 0.04); --ink: #ECEAE4; --shadow-panel: 0 14px 44px hsla(0, 0%, 0%, 0.5), 0 2px 8px hsla(0, 0%, 0%, 0.3); --shadow-cinematic: 0 30px 80px hsla(0, 0%, 0%, 0.66), 0 4px 16px hsla(0, 0%, 0%, 0.38); color-scheme: dark; } } html[data-theme="dark"] { --bg: #0C0C0B; --fg: #ECEAE4; --muted: #8F8B83; --surface: #161614; --card: #1A1A17; --card-glass-hover: hsla(48, 6%, 11%, 0.82); --border: #2B2A26; --accent-navy: #00004D; /* luminous navy on dark (matches @media block) */ --accent-navy-hover: #000070; --focus-ring: var(--accent); --card-inner-glow: inset 0 1px 0 0 rgba(255, 255, 255, 0.04); --ink: #ECEAE4; --shadow-panel: 0 14px 44px hsla(0, 0%, 0%, 0.5), 0 2px 8px hsla(0, 0%, 0%, 0.3); --shadow-cinematic: 0 30px 80px hsla(0, 0%, 0%, 0.66), 0 4px 16px hsla(0, 0%, 0%, 0.38); color-scheme: dark; }