/* * Design tokens for the hub and all tools. * * The brand tokens (colors, palettes, type, shape, spacing, motion) and the @font-face * rules are generated from brand/tokens.json by `npm run sync:shared`, and are identical * to the portfolio's. Change them there, never inside the generated blocks. Tokens that * only the static site uses are at the bottom of this file. * * Colors use light-dark(): the first value is the light theme, the second the dark theme. * The theme follows the OS unless forces one, and * switches the palette (both set by /shared/prefs.js). * * Tools opt in by linking /shared/tokens.css before their own stylesheet, and may * override any token in their own :root. */ /* BEGIN GENERATED fonts: Self-hosted brand fonts (OFL): latin plus a Serbian-only subset, generated by `npm run sync:shared`. */ @font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900; src: url("/shared/fonts/unbounded-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 200 900; src: url("/shared/fonts/unbounded-sr-wght-normal.woff2") format("woff2"); unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+0160-0161, U+017D-017E; } @font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/shared/fonts/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/shared/fonts/inter-sr-wght-normal.woff2") format("woff2"); unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+0160-0161, U+017D-017E; } @font-face { font-family: "Geist Mono"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/shared/fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Geist Mono"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/shared/fonts/geist-mono-sr-wght-normal.woff2") format("woff2"); unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+0160-0161, U+017D-017E; } @font-face { font-family: "Bricolage Condensed"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("/shared/fonts/bricolage-condensed-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Bricolage Condensed"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("/shared/fonts/bricolage-condensed-sr-wght-normal.woff2") format("woff2"); unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+0160-0161, U+017D-017E; } /* END GENERATED fonts */ /* BEGIN GENERATED brand: Brand tokens, generated from brand/tokens.json by `npm run sync:shared`. Edit that file, not this block. */ :root { color-scheme: light dark; /* Neutrals */ --bg: light-dark(#f6f5fa, #08070d); --surface: light-dark(#ffffff, #12111a); --surface-2: light-dark(#efedf7, #1a1826); --border: light-dark(rgba(20, 16, 40, 0.11), rgba(255, 255, 255, 0.09)); --text: light-dark(#15131f, #eeecf6); --text-muted: light-dark(#5b586e, #a19eb6); /* Palette: violet (default). --accent is for fills, borders and glows; */ /* --accent-text for accent-colored text; --on-accent for text on an --accent fill. */ --accent: light-dark(#6a3ee0, #7c4dff); --accent-hover: light-dark(#5a2fcf, #6a37f5); --accent-text: light-dark(#6234d6, #b49cff); --on-accent: #ffffff; --secondary: light-dark(#d63d86, #ff5fa2); --accent-rgb: 124, 77, 255; --secondary-rgb: 255, 95, 162; /* Every palette's accent, for the switcher's swatches (whatever palette is active) */ --swatch-violet: light-dark(#6a3ee0, #7c4dff); --swatch-crimson: light-dark(#b3142f, #c8193c); --swatch-emerald: light-dark(#047857, #0a7d5c); --swatch-amber: light-dark(#e8940f, #f5a524); /* Status */ --success: light-dark(#047857, #34d399); --warning: light-dark(#9a5705, #fbbf24); --danger: light-dark(#b42318, #f87171); /* Derived from the colors above */ --accent-soft: light-dark(rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.15)); --glow: light-dark(rgba(var(--accent-rgb), 0.3), rgba(var(--accent-rgb), 0.55)); --success-soft: color-mix(in srgb, var(--success) 14%, transparent); --warning-soft: color-mix(in srgb, var(--warning) 14%, transparent); --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent); /* Type */ --font-display: "Unbounded", "Arial Black", system-ui, sans-serif; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-size-sm: 0.8rem; --font-size-base: 1rem; --font-size-lg: 1.25rem; --font-size-xl: 1.563rem; --font-size-2xl: 1.953rem; --font-size-3xl: 2.441rem; --font-size-4xl: 3.052rem; --font-size-5xl: 3.815rem; --tracking-display: -0.03em; --display-case: none; /* Shape and depth */ --radius-sm: 10px; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; --shadow: 0 4px 24px light-dark(rgba(20, 16, 40, 0.08), rgba(0, 0, 0, 0.35)); --shadow-glow: 0 10px 30px -10px var(--glow); --shadow-glow-strong: 0 14px 40px -10px var(--glow); --shadow-card: 0 30px 80px -30px var(--glow); /* Controls */ --button-font: var(--font-sans); --button-case: none; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* Motion */ --duration-fast: 160ms; --duration: 260ms; --duration-slow: 640ms; --stagger: 70ms; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* Palettes: /shared/prefs.js sets from the visitor's choice. */ :root[data-palette="crimson"] { --accent: light-dark(#b3142f, #c8193c); --accent-hover: light-dark(#9c0f28, #b01232); --accent-text: light-dark(#ae1230, #ff7088); --on-accent: #ffffff; --secondary: light-dark(#d9700f, #ff9a3c); --accent-rgb: 200, 25, 60; --secondary-rgb: 255, 154, 60; } :root[data-palette="emerald"] { --accent: light-dark(#047857, #0a7d5c); --accent-hover: light-dark(#036349, #08694d); --accent-text: light-dark(#04704f, #3ddba3); --on-accent: #ffffff; --secondary: light-dark(#0891b2, #22d3ee); --accent-rgb: 10, 125, 92; --secondary-rgb: 34, 211, 238; } :root[data-palette="amber"] { --accent: light-dark(#e8940f, #f5a524); --accent-hover: light-dark(#f2a327, #ffb73d); --accent-text: light-dark(#9a5705, #fbc04a); --on-accent: #1a1206; --secondary: light-dark(#e0364f, #ff5d73); --accent-rgb: 245, 165, 36; --secondary-rgb: 255, 93, 115; } /* Styles: afterglow is the default; prefs.js sets for the others. */ :root[data-style="shell"] { --font-display: "Bricolage Condensed", "Arial Narrow", system-ui, sans-serif; --display-case: uppercase; --tracking-display: -0.01em; --radius-sm: 3px; --radius: 5px; --radius-lg: 8px; --radius-pill: 5px; --shadow-glow: 3px 3px 0 rgba(var(--accent-rgb), 0.55); --shadow-glow-strong: 5px 5px 0 rgba(var(--accent-rgb), 0.8); --shadow-card: 6px 6px 0 rgba(var(--accent-rgb), 0.9); --button-font: var(--font-mono); --button-case: lowercase; --duration-fast: 90ms; --duration: 160ms; --duration-slow: 360ms; --stagger: 90ms; --ease: cubic-bezier(0.2, 0, 0, 1); } :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* Last, so it also wins over the styles' durations */ @media (prefers-reduced-motion: reduce) { :root, :root[data-style] { --duration-fast: 0ms; --duration: 0ms; --duration-slow: 0ms; --stagger: 0ms; } } /* END GENERATED brand */ /* Static-site-only tokens */ :root { --surface-hover: light-dark(#f9f8fd, #17161f); /* Translucent "glass" surfaces over a background (hub card) */ --glass: light-dark(rgba(255, 255, 255, 0.72), rgba(18, 17, 26, 0.62)); --glass-border: light-dark(rgba(20, 16, 40, 0.1), rgba(255, 255, 255, 0.1)); /* Sticky bars (tool-nav) */ --bar-bg: light-dark(rgba(255, 255, 255, 0.9), rgba(8, 7, 13, 0.9)); }