/** * KYNDER DESIGN TOKENS — the single source of truth. * * Every colour, size, radius, shadow and motion value used anywhere in the app * is declared here as a CSS custom property and consumed via the Tailwind theme * (see `tailwind.config.ts`). Components reference tokens ONLY — never raw hex. * * PALETTE RULE: the seven brand colours below are the ONLY hex values in the * public/brand palette. All other brand colour values are opacity-derived from * them via color-mix(..., transparent). No pure white, no pure black, no grey, * no glows. The one sanctioned exception is the UI-STATE group further down * (success/danger/warning/info) — functional status hues used ONLY by the * internal admin/coach dashboards, deliberately kept out of the brand palette. * * ACCESSIBILITY NOTE ON ACCENTS: --terracotta and --gold do not reach 4.5:1 * against --cream / --cream-card, so they are used for FILLS, BORDERS, ICONS, * FOCUS RINGS and for TEXT ON DARK surfaces only. On light surfaces, text uses * --ink / --navy-deep / --navy. This keeps every text/background pair AA. */ :root { /* ============================================================= * * COLOUR — brand palette (the only hex in the codebase) * ============================================================= */ --navy-deep: #1b2038; /* primary brand, headlines, footer bg */ --navy: #2c3356; /* buttons, active nav, dark sections */ --terracotta: #c87d5d; /* primary accent, CTAs, links (on dark) */ --gold: #b08d57; /* secondary accent, used sparingly */ --cream: #faf6f0; /* page background */ --cream-card: #eee7d9; /* cards, inputs, dividers */ --ink: #26241f; /* body text — never pure black */ /* Opacity-derived variants (the ONLY permitted derivations). */ --ink-90: color-mix(in srgb, var(--ink) 90%, transparent); --ink-80: color-mix(in srgb, var(--ink) 80%, transparent); --ink-70: color-mix(in srgb, var(--ink) 70%, transparent); --ink-60: color-mix(in srgb, var(--ink) 60%, transparent); --ink-40: color-mix(in srgb, var(--ink) 40%, transparent); --ink-20: color-mix(in srgb, var(--ink) 20%, transparent); --ink-10: color-mix(in srgb, var(--ink) 10%, transparent); --cream-80: color-mix(in srgb, var(--cream) 80%, transparent); --cream-70: color-mix(in srgb, var(--cream) 70%, transparent); --cream-40: color-mix(in srgb, var(--cream) 40%, transparent); --navy-deep-80: color-mix(in srgb, var(--navy-deep) 80%, transparent); --navy-deep-60: color-mix(in srgb, var(--navy-deep) 60%, transparent); /* Terracotta deepened toward ink so it reaches AA (>=3:1 large text, ~4.1:1) as TEXT on light surfaces — the only terracotta permitted for light-surface text (plain --terracotta is 2.98:1 on cream). Used for the hero emphasis and the question numbers on /questions. */ --terracotta-text: color-mix(in srgb, var(--terracotta) 78%, var(--ink)); --terracotta-90: color-mix(in srgb, var(--terracotta) 90%, transparent); --terracotta-40: color-mix(in srgb, var(--terracotta) 40%, transparent); --terracotta-16: color-mix(in srgb, var(--terracotta) 16%, transparent); --gold-40: color-mix(in srgb, var(--gold) 40%, transparent); --gold-16: color-mix(in srgb, var(--gold) 16%, transparent); /* Interaction shades for accent fills. The primary button carries dark --navy-deep text on the terracotta fill, so these LIGHTEN toward --cream rather than darkening toward --ink: base terracotta/navy-deep is ~5.0:1, but darkening the fill drops it below the 4.5:1 AA floor (~4.2:1). Lightening lifts hover/active to ~5.6:1 / ~6.0:1 and matches how --navy-hover already mixes toward --cream. Not new hues — the same terracotta, brightened. */ --terracotta-hover: color-mix(in srgb, var(--terracotta) 88%, var(--cream)); --terracotta-active: color-mix(in srgb, var(--terracotta) 80%, var(--cream)); --navy-hover: color-mix(in srgb, var(--navy) 90%, var(--cream)); --navy-active: color-mix(in srgb, var(--navy) 82%, var(--cream)); /* ============================================================= * * UI STATE — admin/internal only (NOT brand colours) * Four muted semantic status hues for the internal admin/coach * dashboards (status badges, delete affordances). Kept out of the * public brand palette above. Each `*-soft` is a light tint for badge * backgrounds; the base hue is AA as text on cream and on its own soft. * ============================================================= */ --success: #3f6a46; --success-soft: color-mix(in srgb, var(--success) 15%, transparent); --danger: #a8433a; --danger-soft: color-mix(in srgb, var(--danger) 15%, transparent); --warning: #8a5a12; --warning-soft: color-mix(in srgb, var(--warning) 16%, transparent); --info: #3a5c82; --info-soft: color-mix(in srgb, var(--info) 15%, transparent); /* ============================================================= * * TYPOGRAPHY * ============================================================= */ /* --font-lora / --font-inter are injected on by next/font. */ --font-display: var(--font-lora, 'Lora'), Georgia, 'Times New Roman', serif; --font-sans: var(--font-inter, 'Inter'), system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Arabic UI face (injected by next/font); used only by the dashboard in RTL. */ --font-arabic: var(--font-arabic-plex, 'IBM Plex Sans Arabic'), 'Segoe UI', Tahoma, sans-serif; /* PUBLIC BRAND Arabic faces (A2) — loaded only on /ar. Editorial Naskh display (Markazi Text) for headings, clean sans (Noto Sans Arabic) for body: the Arabic mirror of Lora + Inter. Kept separate from the admin --font-arabic. */ --font-arabic-display: var(--font-markazi, 'Markazi Text'), 'Noto Naskh Arabic', 'Amiri', Georgia, serif; --font-arabic-body: var(--font-noto-arabic, 'Noto Sans Arabic'), 'Segoe UI', Tahoma, sans-serif; /* Arabic tuning — NOT a family swap. Arabic has tall ascenders / deep descenders and no capitals, so it needs looser leading than Latin; and it is cursive, so it must NEVER be letter-spaced (tracking breaks the joins). Applied under [lang='ar'] in globals.css. Western digits are enforced in src/lib/format.ts. */ --lh-body-ar: 1.8; --lh-heading-ar: 1.4; /* Modular scale ~1.25 — 64 / 48 / 36 / 28 / 22 / 18 / 16 / 14 (px → rem). */ --fs-display-1: 4rem; /* 64 */ --fs-display-2: 3rem; /* 48 */ --fs-h2: 2.25rem; /* 36 */ --fs-h3: 1.75rem; /* 28 */ --fs-h4: 1.375rem; /* 22 */ --fs-lead: 1.125rem; /* 18 */ --fs-body: 1rem; /* 16 — minimum body size */ --fs-small: 0.875rem; /* 14 */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-heading: 1.25; --lh-body: 1.6; --tracking-display: -0.02em; /* slight negative for display */ --tracking-tight: -0.01em; --tracking-normal: 0em; --tracking-eyebrow: 0.14em; /* uppercase eyebrows */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ============================================================= * * SPACING — 4px base scale * ============================================================= */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ /* Section padding — vary by section, never one uniform value. */ --section-sm: 6rem; /* 96 */ --section-md: 7.5rem; /* 120 */ --section-lg: 10rem; /* 160 */ /* ============================================================= * * LAYOUT * ============================================================= */ --container-max: 1120px; --gutter: 1.5rem; /* 24 — mobile */ --gutter-lg: 2rem; /* 32 — desktop */ /* ============================================================= * * RADIUS — 8 / 14 / 20 / 999 * ============================================================= */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-full: 999px; /* ============================================================= * * SHADOWS — exactly three, all very soft. No glows. * Tinted with --navy-deep (never black). * ============================================================= */ --shadow-1: 0 1px 2px color-mix(in srgb, var(--navy-deep) 6%, transparent), 0 1px 1px color-mix(in srgb, var(--navy-deep) 4%, transparent); --shadow-2: 0 6px 16px color-mix(in srgb, var(--navy-deep) 8%, transparent), 0 2px 6px color-mix(in srgb, var(--navy-deep) 5%, transparent); --shadow-3: 0 18px 48px color-mix(in srgb, var(--navy-deep) 12%, transparent), 0 6px 16px color-mix(in srgb, var(--navy-deep) 6%, transparent); /* ============================================================= * * MOTION * ============================================================= */ --dur-fast: 160ms; --dur-base: 260ms; --dur-slow: 480ms; --dur-ambient: 14s; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); }