/* ========================================================= Bioelectric Recovery — Design Tokens Dark editorial. Deep teal + muted copper. Clinical type. ========================================================= */ :root { /* ----- Brand palette (from brand strategy) ----- */ --near-black: #0A0B0D; --dark-charcoal: #15181C; --charcoal: #1D2227; --charcoal-2: #262C33; --deep-teal: #0E3B3A; --teal: #1A5957; --teal-bright: #2E8F8B; --pale-teal: #A8C9C6; --muted-copper: #C47A4A; --copper-soft: #D99870; --clinical-white: #F5F2EC; --bone: #E8E3D8; --paper: #EEEAE0; --ink: #12161A; --ink-60: rgba(18, 22, 26, 0.60); --ink-40: rgba(18, 22, 26, 0.40); /* ----- Text on dark surfaces ----- */ --fg: #EDE9DF; --fg-muted: rgba(237, 233, 223, 0.62); --fg-faint: rgba(237, 233, 223, 0.38); --rule: rgba(237, 233, 223, 0.12); --rule-strong: rgba(237, 233, 223, 0.22); /* ----- Typography (default pairing: Editorial serif) ----- */ --font-display: "Fraunces", "GT Sectra", "Canela", Georgia, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; /* ----- Scale ----- */ --step--2: clamp(0.70rem, 0.68rem + 0.10vw, 0.75rem); --step--1: clamp(0.81rem, 0.78rem + 0.15vw, 0.88rem); --step-0: clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem); --step-1: clamp(1.10rem, 1.04rem + 0.30vw, 1.25rem); --step-2: clamp(1.35rem, 1.24rem + 0.55vw, 1.65rem); --step-3: clamp(1.75rem, 1.54rem + 1.05vw, 2.35rem); --step-4: clamp(2.35rem, 1.94rem + 2.05vw, 3.50rem); --step-5: clamp(2.75rem, 2.10rem + 3.20vw, 4.60rem); --step-6: clamp(3.20rem, 2.35rem + 4.20vw, 5.80rem); /* ----- Radii / spacing ----- */ --radius-s: 2px; --radius-m: 4px; --radius-l: 8px; --pad-page: clamp(1.25rem, 1rem + 2vw, 3rem); --rail-max: 1280px; --prose-max: 68ch; /* ----- Accents (controlled by tweaks) ----- */ --accent-primary: var(--teal-bright); --accent-warm: var(--muted-copper); } /* ========================================================= Aesthetic modes — toggled by data-aesthetic on ========================================================= */ html[data-aesthetic="dark"] { --bg: var(--near-black); --bg-2: var(--dark-charcoal); --bg-3: var(--charcoal); --surface: var(--dark-charcoal); --on-bg: var(--fg); --on-bg-mute: var(--fg-muted); --on-bg-faint:var(--fg-faint); --hairline: var(--rule); --hairline-strong: var(--rule-strong); } html[data-aesthetic="hybrid"] { --bg: var(--clinical-white); --bg-2: var(--paper); --bg-3: var(--near-black); --surface: var(--clinical-white); --on-bg: var(--ink); --on-bg-mute: var(--ink-60); --on-bg-faint:var(--ink-40); --hairline: rgba(18,22,26,0.12); --hairline-strong: rgba(18,22,26,0.28); } html[data-aesthetic="light"] { --bg: var(--clinical-white); --bg-2: var(--paper); --bg-3: var(--bone); --surface: var(--clinical-white); --on-bg: var(--ink); --on-bg-mute: var(--ink-60); --on-bg-faint:var(--ink-40); --hairline: rgba(18,22,26,0.12); --hairline-strong: rgba(18,22,26,0.28); } /* ========================================================= Type pairings — toggled by data-type on ========================================================= */ html[data-type="editorial"] { --font-display: "Fraunces", Georgia, serif; --font-body: "Inter", sans-serif; --display-weight: 360; --display-tracking: -0.022em; } html[data-type="clinical"] { --font-display: "Newsreader", "Source Serif Pro", Georgia, serif; --font-body: "Inter", sans-serif; --display-weight: 400; --display-tracking: -0.012em; } html[data-type="journal"] { --font-display: "Cormorant Garamond", "Tiempos", Georgia, serif; --font-body: "Inter", sans-serif; --display-weight: 500; --display-tracking: -0.010em; } /* ========================================================= Accent intensity — toggled by data-accent on ========================================================= */ html[data-accent="restrained"] { --accent-primary: var(--pale-teal); --accent-warm: var(--copper-soft); --hero-surface: transparent; --section-accent-strength: 0.04; } html[data-accent="moderate"] { --accent-primary: var(--teal-bright); --accent-warm: var(--muted-copper); --hero-surface: color-mix(in oklab, var(--deep-teal) 40%, transparent); --section-accent-strength: 0.10; } html[data-accent="bold"] { --accent-primary: var(--teal-bright); --accent-warm: var(--muted-copper); --hero-surface: var(--deep-teal); --section-accent-strength: 0.20; } /* ========================================================= Base ========================================================= */ *,*::before,*::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); color: var(--on-bg); } body { font-family: var(--font-body); font-size: var(--step-0); line-height: 1.55; color: var(--on-bg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; } img, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } a:focus-visible, button:focus-visible { outline: 1px solid var(--accent-primary); outline-offset: 3px; } /* ---- Display type ---- */ .display { font-family: var(--font-display); font-weight: var(--display-weight, 380); letter-spacing: var(--display-tracking, -0.02em); line-height: 0.98; text-wrap: balance; } .display em { font-style: italic; font-weight: inherit; color: var(--accent-primary); } /* ---- Utility labels ---- */ .eyebrow { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.14em; color: var(--on-bg-mute); font-weight: 500; } .num { font-family: var(--font-mono); font-size: var(--step--2); color: var(--on-bg-faint); letter-spacing: 0.04em; } .hairline { border: 0; border-top: 1px solid var(--hairline); margin: 0; } /* ---- Container ---- */ .rail { width: 100%; max-width: var(--rail-max); margin-inline: auto; padding-inline: var(--pad-page); } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.85em 1.25em; font-family: var(--font-body); font-size: var(--step--1); font-weight: 500; letter-spacing: 0.01em; border-radius: 999px; border: 1px solid var(--hairline-strong); background: transparent; color: var(--on-bg); cursor: pointer; transition: all 180ms cubic-bezier(0.2,0.7,0.2,1); } .btn:hover { border-color: var(--accent-primary); color: var(--accent-primary); } .btn--primary { background: var(--accent-primary); color: var(--near-black); border-color: var(--accent-primary); } .btn--primary:hover { background: transparent; color: var(--accent-primary); } .btn--copper { color: var(--accent-warm); border-color: color-mix(in oklab, var(--accent-warm) 40%, transparent); } .btn--copper:hover { border-color: var(--accent-warm); color: var(--accent-warm); } .btn .arrow { display: inline-block; transition: transform 220ms cubic-bezier(0.2,0.7,0.2,1); } .btn:hover .arrow { transform: translateX(3px); } /* ---- Selection ---- */ ::selection { background: var(--accent-primary); color: var(--near-black); }