/* ============================================================================ TOTP — DESIGN TOKENS · single source of truth Couche 1 : primitives (échelles brutes, jamais utilisées directement) Couche 2 : alias sémantiques (les seuls consommés par style.css) ---------------------------------------------------------------------------- Toutes les couleurs sont en oklch() : la clarté perçue est constante quelle que soit la teinte, donc un accent dérivé du nom d'un compte garde le même contraste que tous les autres. C'est ce qui tient le système ensemble. ========================================================================== */ /* --- @property : rend les customs animables (anneau de compte à rebours) --- */ @property --p { syntax: ''; inherits: false; initial-value: 1; } @property --spin{ syntax: ''; inherits: false; initial-value: 0deg; } :root{ /* ========================================================== COUCHE 1 — PRIMITIVES ========================================================== */ /* ---- espacement : base 4px, échelle géométrique ---- */ --space-0: 0; --space-1: .25rem; /* 4px */ --space-2: .5rem; /* 8px */ --space-3: .75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ /* ---- typographie : échelle modulaire 1.25 (major third) ---- */ --text-2xs: .625rem; /* 10px — micro-labels HUD */ --text-xs: .6875rem; /* 11px */ --text-sm: .8125rem; /* 13px */ --text-base: .9375rem; /* 15px */ --text-md: 1.0625rem;/* 17px */ --text-lg: 1.3125rem;/* 21px */ --text-xl: 1.625rem; /* 26px */ --text-2xl: 2.4375rem;/* 39px — le code, héros de l'écran */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-body: 1.55; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; --tracking-tight: -.022em; --tracking-normal: 0; --tracking-wide: .06em; --tracking-caps: .14em; /* petites capitales */ --tracking-code: .09em; --font-sans: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Inter, Roboto, system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Cascadia Mono", "JetBrains Mono", Consolas, monospace; /* ---- rayons ---- */ --radius-xs: 6px; --radius-sm: 9px; --radius-md: 13px; --radius-lg: 18px; --radius-xl: 24px; --radius-full: 999px; /* ---- mouvement : une seule famille de courbes ---- */ --ease-out: cubic-bezier(.22,.61,.36,1); --ease-spring: cubic-bezier(.16,1.02,.28,1); --ease-in-out: cubic-bezier(.4,0,.2,1); --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 520ms; /* ---- teintes de marque ---- */ --hue-brand: 258; /* indigo électrique */ --hue-brand-2: 318; /* magenta */ --hue-ok: 148; --hue-warn: 72; --hue-danger: 22; /* ---- géométrie de composants ---- */ --ring-size: 46px; --ring-track: 3px; --control: 36px; /* cible tactile mini WCAG 2.2 = 24px, on tient 36 */ --shell-max: 46rem; } /* ============================================================================ COUCHE 2 — ALIAS SÉMANTIQUES · thème sombre (défaut) ========================================================================== */ :root, :root[data-theme="dark"]{ color-scheme: dark; /* surfaces, du fond vers l'avant */ --bg: oklch(15% .014 265); --bg-sunk: oklch(12% .014 265); --surface: oklch(21% .016 265 / .72); --surface-raised:oklch(25% .018 265 / .82); --surface-solid: oklch(20% .016 265); --surface-input: oklch(17% .014 265 / .88); /* traits */ --border: oklch(100% 0 0 / .09); --border-strong: oklch(100% 0 0 / .17); --border-glint: oklch(100% 0 0 / .30); /* filet lumineux haut de carte */ /* texte : 3 niveaux, tous ≥ 4.5:1 sur --bg sauf --text-faint (usage ≥ AA large) */ --text: oklch(96% .008 265); --text-muted: oklch(74% .016 265); --text-faint: oklch(59% .018 265); /* accent de marque */ --accent: oklch(76% .17 var(--hue-brand)); --accent-2: oklch(74% .19 var(--hue-brand-2)); --accent-ink: oklch(18% .04 var(--hue-brand)); --accent-wash: oklch(76% .17 var(--hue-brand) / .14); --accent-line: oklch(76% .17 var(--hue-brand) / .42); /* états */ --ok: oklch(78% .15 var(--hue-ok)); --warn: oklch(82% .15 var(--hue-warn)); --danger: oklch(70% .18 var(--hue-danger)); --danger-wash: oklch(70% .18 var(--hue-danger) / .14); /* accent dérivé du compte — --h est posé par app.js (0-360) */ --chip: oklch(80% .14 var(--h,258)); --chip-wash: oklch(80% .14 var(--h,258) / .13); --chip-line: oklch(80% .14 var(--h,258) / .34); --chip-track:oklch(100% 0 0 / .09); /* élévation : ombres portées + halo coloré discret */ --shadow-1: 0 1px 2px oklch(0% 0 0 / .5); --shadow-2: 0 4px 14px -4px oklch(0% 0 0 / .55); --shadow-3: 0 18px 44px -18px oklch(0% 0 0 / .85), 0 2px 8px -4px oklch(0% 0 0 / .5); --shadow-4: 0 40px 90px -32px oklch(0% 0 0 / .9); --glow: 0 0 32px -10px; /* décor de fond */ --mesh-1: oklch(64% .22 var(--hue-brand) / .40); --mesh-2: oklch(64% .21 var(--hue-brand-2) / .30); --mesh-3: oklch(72% .18 205 / .22); --grain: .035; --hairline: oklch(100% 0 0 / .04); } /* ============================================================================ COUCHE 2 — thème clair · « papier ivoire », pas un simple inverse ========================================================================== */ :root[data-theme="light"]{ color-scheme: light; --bg: oklch(97.5% .006 95); --bg-sunk: oklch(94.5% .008 95); --surface: oklch(100% 0 0 / .78); --surface-raised:oklch(100% 0 0 / .95); --surface-solid: oklch(99% .004 95); --surface-input: oklch(100% 0 0 / .9); --border: oklch(30% .03 265 / .13); --border-strong: oklch(30% .03 265 / .24); --border-glint: oklch(100% 0 0 / .9); --text: oklch(24% .02 265); --text-muted: oklch(45% .022 265); --text-faint: oklch(58% .022 265); --accent: oklch(52% .20 var(--hue-brand)); --accent-2: oklch(52% .21 var(--hue-brand-2)); --accent-ink: oklch(99% 0 0); --accent-wash: oklch(52% .20 var(--hue-brand) / .11); --accent-line: oklch(52% .20 var(--hue-brand) / .38); --ok: oklch(50% .14 var(--hue-ok)); --warn: oklch(58% .14 var(--hue-warn)); --danger: oklch(53% .19 var(--hue-danger)); --danger-wash: oklch(53% .19 var(--hue-danger) / .10); --chip: oklch(50% .16 var(--h,258)); --chip-wash: oklch(50% .16 var(--h,258) / .10); --chip-line: oklch(50% .16 var(--h,258) / .30); --chip-track:oklch(30% .03 265 / .12); --shadow-1: 0 1px 2px oklch(40% .04 265 / .10); --shadow-2: 0 4px 12px -4px oklch(40% .04 265 / .16); --shadow-3: 0 14px 34px -14px oklch(40% .05 265 / .22), 0 2px 6px -3px oklch(40% .04 265 / .12); --shadow-4: 0 34px 74px -28px oklch(40% .05 265 / .30); --glow: 0 0 28px -12px; --mesh-1: oklch(70% .19 var(--hue-brand) / .17); --mesh-2: oklch(72% .18 var(--hue-brand-2) / .13); --mesh-3: oklch(76% .15 205 / .12); --grain: .02; --hairline: oklch(30% .03 265 / .05); }