/* ============================================================ AFFETTO — design-tokens.css ============================================================ Every visual property of the site lives here as a CSS custom property. Edit a value, save, the entire site updates. This is the equivalent of a Figma styles panel. STRUCTURE (top to bottom): 1. MD3 COLOR ROLES — semantic colors (Material spec) 2. MD3 STATE LAYERS — hover/focus/pressed overlays 3. MD3 SHAPE TOKENS — corner radius scale 4. MD3 MOTION TOKENS — duration + easing 5. MD3 TYPESCALE FAMILIES — font stack 6. AFFETTO LAYOUT — container widths, paddings, sections 7. AFFETTO ALIASES — convenience names for component CSS ============================================================ */ :root { /* ============================================================ 1. MD3 COLOR ROLES ============================================================ */ /* Surface — light "paper" register, archival cream */ --md-sys-color-surface: #F7F4ED; --md-sys-color-surface-dim: #F1EDE3; --md-sys-color-surface-bright: #FAF8F2; --md-sys-color-surface-container-lowest: #FAF8F2; --md-sys-color-surface-container-low: #F7F4ED; --md-sys-color-surface-container: #F1EDE3; --md-sys-color-surface-container-high: #E8E3D5; --md-sys-color-surface-container-highest:#DDD7C7; /* On-surface — text + content on light surface */ --md-sys-color-on-surface: #131210; /* primary text */ --md-sys-color-on-surface-variant: #5C5A52; /* secondary text */ --md-sys-color-on-surface-dim: #8E8A7E; /* meta, labels */ --md-sys-color-on-surface-faint: #BDB8AB; /* hairlines, dim glyphs */ /* Outlines — borders + dividers */ --md-sys-color-outline: rgba(19, 18, 16, 0.18); --md-sys-color-outline-variant: rgba(19, 18, 16, 0.10); --md-sys-color-outline-faint: rgba(19, 18, 16, 0.05); /* Primary — single warm accent (oxblood) */ --md-sys-color-primary: #8B2A1E; --md-sys-color-on-primary: #F7F4ED; --md-sys-color-primary-container: rgba(139, 42, 30, 0.08); --md-sys-color-on-primary-container: #8B2A1E; --md-sys-color-primary-glow: rgba(139, 42, 30, 0.16); /* Secondary — bronze, declared but used sparingly */ --md-sys-color-secondary: #6B4F2A; --md-sys-color-secondary-container: rgba(107, 79, 42, 0.08); /* Success — muted forest, tuned to fit the warm/archival palette. Used for the access form's "received" state. */ --md-sys-color-success: #2D6B47; --md-sys-color-on-success: #F7F4ED; /* Inverse — dark "trace" register, used for trace section + footer */ --md-sys-color-inverse-surface: #100E0A; --md-sys-color-inverse-surface-2: #1A1813; --md-sys-color-on-inverse-surface: #E8E3D5; --md-sys-color-on-inverse-surface-variant:rgba(232, 227, 213, 0.55); --md-sys-color-on-inverse-surface-dim: rgba(232, 227, 213, 0.32); --md-sys-color-on-inverse-surface-faint: rgba(232, 227, 213, 0.18); --md-sys-color-inverse-outline: rgba(232, 227, 213, 0.18); --md-sys-color-inverse-outline-variant: rgba(232, 227, 213, 0.08); --md-sys-color-inverse-primary: #C44A2D; /* warmer accent on dark */ /* ============================================================ 2. MD3 STATE LAYERS — overlay opacities for interactive states ============================================================ */ --md-sys-state-hover-opacity: 0.08; --md-sys-state-focus-opacity: 0.12; --md-sys-state-pressed-opacity: 0.12; --md-sys-state-dragged-opacity: 0.16; /* ============================================================ 3. MD3 SHAPE TOKENS — corner radius scale ============================================================ */ --md-sys-shape-corner-none: 0px; --md-sys-shape-corner-extra-small: 4px; --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px; --md-sys-shape-corner-large: 16px; --md-sys-shape-corner-extra-large: 28px; --md-sys-shape-corner-full: 999px; /* ============================================================ 4. MD3 MOTION TOKENS — duration + easing ============================================================ */ --md-sys-motion-duration-short1: 50ms; --md-sys-motion-duration-short2: 100ms; --md-sys-motion-duration-short3: 150ms; --md-sys-motion-duration-short4: 200ms; --md-sys-motion-duration-medium1: 250ms; --md-sys-motion-duration-medium2: 300ms; --md-sys-motion-duration-medium3: 350ms; --md-sys-motion-duration-medium4: 400ms; --md-sys-motion-duration-long1: 450ms; --md-sys-motion-duration-long2: 500ms; --md-sys-motion-duration-long3: 550ms; --md-sys-motion-duration-long4: 600ms; --md-sys-motion-duration-extra-long1: 700ms; --md-sys-motion-duration-extra-long2: 800ms; --md-sys-motion-duration-extra-long3: 900ms; --md-sys-motion-duration-extra-long4: 1000ms; --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-standard-decelerate:cubic-bezier(0, 0, 0, 1); --md-sys-motion-easing-standard-accelerate:cubic-bezier(0.3, 0, 1, 1); --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-emphasized-decelerate:cubic-bezier(0.05, 0.7, 0.1, 1); --md-sys-motion-easing-emphasized-accelerate:cubic-bezier(0.3, 0, 0.8, 0.15); --md-sys-motion-easing-linear: cubic-bezier(0, 0, 1, 1); /* ============================================================ 5. MD3 TYPESCALE FAMILIES — font stack - Brand: Barlow (wordmark only) - Plain: Geist (all body, headlines, labels) - Mono: Geist Mono (eyebrows, technical strings, codes) ============================================================ */ --md-sys-typescale-brand-family: "Barlow", "Helvetica Neue", system-ui, sans-serif; --md-sys-typescale-plain-family: "Geist", "Helvetica Neue", system-ui, sans-serif; --md-sys-typescale-mono-family: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ============================================================ 6. AFFETTO LAYOUT TOKENS ============================================================ */ --container-max: 1080px; /* standard content max-width */ --container-wide: 1320px; /* wider variant for trace section */ --pad-x: 32px; /* page horizontal padding */ --space-section: 160px; /* between major sections */ --space-stanza: 72px; /* between stanzas within a section */ } /* Responsive layout adjustments */ @media (max-width: 1099px) { :root { --space-section: 120px; --pad-x: 28px; } } @media (max-width: 767px) { :root { --space-section: 88px; --space-stanza: 48px; --pad-x: 20px; } } @media (max-width: 479px) { :root { --pad-x: 18px; } } /* ============================================================ 7. AFFETTO ALIASES — convenience names for component CSS These resolve to MD3 tokens above. Component CSS should reference the alias names (--paper, --ink) for clarity. ============================================================ */ :root { --paper: var(--md-sys-color-surface); --paper-2: var(--md-sys-color-surface-container); --paper-3: var(--md-sys-color-surface-container-high); --ink: var(--md-sys-color-on-surface); --ink-2: #3A3833; /* between on-surface and on-surface-variant */ --ink-3: var(--md-sys-color-on-surface-variant); --ink-4: var(--md-sys-color-on-surface-dim); --ink-5: var(--md-sys-color-on-surface-faint); --rule: var(--md-sys-color-outline-variant); --rule-soft: var(--md-sys-color-outline-faint); --accent: var(--md-sys-color-primary); --accent-soft: var(--md-sys-color-primary-container); --accent-glow: var(--md-sys-color-primary-glow); --success: var(--md-sys-color-success); }