/* ============================================================ FIVATION — Design System · "Bifröst" Gold-on-ink editorial system. Warm ink grounds, cream paper reading surfaces, gold used sparingly as the jewel accent. ============================================================ */ /* Web fonts are loaded from the HTML (preconnect + ) instead of an @import here, so the font request does not chain behind this stylesheet. */ :root { /* ---- Brand palette (hex, warm) ---- */ --ink: #15130E; /* warm near-black ground */ --ink-2: #1E1B14; /* raised panel on ink */ --ink-3: #2B271D; /* hairline / border on ink */ --ink-4: #3A3527; /* stronger border on ink */ --paper: #F7F2E7; /* warm cream reading surface */ --paper-2: #EFE7D6; /* soft cream panel */ --paper-3: #E4DAC4; /* cream hairline / border */ --gold: #C79A3B; /* core gold */ --gold-bright: #E7C76C; /* highlight gold (use on ink) */ --gold-deep: #8A6118; /* gold-as-text on paper (contrast) */ --gold-glow: rgba(199,154,59,0.16); --cream-text: #F4EFE3; /* primary text on ink */ --cream-muted: #ABA189; /* muted text on ink (warm taupe) */ --ink-text: #1A1710; /* primary text on paper */ --ink-muted: #6B6450; /* muted text on paper */ /* ---- Legacy semantic tokens (HSL tuples) ---- Kept so component CSS + guide.js generated markup keep working. Remapped onto the warm brand palette. */ --primary: 40 55% 50%; /* gold */ --primary-foreground: 40 30% 8%; /* ink */ --secondary: 42 30% 92%; --secondary-foreground: 40 20% 12%; --green: 145 32% 38%; /* warm sage — "beginner"/success */ --green-foreground: 0 0% 98%; --destructive: 8 60% 47%; /* warm brick — "advanced"/risk */ --destructive-foreground: 0 0% 98%; --warning: 36 68% 47%; /* amber — "intermediate" */ --warning-foreground: 40 30% 8%; --background: 44 33% 94%; /* paper */ --foreground: 40 25% 8%; /* ink */ --card: 42 40% 97%; --card-foreground: 40 25% 8%; --muted: 42 28% 90%; --muted-foreground: 42 12% 38%; --accent: 42 30% 90%; --accent-foreground: 40 20% 12%; --border: 40 22% 82%; --input: 40 22% 80%; --ring: 40 55% 50%; --radius: 0.25rem; /* Framework accent colors (warmed) */ --strengths: 145 32% 36%; --weaknesses: 8 60% 45%; --opportunities: 40 55% 48%; --threats: 36 68% 47%; --why: 145 32% 38%; --how: 40 55% 50%; --what: 36 68% 50%; /* Shadows — soft, warm, low */ --shadow-sm: 0 1px 2px 0 rgb(40 30 10 / 0.06); --shadow: 0 1px 3px 0 rgb(40 30 10 / 0.08), 0 1px 2px -1px rgb(40 30 10 / 0.07); --shadow-md: 0 6px 16px -6px rgb(40 30 10 / 0.14), 0 2px 6px -2px rgb(40 30 10 / 0.08); --shadow-lg: 0 18px 40px -12px rgb(30 22 8 / 0.22); --shadow-xl: 0 28px 60px -18px rgb(20 15 5 / 0.30); /* Type */ --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --font-sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', monospace; --maxw: 1180px; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } /* Keep intrinsic aspect ratio when width/height attributes are present */ img { max-width: 100%; height: auto; } /* Print-only branded header (shown by css/print.css) */ .print-brand { display: none; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-weight: 400; line-height: 1.6; color: var(--ink-text); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv01"; } ::selection { background: var(--gold); color: var(--ink); } /* ---- Headings (editorial serif) ---- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 500; line-height: 1.08; letter-spacing: -0.012em; color: var(--ink-text); } h1 { font-size: clamp(2.6rem, 5.2vw, 4.4rem); } h2 { font-size: clamp(2rem, 3.6vw, 3rem); } h3 { font-size: 1.6rem; } h4 { font-size: 1.2rem; } h5 { font-size: 1.05rem; } h6 { font-size: 0.9rem; } p { line-height: 1.65; } em { font-style: italic; } a { color: inherit; } /* ---- Layout ---- */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.75rem; } /* Eyebrow / kicker — mono small caps */ .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); display: inline-flex; align-items: center; gap: 0.6rem; } .eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: var(--gold); display: inline-block; } .eyebrow.eyebrow-plain::before { display: none; } .on-ink .eyebrow, .eyebrow.on-ink { color: var(--gold-bright); } /* ---- Color / text utilities (brand-mapped) ---- */ .text-primary { color: var(--gold-deep); } .on-ink .text-primary { color: var(--gold-bright); } .text-secondary { color: var(--ink-text); } .text-muted { color: var(--ink-muted); } .text-destructive { color: hsl(var(--destructive)); } .text-success { color: hsl(var(--green)); } .text-warning { color: hsl(var(--warning)); } .text-gold { color: var(--gold-deep); } .bg-primary { background-color: var(--gold); } .bg-secondary { background-color: var(--paper-2); } .bg-muted { background-color: var(--paper-2); } .bg-ink { background-color: var(--ink); } .bg-paper { background-color: var(--paper); } .font-light { font-weight: 300; } .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .serif { font-family: var(--font-serif); } .sans { font-family: var(--font-sans); } .mono { font-family: var(--font-mono); } .italic { font-style: italic; } .text-xs { font-size: 0.75rem; } .text-sm { font-size: 0.875rem; } .text-base { font-size: 1rem; } .text-lg { font-size: 1.15rem; } .text-xl { font-size: 1.3rem; } .text-2xl { font-size: 1.6rem; } .text-3xl { font-size: 2rem; } .text-4xl { font-size: 2.5rem; } .text-5xl { font-size: 3rem; } /* ---- Flex / grid ---- */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .grid { display: grid; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* ---- Spacing ---- */ .m-0{margin:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem} .mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem} .mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem} .mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem} .p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem} /* ---- Utilities used by guide.js generated markup ---- */ .ml-2 { margin-left: 0.5rem; } .text-center { text-align: center; } .list-disc { list-style: disc; } .list-decimal { list-style: decimal; } .list-inside { list-style-position: inside; } .rounded-md { border-radius: var(--radius); } /* ---- Misc ---- */ .hidden { display: none; } .block { display: block; } .relative { position: relative; } .absolute { position: absolute; } .rounded { border-radius: var(--radius); } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow { box-shadow: var(--shadow); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .transition { transition: all 0.2s; } /* A thin gold rule used between sections */ .rule-gold { height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent); opacity: 0.5; border: 0; } @media (max-width: 900px) { .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; } }