/* ========================================================================== PromptOS design tokens One place to change the look of the whole site. Every colour is written as light-dark(LIGHT VALUE, DARK VALUE), so one line controls both themes. The theme follows the visitor's system setting unless they pick one with the toggle (html[data-theme="light" | "dark"]). ========================================================================== */ /* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */ @font-face { font-family: "Instrument Serif"; src: url("../assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("../assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Geist"; src: url("../assets/fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("../assets/fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { color-scheme: light dark; /* ---------- Surfaces & text ---------- */ --bg: light-dark(#FBF9F5, #0F0E0B); /* page background */ --bg-sunken: light-dark(#F3EFE7, #0A0907); /* recessed bands */ --surface: light-dark(#FFFFFF, #171512); /* cards, dialogs */ --surface-2: light-dark(#F7F4EC, #1E1B17); /* inputs, hover fills */ --surface-3: light-dark(#EFEBE0, #26231E); /* pressed / selected fills */ --ink: light-dark(#17150F, #F3EFE6); /* primary text */ --ink-2: light-dark(#4F4B41, #B7B1A3); /* secondary text */ --ink-3: light-dark(#6B665A, #98927F); /* tertiary text, hints */ --line: light-dark(#E6E1D5, #2A2722); /* hairlines */ --line-strong: light-dark(#D3CCBB, #3C3830); /* input borders */ --inverse-bg: light-dark(#17150F, #F3EFE6); /* high-contrast bands */ --inverse-ink: light-dark(#F3EFE6, #17150F); /* ---------- Brand: vermilion primary, teal accent ---------- */ --primary: light-dark(#D73A10, #FF6B3D); --primary-hover: light-dark(#BB300B, #FF8259); --on-primary: light-dark(#FFFFFF, #170E09); --primary-text: light-dark(#BF3410, #FF8A63); --primary-tint: light-dark(#FCE9E2, #2D1710); --accent: light-dark(#0B6E5D, #4FD1B5); --accent-tint: light-dark(#DDF1EC, #12302A); /* ---------- Semantic ---------- */ --success: light-dark(#17713F, #5BD08F); --warning: light-dark(#8F5206, #F0B35A); --error: light-dark(#BE2B2B, #FF8080); --info: light-dark(#1B55E0, #8DB0FF); --focus: light-dark(#1B55E0, #8DB0FF); /* ---------- Gradients (used sparingly) ---------- */ --glow: radial-gradient(60% 60% at 50% 0%, light-dark(rgb(215 58 16 / .13), rgb(255 107 61 / .16)), transparent 70%); --glow-accent: radial-gradient(50% 50% at 100% 0%, light-dark(rgb(11 110 93 / .10), rgb(79 209 181 / .10)), transparent 70%); /* ---------- Typography ---------- */ --font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif; --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.0625rem; --fs-lg: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem); --fs-xl: clamp(1.5rem, 1.25rem + 1vw, 2.1rem); --fs-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); --fs-3xl: clamp(2.5rem, 1.5rem + 4vw, 4.75rem); --fs-hero: clamp(3rem, 1.2rem + 7.4vw, 7.25rem); --lh-tight: 1.04; --lh-snug: 1.25; --lh-body: 1.65; /* ---------- Spacing (4px base) ---------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --section-y: clamp(4rem, 3rem + 5vw, 8rem); --gutter: clamp(1rem, 0.5rem + 2.4vw, 2rem); /* ---------- Layout ---------- */ --container: 1200px; --container-wide: 1360px; --header-h: 72px; --header-h-compact: 56px; /* ---------- Radius & borders ---------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; --bw: 1px; /* ---------- Shadows ---------- */ --shadow-1: 0 1px 2px light-dark(rgb(23 21 15 / .06), rgb(0 0 0 / .4)); --shadow-2: 0 1px 2px light-dark(rgb(23 21 15 / .05), rgb(0 0 0 / .4)), 0 6px 18px -6px light-dark(rgb(23 21 15 / .12), rgb(0 0 0 / .55)); --shadow-3: 0 2px 4px light-dark(rgb(23 21 15 / .05), rgb(0 0 0 / .4)), 0 22px 48px -14px light-dark(rgb(23 21 15 / .22), rgb(0 0 0 / .7)); --shadow-ring: 0 0 0 1px var(--line); /* ---------- Layers ---------- */ --z-base: 1; --z-raised: 5; --z-sticky: 50; --z-header: 100; --z-dialog: 1000; --z-toast: 1100; /* ---------- Motion ---------- */ --dur-1: 120ms; --dur-2: 200ms; --dur-3: 360ms; --dur-4: 700ms; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); } /* Visitor's explicit choice wins over the system setting. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Category colour. Each category class sets a hue (--h, an oklch angle); the shared rule below turns it into a text colour, a tint and a hairline that work in both themes. Add one line per new category. */ :is(.c-0, .c-1, .c-2, .c-3, .c-4, .c-5, .c-6, .c-7, .c-8, .c-9, .c-10) { --cat: light-dark(oklch(0.5 0.16 var(--h)), oklch(0.78 0.13 var(--h))); --cat-tint: light-dark(oklch(0.955 0.035 var(--h)), oklch(0.27 0.05 var(--h))); --cat-line: light-dark(oklch(0.86 0.06 var(--h)), oklch(0.38 0.07 var(--h))); } .c-0 { --h: 38; } /* Image Generation */ .c-1 { --h: 352; } /* Social Media */ .c-2 { --h: 258; } /* Career & Resume */ .c-3 { --h: 300; } /* Presentations */ .c-4 { --h: 188; } /* Business Strategy */ .c-5 { --h: 88; } /* Productivity */ .c-6 { --h: 326; } /* Graphic Design */ .c-7 { --h: 158; } /* AI Image Templates */ .c-8 { --h: 18; } /* Video & Content */ .c-9 { --h: 222; } /* ChatGPT Design */ .c-10 { --h: 278; } /* Special Prompts */