/* ================================================================= Design System — Spatial · Translucent · Elegant ================================================================= Deep spatial design with prominent translucency & floating panels. Themes controlled via [data-theme] on . ================================================================= */ /* ── Reset & Base ─────────────────────────────────────────────── */ html, body { margin: 0; padding: 0; height: 100%; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } ::selection { background-color: var(--selection-highlight-bg, #d7e0f0); color: #111111; } ::-moz-selection { background-color: var(--selection-highlight-bg, #d7e0f0); color: #111111; } p { font-size: 1rem; line-height: 1.6; margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 600; line-height: 1.25; color: var(--color-text-primary); } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; } h4 { font-size: 1.125rem; } /* ── Theme-Independent Tokens ─────────────────────────────────── */ :root { /* Typography — Masthead */ --font-display: 'Chomsky', serif; /* Typography — Editorial Serifs */ --font-headline: 'Baskervville', 'Georgia', serif; --font-headline-italic: 'Baskervville', 'Georgia', serif; --font-bodoni: 'Bodoni Moda', 'Baskervville', 'Georgia', serif; --font-saol: 'Saol Display', 'Baskervville', 'Georgia', serif; --font-instrument: 'Instrument Serif', 'Baskervville', serif; /* Typography — Sans */ --font-sans: 'Helvetica Now Text', 'Libre Franklin', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; --font-sans-medium: 'Libre Franklin', 'Helvetica Now Text', 'Helvetica Neue', sans-serif; --font-sans-bold: 'Libre Franklin', 'Helvetica Now Text', 'Helvetica Neue', sans-serif; --font-sans-condensed: 'Libre Franklin', 'Helvetica Now Text', 'Arial Narrow', sans-serif; /* Typography — Body / Mono */ --font-body: 'iA Writer Quattro', system-ui, -apple-system, sans-serif; --font-body-italic: 'iA Writer Quattro', system-ui, sans-serif; --font-body-bold: 'iA Writer Quattro', system-ui, sans-serif; --font-article-body: 'Times New Roman Custom', 'Times New Roman', Times, serif; /* Spacing */ --space-xxs: 0.125rem; --space-xs: 0.25rem; --space-sm: 0.5rem; --space-sm2: 0.75rem; --space-md: 1rem; --space-md2: 1.25rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-xxl: 3rem; --space-3xl: 4rem; --article-paragraph-gap: var(--space-md); /* Border Radius */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; --radius-main: 1rem; /* Transitions */ --transition-fast: 120ms; --transition-normal: 200ms; --transition-slow: 350ms; --transition-slower: 500ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1); /* Hover effects */ --hover-lift-subtle: translateY(-2px); /* Colors */ --selection-highlight-bg: #d7e0f0; --form-error-color: #FFA500; /* #e63946 red */ --form-success-color: #4CAF50; /* #2a9d8f green */ --image-caption-color: #555555; /* Strapi Rich Text defaults */ --strapi-bold-weight: 700; --strapi-strong-color: currentColor; --strapi-italic-style: italic; --strapi-underline-thickness: 0.08em; --strapi-strikethrough-thickness: 0.08em; --strapi-inline-code-bg: light-dark(#f1f1f1, #2a2a2a); --strapi-inline-code-color: light-dark(#1f1f1f, #f1f1f1); --strapi-code-block-bg: light-dark(#f7f7f7, #1c1c1c); --strapi-code-block-border-color: light-dark(#dddddd, #363636); --strapi-code-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; --strapi-blockquote-border: 3px solid light-dark(#121212, #d5d5d5); --strapi-blockquote-bg: light-dark(#fbfbfb, #171717); --strapi-link-underline: 1px solid currentColor; --strapi-link-hover-color: currentColor; }