/* ============================================================ THE ILLUS CADEN - DESIGN TOKENS (single source of truth) ============================================================ Three systems merged here: 1. Brand palette + type - adopted from the Stoic Endeavors rebrand (rebranding1): sage/olive/green, Galdeano + Inter. 2. Layout - the page-shell grid + width tokens perfected on chadlewine and chadworks. One width rule for the whole site. 3. Structure - the Illus Caden ic- naming convention and component tokens carried over from the original theme spec. ============================================================ */ :root { /* --- Brand palette (from rebranding1 Global Options) --- Source-palette record. The four marked COLD are the original Stoic values; the shipped UI no longer references them (the rebrand went warm). They stay for provenance only - do NOT reach for them, or a cold value leaks back into a warm interior. Use the semantic tokens in the next block instead. */ --ic-white: #ffffff; /* color1 - COLD, unused in UI */ --ic-sage: #e6eac5; /* color2 - accent sections, tints */ --ic-marble: #f2f3f5; /* color3 - COLD, unused in UI */ --ic-green: #d18a2e; /* WARM: phoenix amber - PRIMARY accent (buttons, active, brand) */ --ic-blue: #b1531f; /* WARM: phoenix rust - SECONDARY accent (text links) */ --ic-slate: #434549; /* color6 - COLD, unused in UI */ --ic-olive: #2e3000; /* color7 - dark sections, headings, overlays */ --ic-ink: #1e1e1e; /* color8 - near-black */ --ic-indigo: #161c60; /* custom1 - COLD, unused in UI */ /* --- Semantic surface + text --- The interior is the tonal INVERSE of the dark-olive hero: where the hero is dark olive with cream text, the body is warm pale sage with dark-olive text. Accents stay green + blue (Stoic scheme). */ --ic-bg: #edefe0; /* warm pale sage (inverse of hero olive) */ --ic-bg-alt: var(--ic-sage); /* section breaks, quiet bands */ --ic-surface: #f7f8ef; /* cards, subscribe, code, menu panels (warm near-white) */ --ic-text: #3a3d26; /* body - dark warm olive */ --ic-text-strong: var(--ic-olive); /* headings, masthead (#2e3000) */ --ic-text-muted: #6f7159; /* bylines, dates, captions (warm) */ /* Solid masthead - a translucent wash of --ic-bg so the bar reads as the page it sits on. Must stay in the --ic-bg hue: any cold value here puts a visible grey seam under the header on every interior page. */ --ic-header-bg: rgba(237, 239, 224, 0.88); /* --- Accents (two, warm phoenix tones: amber structural + rust reader) --- */ --ic-accent: var(--ic-green); /* amber - buttons, active states, brand marks */ --ic-accent-deep: #ac6c1c; /* amber hover */ --ic-link: var(--ic-blue); /* rust - body + nav text links */ --ic-link-hover: #8c3d12; /* rust hover */ /* --- Dark sections (olive, from the source hero overlays) --- */ --ic-dark-bg: var(--ic-olive); --ic-dark-text: #eef0dd; /* light sage on olive */ --ic-dark-muted: #b7bd94; --ic-dark-border: rgba(238, 240, 221, 0.16); --ic-overlay: linear-gradient(180deg, rgba(34,38,0,0.82) 0%, rgba(15,13,0,0.66) 100%); /* --- Lines + tints --- */ --ic-rule: #d4d7bf; /* sage-tinted hairline */ --ic-rule-soft: rgba(46, 48, 0, 0.10); --ic-tint-green: rgba(209, 138, 46, 0.14); /* amber tint */ --ic-tint-blue: rgba(177, 83, 31, 0.12); /* rust tint */ /* --- Status --- */ --ic-success-bg: rgba(180, 150, 40, 0.14); --ic-success-fg: #7c6a1c; --ic-error-bg: rgba(170, 60, 45, 0.10); --ic-error-fg: #aa3c2d; --ic-info-bg: rgba(209, 138, 46, 0.12); --ic-info-fg: #ac6c1c; /* --- Typography --- Galdeano (display, single weight) for masthead + headlines. Inter for body, UI, nav, captions. Both Google Fonts. */ --ic-font-display: "Galdeano", Georgia, "Times New Roman", serif; --ic-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --ic-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --ic-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --ic-weight-body: 400; --ic-weight-medium: 500; --ic-weight-semibold: 600; --ic-weight-bold: 700; /* Type scale - 1.25 major third, rooted at 18px body */ --ic-text-body: 1.125rem; /* 18px */ --ic-text-lede: 1.375rem; /* 22px */ --ic-text-small: 0.875rem; /* 14px */ --ic-text-meta: 0.8125rem; /* 13px */ --ic-text-label: 0.75rem; /* 12px, uppercase */ --ic-h1: 2.75rem; --ic-h2: 2rem; --ic-h3: 1.5625rem; --ic-h4: 1.25rem; --ic-masthead: 2.25rem; --ic-leading-body: 1.68; --ic-leading-tight: 1.15; --ic-leading-snug: 1.35; --ic-tracking-label: 0.09em; /* --- Spacing (8px grid) --- */ --ic-space-xs: 4px; --ic-space-sm: 8px; --ic-space-md: 16px; --ic-space-lg: 24px; --ic-space-xl: 32px; --ic-space-2xl: 48px; --ic-space-3xl: 64px; --ic-space-4xl: 96px; /* --- Layout: page-shell grid + width system (ported from chadlewine) --- SITE WIDTH is the box. Everything sits inside it by default; a .full-bleed child breaks out to the viewport edges. --ic-site-width shrinks responsively so content never kisses the edge. There is exactly ONE width rule for the whole site. */ --ic-site-width-cap: 1180px; /* outer frame */ --ic-site-edge-min: 1rem; /* breathing room each side */ --ic-site-width: min(var(--ic-site-width-cap), calc(100vw - var(--ic-site-edge-min) * 2)); --ic-reading-width: min(720px, calc(100vw - var(--ic-site-edge-min) * 2)); /* post body measure */ --ic-content-width: min(860px, calc(100vw - var(--ic-site-edge-min) * 2)); /* post header, cards column */ --ic-nav-height: 76px; /* --- WP admin bar --- Mirrors core's own two-token contract (wp-includes/css/admin-bar.css and block-library/common.css). Both read core's variable and fall back to 0px, which is what logged-out visitors get: core only enqueues admin-bar.css when the bar actually renders, so the variable simply does not exist then. Never hardcode 32/46 again - read these. --ic-adminbar-height: how far core's inline _admin_bar_bump_cb() style pushes down (32px, 46px at <=782px). Subtract from any 100vh block or it overflows the fold by exactly the bar's height. --ic-adminbar-offset: how far to push a position:fixed element. Same as height EXCEPT at <=600px, where core switches the bar to position:absolute so it scrolls away and fixed elements must NOT offset (they would strand a gap at the top). */ --ic-adminbar-height: var(--wp-admin--admin-bar--height, 0px); --ic-adminbar-offset: var(--wp-admin--admin-bar--height, 0px); /* --- Radius + shadow (soft, organic - matches the natural brand) --- */ --ic-radius-sm: 4px; --ic-radius: 8px; --ic-radius-lg: 16px; --ic-shadow-sm: 0 1px 2px rgba(46, 48, 0, 0.06); --ic-shadow: 0 6px 24px rgba(46, 48, 0, 0.08); --ic-shadow-lg: 0 18px 48px rgba(46, 48, 0, 0.12); /* --- Motion --- */ --ic-ease: cubic-bezier(0.16, 1, 0.3, 1); --ic-ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --ic-fast: 150ms; --ic-base: 250ms; --ic-slow: 450ms; /* z-index - stays under #wpadminbar, which core parks at z-index 99999. */ --ic-z-progress: 101; --ic-z-header: 100; --ic-z-toast: 120; } /* Below 600px core makes #wpadminbar position:absolute, so it scrolls away with the page and fixed chrome must sit flush at the top again. Height is deliberately left alone: the bump still applies at this width. */ @media screen and (max-width: 600px) { :root { --ic-adminbar-offset: 0px; } }