/* tokens/colors.css */ :root { /* ============================================================ BASE PALETTE — AIDDIA Warm earth tones (Terre / Sauge / Sable) with a discreet structural AIDDIA-blue accent. Blues are for structure only: lines, borders, section labels, tech/IA badges. ============================================================ */ /* Terre — primary, CTA, the mirrored "D" of the logo */ --terre: #C4724A; --terre-clair: #E8A882; /* hover, secondary icons */ --terre-pale: #F5DDD1; /* block fills, tags */ /* Sauge — secondary, IA labels */ --sauge: #5C7A5E; --sauge-clair: #A3BEA4; /* soft fills, icons */ --sauge-xl: #E0EBDF; /* very soft fills */ /* Neutrals — warm */ --sable: #F2EDE6; /* main background */ --lin: #E6DDD0; /* soft separators */ --brun-profond: #3D2B1F; /* text, dark surfaces */ --brun-moyen: #7A5C4A; /* secondary text (warm) */ --blanc: #FDFAF6; /* card / paper white, warm */ /* Bleu AIDDIA — STRUCTURAL, use discreetly */ --bleu: #3A7CBF; /* lines, borders, section labels, table headers */ --bleu-clair: #A8C6E8; /* alt table rows, very soft fills */ --bleu-pale: #DCE8F7; /* tech tags, IA badges */ /* Derived tints of brun for text hierarchy (warm, not grey) */ --brun-70: color-mix(in srgb, var(--brun-profond) 70%, var(--sable)); --brun-55: color-mix(in srgb, var(--brun-profond) 55%, var(--sable)); --brun-40: color-mix(in srgb, var(--brun-profond) 40%, var(--sable)); /* Derived hovers/press for filled surfaces */ --terre-dark: color-mix(in srgb, var(--terre) 84%, var(--brun-profond)); --sauge-dark: color-mix(in srgb, var(--sauge) 84%, var(--brun-profond)); --bleu-dark: color-mix(in srgb, var(--bleu) 84%, var(--brun-profond)); /* ============================================================ SEMANTIC ALIASES — reference these in components ============================================================ */ --bg: var(--sable); --bg-dark: var(--brun-profond); --surface: var(--blanc); --surface-card: var(--blanc); --surface-sunken: var(--terre-pale); --surface-soft: color-mix(in srgb, var(--sauge-clair) 32%, var(--sable)); --text: var(--brun-profond); --text-muted: var(--brun-moyen); --text-subtle: var(--brun-55); --text-on-dark: var(--sable); --text-on-primary: var(--blanc); --border: var(--lin); --border-strong: color-mix(in srgb, var(--brun-profond) 18%, var(--sable)); --border-structural: var(--bleu); /* blue rules & section frames */ --primary: var(--terre); --primary-hover: var(--terre-dark); --primary-press: color-mix(in srgb, var(--terre) 72%, var(--brun-profond)); --primary-soft: var(--terre-pale); --secondary: var(--sauge); --secondary-hover: var(--sauge-dark); --secondary-soft: color-mix(in srgb, var(--sauge-clair) 40%, var(--sable)); --accent-ai: var(--sauge); /* "Label IA" text/icon */ --accent-ai-soft: var(--bleu-pale); /* IA / tech badge fill */ --accent-ai-line: var(--bleu); --focus-ring: color-mix(in srgb, var(--bleu) 55%, transparent); /* ------------------------------------------------------------ COMPONENT SURFACES — declare fills as tokens, never as raw palette values inside a component. A component that pins its background to --blanc cannot follow a dark surface, and its text (which does follow --text) becomes illegible. ------------------------------------------------------------ */ --callout-info-fill: var(--bleu-pale); --callout-info-ink: var(--bleu-dark); --callout-tip-fill: var(--secondary-soft); --callout-tip-ink: var(--sauge-dark); --callout-warn-fill: var(--terre-pale); --callout-warn-ink: var(--terre-dark); --table-head-bg: var(--blanc); --table-head-ink: var(--bleu); --table-row-bg: var(--blanc); --table-row-alt: color-mix(in srgb, var(--bleu-clair) 22%, var(--blanc)); --btn-secondary-ink: var(--secondary); --btn-dark-bg: var(--brun-profond); --btn-dark-ink: var(--text-on-dark); --btn-dark-hover: color-mix(in srgb, var(--brun-profond) 88%, var(--terre)); } /* ============================================================ DARK SURFACES — put data-theme="dark" on any element sitting on Brun profond (a whole page, or a single trust band). Only the semantic aliases are redefined; the base palette is the same in both themes. Soft fills are mixed toward Brun profond instead of Blanc, and inks flip to the -clair tints. ============================================================ */ [data-theme="dark"] { color-scheme: dark; --bg: var(--brun-profond); --surface: color-mix(in srgb, var(--brun-profond) 86%, var(--blanc)); --surface-card: var(--surface); --surface-sunken: color-mix(in srgb, var(--brun-profond) 80%, var(--terre)); --surface-soft: color-mix(in srgb, var(--brun-profond) 80%, var(--sauge)); --text: var(--sable); --text-muted: var(--sauge-clair); --text-subtle: color-mix(in srgb, var(--sable) 62%, var(--brun-profond)); --border: color-mix(in srgb, var(--sable) 20%, var(--brun-profond)); --border-strong: color-mix(in srgb, var(--sable) 34%, var(--brun-profond)); --primary-soft: color-mix(in srgb, var(--brun-profond) 78%, var(--terre)); --secondary-soft: color-mix(in srgb, var(--brun-profond) 80%, var(--sauge)); --accent-ai-soft: color-mix(in srgb, var(--brun-profond) 78%, var(--bleu)); /* Inks are mixed toward Sable, not left on the bare -clair tints: against the new dark fills those measured 3,5–4,4:1 — under AA for a semibold 14px title, and lighter than the body text below it. */ --callout-info-fill: color-mix(in srgb, var(--bleu) 20%, var(--surface)); --callout-info-ink: color-mix(in srgb, var(--bleu-clair) 75%, var(--sable)); --callout-tip-fill: color-mix(in srgb, var(--sauge) 24%, var(--surface)); --callout-tip-ink: color-mix(in srgb, var(--sauge-clair) 50%, var(--sable)); --callout-warn-fill: color-mix(in srgb, var(--terre) 22%, var(--surface)); --callout-warn-ink: color-mix(in srgb, var(--terre-clair) 45%, var(--sable)); --table-head-bg: color-mix(in srgb, var(--brun-profond) 92%, var(--blanc)); --table-head-ink: var(--bleu-clair); --table-row-bg: var(--surface); --table-row-alt: color-mix(in srgb, var(--bleu) 16%, var(--surface)); /* The outline ink lightens; the "dark" fill inverts — a Brun profond button on a Brun profond page is a 1:1 rectangle, i.e. an invisible control. */ --btn-secondary-ink: var(--sauge-clair); --btn-dark-bg: var(--sable); --btn-dark-ink: var(--brun-profond); --btn-dark-hover: color-mix(in srgb, var(--sable) 86%, var(--terre)); } /* tokens/typography.css */ :root { /* ============================================================ TYPOGRAPHY — AIDDIA Display: Playfair Display (serif) — headlines, big moments. Corps: DM Sans — body, UI, long-form. 300/400 for text. Label: DM Sans 500, uppercase + tracking — captions, eyebrows. The logo is artwork (see the Wordmark component), not a font. ============================================================ */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-sans: 'DM Sans', system-ui, -apple-system, Segoe UI, sans-serif; --font-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Weights */ --fw-light: 300; /* @kind font */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ /* Type scale (rem, 16px base) — fluid-ready static values */ --text-2xs: 0.6875rem; /* 11px — micro label */ --text-xs: 0.75rem; /* 12px — caption */ --text-sm: 0.875rem; /* 14px — small body / UI */ --text-md: 1rem; /* 16px — body */ --text-lg: 1.125rem; /* 18px — lead body */ --text-xl: 1.375rem; /* 22px — small heading */ --text-2xl: 1.75rem; /* 28px — h3 */ --text-3xl: 2.375rem; /* 38px — h2 */ --text-4xl: 3.25rem; /* 52px — h1 */ --text-5xl: 4.5rem; /* 72px — display / hero */ /* Line heights */ --lh-tight: 1.08; /* @kind font */ --lh-snug: 1.25; /* @kind font */ --lh-normal: 1.5; /* @kind font */ --lh-relaxed: 1.7; /* @kind font */ /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-label: 0.14em; /* uppercase labels */ --tracking-caps: 0.08em; } /* ---- Element defaults ---- */ body { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--text-md); line-height: var(--lh-normal); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, .u-display { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--text); } /* ---- Utility classes ---- */ .u-display { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } .u-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); } .u-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-3xl); line-height: 1.12; letter-spacing: var(--tracking-tight); } .u-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-2xl); line-height: var(--lh-snug); } .u-lead { font-size: var(--text-lg); line-height: var(--lh-relaxed); color: var(--text-muted); font-weight: var(--fw-light); } .u-body { font-size: var(--text-md); line-height: var(--lh-relaxed); } .u-small { font-size: var(--text-sm); line-height: var(--lh-normal); } .u-label { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-subtle); } /* tokens/spacing.css */ :root { /* ============================================================ SPACING — AIDDIA. 4px base, generous rhythm for an editorial, breathing SaaS-warm layout. ============================================================ */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ /* Layout */ --container: 1200px; --container-narrow: 760px; /* long-form / docs prose */ --gutter: var(--space-5); --section-y: var(--space-9); } /* tokens/elevation.css */ :root { /* ============================================================ RADIUS, BORDER & ELEVATION — AIDDIA Soft but not pill-round. Shadows are warm, low, diffuse (tinted with brun, never neutral grey/black). ============================================================ */ /* Corner radii */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 8px; /* default card / input (charter v1.1) */ --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* Border widths */ --border-width: 1px; --border-width-strong: 1.5px; /* Warm shadows — tinted with brun profond, low & soft */ --shadow-xs: 0 1px 2px color-mix(in srgb, var(--brun-profond) 8%, transparent); --shadow-sm: 0 1px 2px color-mix(in srgb, var(--brun-profond) 8%, transparent), 0 2px 6px color-mix(in srgb, var(--brun-profond) 6%, transparent); --shadow-md: 0 2px 4px color-mix(in srgb, var(--brun-profond) 7%, transparent), 0 8px 20px color-mix(in srgb, var(--brun-profond) 9%, transparent); --shadow-lg: 0 4px 8px color-mix(in srgb, var(--brun-profond) 8%, transparent), 0 18px 44px color-mix(in srgb, var(--brun-profond) 12%, transparent); /* Focus ring */ --ring: 0 0 0 3px var(--focus-ring); /* Motion — calm, no bounce */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur: 200ms; /* @kind other */ --dur-slow: 360ms; /* @kind other */ }