/* ========================================================================== tokens.css — Church Boilerplate -------------------------------------------------------------------------- THE SINGLE SOURCE OF TRUTH FOR DESIGN TOKENS. This is the ONLY file in the entire project where raw hex / rgba literals may appear. Everywhere else MUST use var(--token). Re-skinning a future church site = editing ONLY this file (+ swapping fonts, photography, copy). Names are intentionally GENERIC (--maroon, not --brand-red) so a re-skin just changes the values. Visual language: warm light palette, single maroon accent. No dark panels — the deepest warm step (--surface-3) replaces what would have been black. ORGANIZATION 1. Core color palette (raw values) 2. Surfaces 3. Ink / text 4. Accent 5. Lines / borders 6. Radii 7. Shape (squircle / hairline gradient edge) 8. Grid (container / gutter / col) 9. Spacing scale 10. Typography axes + opsz mapping note 11. Easing tokens 12. Duration tokens 13. Warm soft shadow tokens 14. Z-index scale ========================================================================== */ :root { /* Light-only. Outranks the in the pages (a :root rule beats the tag), so BOTH are declared. "only light" rather than "light": plain "light" still allows a browser to force-darken; "only light" is the documented opt-out. This also pins native form controls and scrollbars to their light rendering. See DEVIR 13. */ color-scheme: only light; /* ------------------------------------------------------------------------ 1. CORE COLOR PALETTE (raw values — hex lives here and ONLY here) ------------------------------------------------------------------------ */ --paper: #FBFAF8; /* page base, warmest-lightest */ --surface-1: #FFFFFF; /* lifted cards / pills (pure white reads clean) */ --surface-2: #F1F0EC; /* second tonal step (Stone neutral) */ --surface-3: #E6E4DE; /* deepest tonal step — REPLACES any black section*/ --hero-bg: #FFFFFF; /* flat pure-white hero + mosaic ("düz beyaz") */ --ink: #1A1410; /* primary text — warm near-black */ --muted: #6B635A; /* secondary text, eyebrows, faded split words */ --line: #E4E1DA; /* hairlines, dividers, default borders */ --maroon: #7C2230; /* the single dominant accent */ --maroon-deep: #5E1A22; /* hover / pressed / deeper accent */ --maroon-ghost: rgba(124, 34, 48, 0.09); /* giant ghost word — faint wash, */ /* nudged from 0.06 so the signature drifting word */ /* reads as an intentional element (still quiet). */ --accent-2: #E0A43C; /* OPTIONAL warm amber micro-accent. OFF by */ /* default — use sparingly, never as a 2nd */ /* dominant accent on a screen. */ /* THEME STUDIO — warmth / secondary-accent layer (per-palette overrides in §1b below). These DEFAULTS are the Stone (flagship) values: the warm hue == the maroon accent itself, so on Stone the warm-accent layer reads as a monochrome maroon treatment. Other palettes set a distinct warm hue + spark. Consumed ONLY by the warm-accent layer in components.css. */ --warm: #7C2230; /* eyebrow / kicker text + invitation warm CTA fill */ --warm-strong: #7C2230; /* invitation CTA fill at data-warm 2 / 3 */ --warm-deep: #5E1A22; /* invitation CTA hover at data-warm 2 / 3 */ --spark: #7C2230; /* tiny flat eyebrow marker square */ --tint-ticker: #F1F0EC; /* #ticker-values band fill (always on) */ --tint-1: #F4F2EE; /* #pillars flat section tint at data-warm 3 */ --tint-2: #F7F2EB; /* reserved flat tint */ --tint-3: #F2EFE9; /* #connect flat section tint at data-warm 3 */ /* Third-party brand colours. Used by the #connect / .social follow section (orb rings, glyphs, "Takip et" pills) and by the WhatsApp button in the contact column. Fixed hues: these do not change with data-palette. */ --ig: #962FBF; /* Instagram (single-hue stand-in for the gradient) */ --ig-mag: #D62976; /* Instagram magenta — the "Takip et" pill */ --fb-blue: #1877F2; /* Facebook blue */ --yt-red: #FF0000; /* YouTube red */ --wa: #25D366; /* WhatsApp green */ --wa-deep: #128C7E; /* WhatsApp, pressed */ /* Pure channels used to derive translucent tints without re-typing hex. (Channels only — never set color: directly from these.) */ --paper-rgb: 251, 250, 248; --surface-1-rgb: 255, 255, 255; --surface-3-rgb: 230, 228, 222; --ink-rgb: 26, 20, 16; --maroon-rgb: 124, 34, 48; --accent-2-rgb: 224, 164, 60; --warm-shadow-rgb: 44, 40, 34; /* neutralized shadow base (Stone) */ /* ------------------------------------------------------------------------ 2. SURFACES — semantic aliases (use these in components, not raw names, so a re-skin can re-map meaning cleanly). ------------------------------------------------------------------------ */ --bg: var(--paper); /* default page background */ --bg-raised: var(--surface-1); /* cards, pills, header badge */ --bg-tonal: var(--surface-2); /* alternating section rhythm */ --bg-tonal-deep: var(--surface-3); /* the "instead of black" section */ /* Translucent surfaces for the sticky, backdrop-blur header. */ --header-bg: rgba(var(--paper-rgb), 0.72); --header-bg-scrolled: rgba(var(--paper-rgb), 0.86); --badge-bg: rgba(var(--surface-1-rgb), 0.66); /* ------------------------------------------------------------------------ 3. INK / TEXT — semantic ------------------------------------------------------------------------ */ --text: var(--ink); --text-muted: var(--muted); --text-on-maroon: var(--paper); /* text on a maroon fill (e.g. filled pill)*/ /* ------------------------------------------------------------------------ 4. ACCENT — semantic ------------------------------------------------------------------------ */ --accent: var(--maroon); --accent-strong: var(--maroon-deep); --accent-deep: var(--maroon-deep); /* alias mandated by the studio spec; per-palette blocks set it explicitly */ --accent-ghost: var(--maroon-ghost); --accent-soft: rgba(var(--maroon-rgb), 0.10); /* faint maroon tint fill */ --accent-line: rgba(var(--maroon-rgb), 0.22); /* maroon hairline / focus */ /* ------------------------------------------------------------------------ 5. LINES / BORDERS ------------------------------------------------------------------------ */ --border: var(--line); --border-strong: rgba(var(--ink-rgb), 0.14); --divider: var(--line); /* Hairline gradient-edge endpoints (see §7). Light → warm. */ --edge-from: rgba(var(--surface-1-rgb), 0.90); /* bright top-left */ --edge-to: rgba(var(--warm-shadow-rgb), 0.16); /* warm bottom-right */ /* ------------------------------------------------------------------------ 6. RADII ------------------------------------------------------------------------ */ --r-sm: 0.75rem; /* 12px — small chips, inputs */ --r-md: 1.25rem; /* 20px — pills, medium cards */ --r-card: 1.75rem; /* 28px — primary media / content cards */ --r-pill: 999px; /* fully rounded pill */ /* ------------------------------------------------------------------------ 7. SHAPE — squircle + hairline gradient edge Apply base border-radius first, THEN layer corner-shape as a progressive enhancement (unsupported browsers fall back gracefully). ------------------------------------------------------------------------ */ --squircle: superellipse(1.3); /* corner-shape value, PE only */ --hairline: 1px; /* width of the gradient inner edge */ --edge-gradient: linear-gradient(135deg, var(--edge-from), var(--edge-to)); /* ------------------------------------------------------------------------ 8. GRID — 16-column Swiss --col is derived: container minus 17 gutters (16 cols => 17 gaps incl. the two outer edges), divided by 16. ------------------------------------------------------------------------ */ --container: min(100vw, 94.5rem); /* 1512px cap */ --gutter: 0.75rem; /* 12px column gap */ --col: calc((var(--container) - var(--gutter) * 17) / 16); --columns: 16; /* logical column count (collapses in base)*/ /* Outer page padding (separate from the col math so edges always breathe). */ --page-pad: clamp(1.25rem, 4vw, 3.5rem); /* ------------------------------------------------------------------------ 9. SPACING SCALE — 4px base. Generous range up to section padding. ------------------------------------------------------------------------ */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ --space-11: 12rem; /* 192px */ /* Vertical rhythm between major sections (fluid). */ --section-y: clamp(6rem, 12vw, 12rem); /* A tighter sub-section gap. */ --block-y: clamp(2.5rem, 5vw, 5rem); /* ------------------------------------------------------------------------ 10. TYPOGRAPHY AXES + OPSZ MAPPING Google Sans Flex axes (verify exact tags from the shipped font; unknown axes are ignored gracefully so it is safe to set them all): wght weight 100–1000 wdth width opsz optical size bind to font-size (see note) slnt slant negative = forward lean GRAD grade darkens strokes w/o changing metrics ROND roundedness soft global warmth (verify tag — if absent, ignored) OPSZ MAPPING NOTE (implemented as utility classes in base.css): opsz should track the RENDERED size in px. Display ~ 96–144, h1 ~ 64, h2 ~ 40, h3 ~ 28, lead ~ 22, body ~ 17, eyebrow/mono ~ 13. Larger text → larger opsz (tighter, more display-like cut); smaller text → smaller opsz (more open, legible cut). Tokens below let base.css reference axis defaults by name. ------------------------------------------------------------------------ */ --font-sans: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Single typeface site-wide: --font-mono now aliases the one sans stack so legacy var(--font-mono) usages (labels/eyebrows) render in Google Sans Flex. (No Google Sans Code / no second family anywhere.) */ --font-mono: var(--font-sans); --wght-light: 340; --wght-regular: 400; --wght-medium: 520; --wght-semibold: 600; --wght-bold: 720; --ROND-soft: 60; /* gentle warmth, not childish (verify axis tag) */ --GRAD-base: 0; /* Hero breathing range (driven by JS [data-breathe]). */ --wght-breathe-min: 560; --wght-breathe-max: 700; /* Accent-word (.hl) axis recipe — heavier + slightly tighter width, UPRIGHT (no slant; the lean was removed). --hl-wght MUST stay above --wght-bold (720) AND above the hero breathe max (700) so the maroon accent word is always the heaviest element in its line (the device is "heavier weight"); 800 sits well under the font's wght max of 1000. --hl-opsz is overridden per type tier (see base.css) so the accent's optical cut matches its host. */ --hl-wght: 800; --hl-wdth: 92; --hl-opsz: 18; /* default; per-tier overrides bind this to the host size */ /* ------------------------------------------------------------------------ 11. EASING TOKENS ------------------------------------------------------------------------ */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* defined; currently unused */ --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); /* defined; currently unused */ /* Harmonized motion scale — ONE ease per role (aliases of the above), used by every everyday entrance / hover / UI-state. Special animations (map intro, Topluluk, orb float, breathe, marquee, scrub, smooth-scroll) keep their own. */ --ease-entrance: var(--ease-out-expo); /* cubic-bezier(.16,1,.3,1) — punchy decorative SLIDE entrances (#connect orbs) */ --ease-text: cubic-bezier(0.39, 0.575, 0.565, 1); /* gentle (≈ GSAP sine.out) — opacity / text reveals */ --ease-hover: var(--ease-out-quart); /* hovers + header / menu UI state */ /* ------------------------------------------------------------------------ 12. DURATION TOKENS ------------------------------------------------------------------------ */ --dur-fast: 0.18s; --dur-base: 0.32s; --dur-slow: 0.6s; --dur-slower: 0.9s; --dur-draw: 1.6s; /* self-drawing monogram */ --dur-breathe: 6s; /* hero weight breathing loop */ /* Harmonized motion scale (pairs with the easing aliases above). */ --dur-entrance: 1.1s; /* standard entrance (text reveal, clarify lead) */ --dur-entrance-lg: 1.2s; /* feature entrance (clarify title, #connect) */ --dur-hover: var(--dur-fast); /* 0.18s — small UI hovers */ --dur-hover-soft: 0.3s; /* larger interactive elements (orbs, Hizmetler) */ --dur-ui: 0.45s; /* header-compact trio: nav fade / toggle / word */ --stagger: 0.08s; /* standard entrance stagger */ --entrance-shift: 20px; /* standard entrance translate offset */ /* ------------------------------------------------------------------------ 13. WARM SOFT SHADOW TOKENS — low-alpha WARM rgba (NOT gray) Built from --warm-shadow-rgb so re-skins inherit the warmth. ------------------------------------------------------------------------ */ --shadow-xs: 0 1px 2px rgba(var(--warm-shadow-rgb), 0.05); --shadow-sm: 0 2px 8px rgba(var(--warm-shadow-rgb), 0.06), 0 1px 2px rgba(var(--warm-shadow-rgb), 0.04); --shadow-md: 0 8px 24px rgba(var(--warm-shadow-rgb), 0.08), 0 2px 6px rgba(var(--warm-shadow-rgb), 0.05); --shadow-lg: 0 18px 48px rgba(var(--warm-shadow-rgb), 0.10), 0 6px 14px rgba(var(--warm-shadow-rgb), 0.06); --shadow-card-hover: 0 28px 64px rgba(var(--warm-shadow-rgb), 0.14), 0 10px 20px rgba(var(--warm-shadow-rgb), 0.07); /* Soft inner light for the light-sheen sweep on tilt cards. */ --sheen: linear-gradient(105deg, rgba(var(--surface-1-rgb), 0) 30%, rgba(var(--surface-1-rgb), 0.55) 50%, rgba(var(--surface-1-rgb), 0) 70%); /* ------------------------------------------------------------------------ 14. Z-INDEX SCALE ------------------------------------------------------------------------ */ --z-below: -1; --z-base: 0; --z-ghost: 1; /* giant ghost words sit just above section bg */ --z-content: 2; --z-sticky: 100; /* sticky header */ --z-overlay: 200; --z-top: 900; /* skip-link, focus traps */ /* ------------------------------------------------------------------------ CONTRAST VERIFICATION (manual, against the raw values above) ------------------------------------------------------------------------ maroon (#7C2230) on paper (#FBFAF8): contrast ≈ 9.46:1 → PASS AA & AAA for normal text, PASS for large. ink (#1A1410) on surface-3 (#EDE6DA): contrast ≈ 14.70:1 → PASS AA & AAA for normal & large text. muted (#6B635A) on paper (#FBFAF8): contrast ≈ 5.66:1 → PASS AA for normal text (≥4.5). Use for body-size secondary text and up; OK. muted (#6B635A) on surface-3 (#EDE6DA): contrast ≈ 4.76:1 → PASS AA for normal text. OK. paper (#FBFAF8) text on maroon (#7C2230) fill (filled pill): contrast ≈ 9.46:1 → PASS AA & AAA. Filled "Ziyaret et" pill is safe. accent-2 amber (#E0A43C) on paper: ≈ 2.11:1 → FAILS as text. Amber is a DECOR micro-accent only (never body/large text); enforced by usage. ------------------------------------------------------------------------ */ } /* ========================================================================== 1b. ATTRIBUTE-DRIVEN PALETTES (THEME STUDIO) -------------------------------------------------------------------------- The palette is selected at runtime by data-palette on . Each block sets the FULL colour token set — INCLUDING the derived rgb channels (so the header translucency, accent tints and the map feather track the palette) and the ghost wash. BOTH --maroon and --accent (and --maroon-deep / --accent-deep) are set to the same value so EVERY existing reference recolours, whichever name it used. Social brand tokens, radii, shadows and all motion tokens are NEVER touched here. Stone == the flagship look (mirrors the :root defaults above). These selectors (html[data-palette=…] → 0,1,1) out-specify :root (0,1,0). ========================================================================== */ html[data-palette="stone"] { --paper:#FBFAF8; --surface-1:#FFFFFF; --surface-2:#F1F0EC; --surface-3:#E6E4DE; --ink:#1A1410; --muted:#6B635A; --line:#E4E1DA; --maroon:#7C2230; --accent:#7C2230; --maroon-deep:#5E1A22; --accent-deep:#5E1A22; --maroon-ghost: rgba(124,34,48,0.09); --warm:#7C2230; --warm-strong:#7C2230; --warm-deep:#5E1A22; --spark:#7C2230; --tint-ticker:#F1F0EC; --tint-1:#F4F2EE; --tint-2:#F7F2EB; --tint-3:#F2EFE9; --paper-rgb:251,250,248; --surface-3-rgb:230,228,222; --ink-rgb:26,20,16; --maroon-rgb:124,34,48; } html[data-palette="indigo"] { --paper:#FAFAFE; --surface-1:#FFFFFF; --surface-2:#F2F1F9; --surface-3:#E7E5F2; --ink:#191636; --muted:#6B6790; --line:#E6E3F1; --maroon:#3D348B; --accent:#3D348B; --maroon-deep:#221C57; --accent-deep:#221C57; --maroon-ghost: rgba(61,52,139,0.09); --warm:#F18701; --warm-strong:#F35B04; --warm-deep:#D44E03; --spark:#F7B801; --tint-ticker:#ECEBFB; --tint-1:#F4F3FB; --tint-2:#FCF7EE; --tint-3:#F1EFFB; --paper-rgb:250,250,254; --surface-3-rgb:231,229,242; --ink-rgb:25,22,54; --maroon-rgb:61,52,139; } html[data-palette="grove"] { --paper:#FAF8F1; --surface-1:#FFFFFF; --surface-2:#F2EFE6; --surface-3:#E7E2D5; --ink:#22271D; --muted:#6E6A5C; --line:#E6E1D4; --maroon:#386641; --accent:#386641; --maroon-deep:#26482E; --accent-deep:#26482E; --maroon-ghost: rgba(56,102,65,0.09); --warm:#BC4749; --warm-strong:#BC4749; --warm-deep:#9E3B3D; --spark:#A7C957; --tint-ticker:#F2E8CF; --tint-1:#ECF1E6; --tint-2:#FBF5E7; --tint-3:#EFF4EA; --paper-rgb:250,248,241; --surface-3-rgb:231,226,213; --ink-rgb:34,39,29; --maroon-rgb:56,102,65; } html[data-palette="pastel"] { --paper:#FDFCFE; --surface-1:#FFFFFF; --surface-2:#F4F2F8; --surface-3:#EAE7F1; --ink:#2E2A3A; --muted:#7C7690; --line:#ECE9F3; --maroon:#8E63CF; --accent:#8E63CF; --maroon-deep:#6F49A8; --accent-deep:#6F49A8; --maroon-ghost: rgba(142,99,207,0.09); --warm:#E76BA3; --warm-strong:#E76BA3; --warm-deep:#D14E8E; --spark:#8E63CF; --tint-ticker:#F3EBFB; --tint-1:#E4F6EC; --tint-2:#FCEAF2; --tint-3:#EAF5FD; --paper-rgb:253,252,254; --surface-3-rgb:234,231,241; --ink-rgb:46,42,58; --maroon-rgb:142,99,207; } html[data-palette="pop"] { --paper:#FCFCFF; --surface-1:#FFFFFF; --surface-2:#F1F2F7; --surface-3:#E6E7F0; --ink:#14141C; --muted:#6A6B7A; --line:#E7E8F0; --maroon:#1B3B6F; --accent:#1B3B6F; --maroon-deep:#132A50; --accent-deep:#132A50; --maroon-ghost: rgba(27,59,111,0.09); --warm:#FF006E; --warm-strong:#FF006E; --warm-deep:#D80060; --spark:#FFBE0B; --tint-ticker: color-mix(in srgb, var(--maroon) 12%, var(--surface-1)); --tint-1:#F1ECFD; --tint-2:#FFF0F6; --tint-3:#FFF9E8; --paper-rgb:252,252,255; --surface-3-rgb:230,231,240; --ink-rgb:20,20,28; --maroon-rgb:27,59,111; } /* ========================================================================== 1b-2. THEME STUDIO v2 — TEN MORE ATTRIBUTE-DRIVEN PALETTES -------------------------------------------------------------------------- Same contract as §1b above: each block sets the FULL 24-property colour token set, nothing omitted, so every existing reference recolours whichever name it used. accent / accent-deep / paper are the locked brief values. The other 21 are DERIVED from STONE's measured relationships, retinted to each palette's own accent hue: surface-1 = #FFFFFF (constant in all five existing) surface-2 / surface-3 / line tint-1 / tint-2 / tint-3 = Stone's ΔL from its own paper + Stone's S, ink / muted at hue(accent), applied to THIS paper tint-ticker = surface-2 (Stone identity) maroon-ghost = rgba(accent, 0.09) warm / warm-strong = accent (Stone's monochrome model) warm-deep = accent-deep spark = accent lightened +16L, same hue MONOCHROME WARM: unlike Indigo / Grove / Pastel / Pop, these ten do NOT take a distinct secondary hue — one hue family per palette. The existing five are not touched. --line was the only derived token any gate bound on: Stone's own line sits at 1.25:1 against its paper, under the 1.3 floor, so all ten were darkened a step to clear it. Every other derived value passes unadjusted. Social brand tokens, radii, shadows and all motion tokens are NEVER set here. ========================================================================== */ /* Toprak · terracotta */ html[data-palette="toprak"] { --paper:#FCF8F4; --surface-1:#FFFFFF; --surface-2:#F0ECEA; --surface-3:#E5DFDC; --ink:#18110F; --muted:#695D59; --line:#E2DAD7; --maroon:#A94D2B; --accent:#A94D2B; --maroon-deep:#83371B; --accent-deep:#83371B; --maroon-ghost: rgba(169,77,43,0.09); --warm:#A94D2B; --warm-strong:#A94D2B; --warm-deep:#83371B; --spark:#D37552; --tint-ticker:#F0ECEA; --tint-1:#F3EEEC; --tint-2:#F6ECE9; --tint-3:#F1EAE7; --paper-rgb:252,248,244; --surface-3-rgb:229,223,220; --ink-rgb:24,17,15; --maroon-rgb:169,77,43; } /* Bordo · wine red */ html[data-palette="bordo"] { --paper:#FBF6F5; --surface-1:#FFFFFF; --surface-2:#F0EAEB; --surface-3:#E5DCDD; --ink:#180F10; --muted:#69595A; --line:#E2D7D8; --maroon:#51181E; --accent:#51181E; --maroon-deep:#350F14; --accent-deep:#350F14; --maroon-ghost: rgba(81,24,30,0.09); --warm:#51181E; --warm-strong:#51181E; --warm-deep:#350F14; --spark:#902B35; --tint-ticker:#F0EAEB; --tint-1:#F3ECED; --tint-2:#F6E9EA; --tint-3:#F1E7E8; --paper-rgb:251,246,245; --surface-3-rgb:229,220,221; --ink-rgb:24,15,16; --maroon-rgb:81,24,30; } /* Gül · dusty rose */ html[data-palette="gul"] { --paper:#FCF7F8; --surface-1:#FFFFFF; --surface-2:#F1ECED; --surface-3:#E6DEE0; --ink:#1A1012; --muted:#6B5A5E; --line:#E3D9DB; --maroon:#A75065; --accent:#A75065; --maroon-deep:#7F3A4C; --accent-deep:#7F3A4C; --maroon-ghost: rgba(167,80,101,0.09); --warm:#A75065; --warm-strong:#A75065; --warm-deep:#7F3A4C; --spark:#C48494; --tint-ticker:#F1ECED; --tint-1:#F4EEEF; --tint-2:#F7EBEE; --tint-3:#F2E9EB; --paper-rgb:252,247,248; --surface-3-rgb:230,222,224; --ink-rgb:26,16,18; --maroon-rgb:167,80,101; } /* Erik · plum */ html[data-palette="erik"] { --paper:#FAF7FA; --surface-1:#FFFFFF; --surface-2:#F0EBF0; --surface-3:#E5DDE5; --ink:#190F19; --muted:#6A596A; --line:#E2D8E2; --maroon:#663A66; --accent:#663A66; --maroon-deep:#4C2A4C; --accent-deep:#4C2A4C; --maroon-ghost: rgba(102,58,102,0.09); --warm:#663A66; --warm-strong:#663A66; --warm-deep:#4C2A4C; --spark:#9A589A; --tint-ticker:#F0EBF0; --tint-1:#F3EDF3; --tint-2:#F6EAF6; --tint-3:#F1E8F1; --paper-rgb:250,247,250; --surface-3-rgb:229,221,229; --ink-rgb:25,15,25; --maroon-rgb:102,58,102; } /* Lacivert · deep navy */ html[data-palette="lacivert"] { --paper:#F6F8FB; --surface-1:#FFFFFF; --surface-2:#EBEBF0; --surface-3:#DDDEE5; --ink:#0F1019; --muted:#595B6A; --line:#D9DAE3; --maroon:#1B236B; --accent:#1B236B; --maroon-deep:#141A50; --accent-deep:#141A50; --maroon-ghost: rgba(27,35,107,0.09); --warm:#1B236B; --warm-strong:#1B236B; --warm-deep:#141A50; --spark:#2B38AC; --tint-ticker:#EBEBF0; --tint-1:#EDEDF3; --tint-2:#EAEBF6; --tint-3:#E8E9F1; --paper-rgb:246,248,251; --surface-3-rgb:221,222,229; --ink-rgb:15,16,25; --maroon-rgb:27,35,107; } /* Arduvaz · slate blue-grey */ html[data-palette="arduvaz"] { --paper:#F6F7F9; --surface-1:#FFFFFF; --surface-2:#EAECEF; --surface-3:#DCE0E4; --ink:#0E1318; --muted:#586069; --line:#D6DBE0; --maroon:#3E4C5C; --accent:#3E4C5C; --maroon-deep:#2B3644; --accent-deep:#2B3644; --maroon-ghost: rgba(62,76,92,0.09); --warm:#3E4C5C; --warm-strong:#3E4C5C; --warm-deep:#2B3644; --spark:#5F748D; --tint-ticker:#EAECEF; --tint-1:#ECEFF2; --tint-2:#E8EFF6; --tint-3:#E6EBF1; --paper-rgb:246,247,249; --surface-3-rgb:220,224,228; --ink-rgb:14,19,24; --maroon-rgb:62,76,92; } /* Deniz · deep teal */ html[data-palette="deniz"] { --paper:#F4F9F8; --surface-1:#FFFFFF; --surface-2:#E9EEEE; --surface-3:#DBE3E3; --ink:#0E1616; --muted:#576867; --line:#D2DDDD; --maroon:#14625E; --accent:#14625E; --maroon-deep:#0D4744; --accent-deep:#0D4744; --maroon-ghost: rgba(20,98,94,0.09); --warm:#14625E; --warm-strong:#14625E; --warm-deep:#0D4744; --spark:#22A69F; --tint-ticker:#E9EEEE; --tint-1:#EAF2F1; --tint-2:#E7F5F5; --tint-3:#E5F0EF; --paper-rgb:244,249,248; --surface-3-rgb:219,227,227; --ink-rgb:14,22,22; --maroon-rgb:20,98,94; } /* Zeytin · olive */ html[data-palette="zeytin"] { --paper:#F8F9F3; --surface-1:#FFFFFF; --surface-2:#ECEEE8; --surface-3:#E0E3DA; --ink:#13160D; --muted:#616757; --line:#D9DDD1; --maroon:#58683B; --accent:#58683B; --maroon-deep:#3F4C28; --accent-deep:#3F4C28; --maroon-ghost: rgba(88,104,59,0.09); --warm:#58683B; --warm-strong:#58683B; --warm-deep:#3F4C28; --spark:#849C59; --tint-ticker:#ECEEE8; --tint-1:#EFF1EA; --tint-2:#F0F5E6; --tint-3:#ECEFE5; --paper-rgb:248,249,243; --surface-3-rgb:224,227,218; --ink-rgb:19,22,13; --maroon-rgb:88,104,59; } /* Kum · ochre */ html[data-palette="kum"] { --paper:#FBF8F0; --surface-1:#FFFFFF; --surface-2:#EEECE7; --surface-3:#E3E0D9; --ink:#15120D; --muted:#676156; --line:#DFDBD3; --maroon:#8A6519; --accent:#8A6519; --maroon-deep:#6B4E11; --accent-deep:#6B4E11; --maroon-ghost: rgba(138,101,25,0.09); --warm:#8A6519; --warm-strong:#8A6519; --warm-deep:#6B4E11; --spark:#CF9826; --tint-ticker:#EEECE7; --tint-1:#F1EEE9; --tint-2:#F5F0E5; --tint-3:#EFEBE4; --paper-rgb:251,248,240; --surface-3-rgb:227,224,217; --ink-rgb:21,18,13; --maroon-rgb:138,101,25; } /* Antrasit · cool charcoal */ html[data-palette="antrasit"] { --paper:#F7F7F7; --surface-1:#FFFFFF; --surface-2:#E9EBEF; --surface-3:#DBDFE4; --ink:#0E1217; --muted:#585E68; --line:#D6DAE1; --maroon:#2E3033; --accent:#2E3033; --maroon-deep:#1B1D1F; --accent-deep:#1B1D1F; --maroon-ghost: rgba(46,48,51,0.09); --warm:#2E3033; --warm-strong:#2E3033; --warm-deep:#1B1D1F; --spark:#55585E; --tint-ticker:#E9EBEF; --tint-1:#EBEEF2; --tint-2:#E7EDF6; --tint-3:#E6EAF0; --paper-rgb:247,247,247; --surface-3-rgb:219,223,228; --ink-rgb:14,18,23; --maroon-rgb:46,48,51; } /* ========================================================================== 1c. ATTRIBUTE-DRIVEN FONT (THEME STUDIO) -------------------------------------------------------------------------- The body typeface is selected at runtime by data-font on ; each block re-points --font-sans only (the @font-face declarations live in base.css). UPRIGHT ONLY everywhere (no italic anywhere in the project). --font-mono stays aliased to --font-sans (§10), so it follows the active font too. ========================================================================== */ html[data-font="googlesans"] { --font-sans: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } html[data-font="poppins"] { --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } html[data-font="montserrat"] { --font-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } html[data-font="hanken"] { --font-sans: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } html[data-font="general"] { --font-sans: "General Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* THEME STUDIO v2 — the ten added families. Serif families fall back to a SERIF stack (not the sans one) so a failed load degrades in-genre. */ html[data-font="bricolage"] { --font-sans: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } html[data-font="archivo"] { --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } html[data-font="epilogue"] { --font-sans: "Epilogue", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } html[data-font="schibsted"] { --font-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } html[data-font="chivo"] { --font-sans: "Chivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } html[data-font="familjen"] { --font-sans: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } html[data-font="fraunces"] { --font-sans: "Fraunces", Georgia, "Times New Roman", serif; } html[data-font="literata"] { --font-sans: "Literata", Georgia, "Times New Roman", serif; } html[data-font="newsreader"] { --font-sans: "Newsreader", Georgia, "Times New Roman", serif; } html[data-font="bitter"] { --font-sans: "Bitter", Georgia, "Times New Roman", serif; }