/* ================================================================ BAIA — Foundations tokens.css · Design-system reference (moss / cream / orange · Sora) 1:1 port of the designer's colors_and_type.css. Values are verbatim. baia-app.fr ================================================================ */ /* ---------- Webfonts (self-hosted, CNIL: no third-party requests) ---- Single family: Sora, weights 400–800, no italics. The woff2 files are the latin subset from @fontsource/sora, copied into assets/fonts/. NO Google Fonts @import (the original @import in the handoff sheet was dropped on purpose — it would leak an IP to fonts.googleapis.com). -------------------------------------------------------------------- */ @font-face { font-family: "Sora"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/sora-400.woff2") format("woff2"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/sora-500.woff2") format("woff2"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/sora-600.woff2") format("woff2"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/sora-700.woff2") format("woff2"); } @font-face { font-family: "Sora"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/sora-800.woff2") format("woff2"); } :root { /* ============================================================ COLOR — Neutrals (the spine of the system) Baia leans on warm off-whites + near-black moss ink. ============================================================ */ --ink: rgb(18,38,26); /* primary text, primary fill — moss */ --ink-soft: rgb(28,52,36); /* hover on dark surfaces */ --graphite: rgb(42,50,44); /* body copy on light */ --slate: rgb(90,102,92); /* secondary text */ --stone: rgb(107,115,107); /* tertiary text */ --pebble: rgb(138,140,128); /* meta / micro labels */ --silver: rgb(160,160,150); /* placeholder text */ --mist: rgb(216,219,208); /* disabled fill */ --hairline: rgba(18,38,26,0.10); /* dividers, card border */ --hairline-2: rgba(18,38,26,0.18); /* ghost-button border */ --scrim: rgba(18,38,26,0.50); /* modal scrim */ /* Paper — the warm cream the whole brand sits on. */ --paper: rgb(246,243,232); /* default surface */ --paper-warm: rgb(249,246,236); /* slightly warmer paper */ --paper-soft: rgb(239,233,214); /* soft-button fill */ --paper-deep: rgb(230,224,204); /* canvas / bone */ --paper-edge: rgb(230,224,204); /* hairline on bone */ /* Inverse — the dark surface the brand uses for premium moments. */ --night: rgb(18,38,26); --night-soft: rgb(28,52,36); --night-line: rgba(255,255,255,0.08); --night-glow: rgba(255,255,255,0.04); --on-night: rgb(246,243,232); --on-night-soft: rgba(255,255,255,0.65); --on-night-mute: rgba(255,255,255,0.45); /* ============================================================ COLOR — Semantic accents ============================================================ */ --terracotta: rgb(255,122,61); /* Attention — Baia's brand accent (orange) */ --terracotta-wash: rgb(255,224,203); --sage: rgb(30,158,90); /* Success */ --sage-wash: rgb(217,240,199); --sky: rgb(63,198,232); /* Info */ --sky-wash: rgb(222,243,250); --amethyst: rgb(20,92,58); /* Parcours / Journey — moss */ --amethyst-wash: rgb(217,240,199); --crimson: rgb(168,48,42); /* Error / destructive */ --crimson-soft: rgb(192,72,72); --crimson-wash: rgb(252,238,238); --neutre: rgb(107,115,107); /* Neutre / system */ --neutre-wash: rgb(230,224,204); /* ============================================================ COLOR — Semantic aliases (use these in components) ============================================================ */ --fg-1: var(--ink); --fg-2: var(--graphite); --fg-3: var(--slate); --fg-4: var(--pebble); --fg-placeholder:var(--silver); --fg-on-dark: var(--on-night); --bg-canvas: var(--paper-deep); /* page background */ --bg-surface: var(--paper); /* card on canvas */ --bg-elevated: #ffffff; /* white card */ --bg-soft: var(--paper-soft); /* soft button */ --bg-inverse: var(--night); --border-1: var(--hairline); --border-2: var(--hairline-2); --accent: var(--terracotta); --accent-wash: var(--terracotta-wash); --success: var(--sage); --success-wash: var(--sage-wash); --info: var(--sky); --info-wash: var(--sky-wash); --warning: var(--terracotta); --warning-wash: var(--terracotta-wash); --danger: var(--crimson); --danger-wash: var(--crimson-wash); --journey: var(--amethyst); --journey-wash: var(--amethyst-wash); /* ============================================================ RADIUS ============================================================ */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 24px; --radius-pill: 999px; /* ============================================================ SHADOW ============================================================ */ --shadow-ink: inset 0 1px 0 0 rgba(255,255,255,0.08), 0 10px 24px -10px rgba(11,11,12,0.5); --shadow-card: 0 1px 2px rgba(11,11,12,0.04), 0 8px 24px -12px rgba(11,11,12,0.18); --shadow-float: 0 12px 40px -16px rgba(11,11,12,0.28); /* Green-tinted soft elevation for showcase cards / phone. */ --shadow-soft: 0 16px 40px rgba(20,92,58,0.08); --shadow-lift: 0 24px 55px rgba(20,92,58,0.2); /* ============================================================ SPACING — 4px base scale ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; /* ============================================================ TYPE — Families (single family: Sora) ============================================================ */ --font-display: "Sora", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-display-alt: "Sora", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-ui: "Sora", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif; --font-system: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: "Menlo", "SF Mono", ui-monospace, Consolas, monospace; /* ============================================================ TYPE — Scale (semantic) ============================================================ */ --t-display-xl: 800 48px/1.0 var(--font-display); --t-display-lg: 700 38px/1.05 var(--font-display-alt); --t-display-md: 700 26px/1.1 var(--font-display-alt); --t-display-sm: 700 22px/1.15 var(--font-display); --t-h1: 700 22px/1.2 var(--font-ui); --t-h2: 700 19px/1.25 var(--font-ui); --t-h3: 700 16px/1.3 var(--font-ui); --t-h4: 600 15px/1.3 var(--font-ui); --t-body: 400 15px/1.45 var(--font-ui); --t-body-sm: 400 13px/1.45 var(--font-ui); --t-body-xs: 400 12px/1.4 var(--font-ui); --t-label: 500 11px/1.0 var(--font-ui); --t-button: 600 15px/1.0 var(--font-ui); --t-caption: 400 13px/1.3 var(--font-ui); /* Eyebrows / section starters — UPPERCASE + tracked */ --t-eyebrow: 700 12px/1.0 var(--font-ui); --t-eyebrow-lg:700 13px/1.0 var(--font-ui); --t-token: 400 11px/1.3 var(--font-mono); /* Tracking */ --track-eyebrow: 0.08em; --track-eyebrow-2:0.12em; --track-display: -0.015em; --track-display-tight: -0.03em; /* wordmark / hero */ } /* ================================================================ Element defaults ================================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; background: var(--paper); color: var(--fg-1); font: var(--t-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--terracotta); color: #fff; } h1, h2, h3, h4 { margin: 0; color: var(--fg-1); } p { font: var(--t-body); color: var(--fg-2); margin: 0; text-wrap: pretty; } a { color: var(--amethyst); text-decoration: none; } a:hover { color: var(--ink-soft); } small, .meta { font: var(--t-body-sm); color: var(--fg-3); } code, pre, .token { font: var(--t-token); color: var(--fg-3); } /* The signature "section starter" */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--terracotta); } .eyebrow--lg { font: var(--t-eyebrow-lg); letter-spacing: var(--track-eyebrow-2); text-transform: uppercase; color: var(--terracotta); }