/* ============================================================ Innersentia — themes/innersentia-tokens.css Layer 2: Site tokens — fonts and CSS custom property values only. Innersentia Therapies theme refreshed for the new logo. Direction: deep midnight navy, soft champagne gold, muted powder blue, and warm ivory surfaces. Logo-derived anchors: Navy: #0f1833 Gold range: #d4b080 → #e5c79c Accent tan: #cea16e Slogan blue:#abbdd6 Font note: Google Fonts import used here for simplicity. For production, replace with self-hosted @font-face blocks using woff2 files and add in for the critical display weights. ============================================================ */ /* ── Fonts ──────────────────────────────────────────────── */ /* @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,300;1,9..40,400&display=swap'); */ /* cormorant-garamond-300 - latin */ @font-face { font-display: swap; font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300; src: url("/fonts/cormorant-garamond-v21-latin-300.woff2") format("woff2"); } /* cormorant-garamond-300italic - latin */ @font-face { font-display: swap; font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300; src: url("/fonts/cormorant-garamond-v21-latin-300italic.woff2") format("woff2"); } /* cormorant-garamond-regular - latin */ @font-face { font-display: swap; font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; src: url("/fonts/cormorant-garamond-v21-latin-regular.woff2") format("woff2"); } /* cormorant-garamond-500 - latin */ @font-face { font-display: swap; font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; src: url("/fonts/cormorant-garamond-v21-latin-500.woff2") format("woff2"); } /* dm-sans-300 - latin */ @font-face { font-display: swap; font-family: "DM Sans"; font-style: normal; font-weight: 300; src: url("/fonts/dm-sans-v17-latin-300.woff2") format("woff2"); } /* dm-sans-300italic - latin */ @font-face { font-display: swap; font-family: "DM Sans"; font-style: italic; font-weight: 300; src: url("/fonts/dm-sans-v17-latin-300italic.woff2") format("woff2"); } /* dm-sans-regular - latin */ @font-face { font-display: swap; font-family: "DM Sans"; font-style: normal; font-weight: 400; src: url("/fonts/dm-sans-v17-latin-regular.woff2") format("woff2"); } /* dm-sans-500 - latin */ @font-face { font-display: swap; font-family: "DM Sans"; font-style: normal; font-weight: 500; src: url("/fonts/dm-sans-v17-latin-500.woff2") format("woff2"); } /* dm-sans-600 - latin */ @font-face { font-display: swap; font-family: "DM Sans"; font-style: normal; font-weight: 600; src: url("/fonts/dm-sans-v17-latin-600.woff2") format("woff2"); } /* ── Light mode (default) ─────────────────────────────── Calm, premium, logo-led palette. Use the navy for nav/footer/hero bands; gold is the main CTA and interactive accent; powder blue supports quieter UI states. ──────────────────────────────────────────────────────────── */ :root { color-scheme: light; /* ── Brand anchors ── */ --brand-navy: #0f1833; --brand-navy-soft: #192848; --brand-gold: #d4b080; --brand-gold-warm: #cea16e; --brand-gold-light: #e5c79c; --brand-champagne: #e2cba9; --brand-gold: #df9d54; --brand-slogan-blue: #abbdd6; --brand-gradient-gold: linear-gradient(135deg, #d4b080 0%, #d7b790 20%, #dabd93 40%, #e2cba9 58%, #dfc197 74%, #e2c59d 88%, #e5c79c 100%); /* ── Surfaces ── */ --color-bg: hsl(38, 45%, 96%); /* warm ivory */ --color-bg-alt: hsl(38, 34%, 92%); /* champagne wash */ --color-surface: hsl(42, 48%, 98%); --color-surface-alt: hsl(39, 35%, 94%); --color-border: hsl(37, 22%, 82%); --color-border-strong: hsl(35, 20%, 67%); /* ── Text ── */ --color-text: hsl(225, 37%, 14%); --color-text-muted: hsl(224, 18%, 31%); --color-text-subtle: hsl(222, 12%, 40%); --color-heading: var(--brand-navy); /* ── Accent — champagne gold ── */ --color-accent: hsl(35, 60%, 34%); --color-accent-hover: hsl(35, 65%, 25%); --color-accent-text: hsl(0, 0%, 100%); --color-accent-dim: hsl(36, 58%, 91%); --color-accent-border: hsl(35, 45%, 70%); /* ── Eyebrow labels ── */ --color-eyebrow: hsl(35, 62%, 28%); --color-eyebrow-on-dark: var(--brand-gold); /* ── Secondary accent — powder blue from logo slogan ── */ --color-accent-secondary: #6f89ad; --color-accent-secondary-hover: #526d94; --color-accent-secondary-dim: hsl(216, 38%, 93%); --color-accent-secondary-border: hsl(216, 28%, 75%); /* ── Dark panels (nav, footer, hero overlays) ── */ --color-dark-bg: var(--brand-navy); --color-dark-bg-alt: hsl(225, 46%, 17%); --color-dark-text: hsl(218, 42%, 89%); --color-dark-text-muted: var(--brand-slogan-blue); --color-dark-accent: var(--brand-champagne); --color-dark-border: hsl(224, 32%, 27%); /* ── Theme toggle ── */ --color-toggle-bg: hsl(39, 35%, 91%); --color-toggle-border: hsl(36, 24%, 75%); --color-toggle-fg: var(--brand-navy-soft); --color-toggle-hover-bg: hsl(38, 45%, 87%); /* ── Typography ── */ --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "DM Sans", system-ui, sans-serif; /* ── Type scale — tuned to Innersentia reference site rhythm ── core.css mapping: h1→hero, h2→3xl, h3→2xl, h4→xl, body→base, lead→lg */ --text-xs: 0.85rem; /* eyebrow/meta — ref: 0.72rem */ --text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.95rem); /* nav/small body — ref: 0.85–0.9rem */ --text-base: 1rem; /* body — ref: 1rem fixed */ --text-lg: 1.1rem; /* lead — ref: 1.1rem */ --text-xl: clamp(1.2rem, 1rem + 0.9vw, 1.35rem); /* h4/card titles — ref: ~1.2rem */ --text-2xl: clamp(1.4rem, 2vw, 1.7rem); /* h3 — ref: clamp(1.4,2vw,1.7) */ --text-3xl: clamp(1.9rem, 3.5vw, 2.7rem); /* h2 — ref: clamp(1.9,3.5vw,2.7) */ --text-hero: clamp(2.6rem, 5.5vw, 4rem); /* h1 — ref: clamp(2.6,5.5vw,4) */ /* ── Spacing scale (fluid) ── */ --space-1: clamp(0.25rem, 0.22rem + 0.15vw, 0.375rem); --space-2: clamp(0.5rem, 0.46rem + 0.2vw, 0.625rem); --space-3: clamp(0.75rem, 0.65rem + 0.5vw, 1rem); --space-4: clamp(1rem, 0.85rem + 0.75vw, 1.375rem); --space-5: clamp(1.25rem, 1rem + 1vw, 1.5rem); --space-6: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); --space-7: clamp(1.75rem, 1.35rem + 2vw, 2.75rem); --space-8: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); --space-10: clamp(2.5rem, 1.75rem + 3.75vw, 5rem); --space-12: clamp(2.5rem, 1.5rem + 4.5vw, 6rem); /* section padding — ref: clamp(2,1+4.2vw,6) */ --space-16: clamp(3rem, 2rem + 5vw, 7rem); /* CTA padding — ref: clamp(3,1+4.2vw,7) */ /* ── Radius ── */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px; --radius-2xl: 48px; --radius-pill: 9999px; /* ── Shadows (soft navy-tinted) ── */ --shadow-sm: 0 1px 4px hsl(225 37% 10% / 0.07), 0 2px 10px hsl(225 37% 10% / 0.05); --shadow-md: 0 4px 20px hsl(225 37% 10% / 0.1), 0 2px 6px hsl(225 37% 10% / 0.06); --shadow-lg: 0 10px 40px hsl(225 37% 10% / 0.13), 0 4px 12px hsl(225 37% 10% / 0.07); --shadow-soft: 0 4px 24px hsl(225 37% 10% / 0.07), 0 2px 8px hsl(225 37% 10% / 0.04); --shadow-premium: 0 16px 52px hsl(225 37% 10% / 0.14), 0 4px 14px hsl(225 37% 10% / 0.07); /* ── Layout ── */ --container-max: 1100px; --is-section-wide: 1280px; /* wider inner width for full-bleed section layouts */ --container-narrow: 65ch; --header-height: clamp(60px, 7vw, 72px); --gutter: clamp(0.75rem, 1.5vw, 1.5rem); /* ref: clamp(0.5rem,1.4vw,1.5rem) */ /* ── Transitions ── */ --transition-fast: 180ms ease; --transition-base: 300ms ease; --ease: cubic-bezier(0.22, 0.1, 0.15, 1); /* ── Typography weights — ref site uses light body + medium labels ── */ --font-weight-body: 300; /* ref: body { font-weight: 300 } */ --font-weight-heading: 500; /* ref: h1–h4 { font-weight: 500 } */ --font-weight-eyebrow: 500; /* ref: .eyebrow { font-weight: 500 } */ --font-weight-btn: 500; /* ref: .btn { font-weight: 500 } */ --line-height-body: 1.75; /* ref: body { line-height: 1.75 } */ /* ── Letter spacing — Cormorant Garamond suits zero tracking at display sizes ── */ --tracking-h1: 0em; /* ref: not set — display serif needs no tightening */ --tracking-h2: 0em; --tracking-h3: 0em; --tracking-eyebrow: 0.14em; /* ref: .eyebrow { letter-spacing: 0.14em } */ --tracking-btn: 0.01em; /* ref: .btn { letter-spacing: 0.01em } */ /* ── Button shape ── */ --radius-btn: var(--radius-pill); /* ref: .btn { border-radius: 50px } */ --btn-padding: 0.85rem 1.9rem; /* ref: .btn { padding: 0.85rem 1.9rem } */ } /* ── Dark mode overrides ────────────────────────────────── The dark theme leans into the logo background. Gold remains warm and luminous, while blue-grey text keeps the mood soft. ──────────────────────────────────────────────────────────── */ [data-theme="dark"] { color-scheme: dark; --brand-navy: hsl(225, 55%, 10%); --brand-navy-soft: hsl(221, 48%, 16%); /* ── Surfaces — logo navy system ── */ --color-bg: #0f1833; --color-bg-alt: hsl(225, 48%, 14%); --color-surface: hsl(225, 42%, 17%); --color-surface-alt: hsl(225, 38%, 21%); --color-border: hsl(224, 30%, 28%); --color-border-strong: hsl(224, 24%, 40%); /* ── Text ── */ --color-text: hsl(39, 44%, 91%); --color-text-muted: hsl(218, 34%, 78%); --color-text-subtle: hsl(218, 22%, 64%); --color-heading: #e2cba9; /* ── Accent — logo gold for dark surfaces ── */ --color-accent: #d4b080; --color-accent-hover: #e5c79c; --color-accent-text: #0f1833; --color-accent-dim: hsl(36, 36%, 19%); --color-accent-border: hsl(36, 38%, 42%); /* ── Dark panels go subtly deeper in dark mode ── */ --color-dark-bg: hsl(225, 56%, 9%); --color-dark-bg-alt: #0f1833; --color-dark-text: hsl(218, 42%, 88%); --color-dark-text-muted: #abbdd6; --color-dark-accent: #e2cba9; --color-dark-border: hsl(224, 32%, 22%); /* ── Eyebrow labels ── */ --color-eyebrow: #e2cba9; --color-eyebrow-on-dark: #e5c79c; /* ── Secondary accent ── */ --color-accent-secondary: #abbdd6; --color-accent-secondary-hover: #c1d0e5; --color-accent-secondary-dim: hsl(216, 32%, 18%); --color-accent-secondary-border: hsl(216, 26%, 36%); /* ── Theme toggle ── */ --color-toggle-bg: hsl(225, 40%, 18%); --color-toggle-border: hsl(224, 28%, 31%); --color-toggle-fg: #e2cba9; --color-toggle-hover-bg: hsl(225, 36%, 23%); } h1, h2 { color: var(--color-heading); }