/* ═══════════════════════════════════════════════════════════════════════════ GAYAKOA FO V2 — TOKENS Direction : « Moderne chaleureux » (B), avec le preset « Institutionnel » (A) atteignable en bougeant TROIS molettes — pas en changeant de système. Le caractère de B tient à la FORME (rayon, ombre, densité), pas à la teinte. La teinte reste une variable libre par client (marque blanche). ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── LES TROIS MOLETTES ──────────────────────────────────────────────── B (défaut) : 1 / 1 / 1 A (institutionnel) : 0 / 0 / 0.82 */ --gk-radius-scale: 1; /* 0 = angles droits ……… 1 = arrondis généreux */ --gk-elevation-scale: 1; /* 0 = à plat, filets ……… 1 = ombres douces */ --gk-density: 1; /* 0.82 = compact ……… 1 = confortable */ /* ── MARQUE (la variable client) ─────────────────────────────────────── RÈGLE : --gk-brand-500 est une couleur de FOND (à écrire avec --gk-on-brand) ou de BORDURE. JAMAIS une couleur de texte : sur --gk-page elle plafonne à ~4.4:1, sous le seuil AA de 4.5. Pour du texte sur fond clair : --gk-brand-600 (~5.7:1), qui est inversé en thème sombre et reste donc lisible des deux côtés. brand-700 et au-delà ne sont PAS inversés en sombre : ne pas s'en servir pour un survol « plus foncé », ça casse le sombre. */ --gk-brand-h: 232; /* teinte — remplacée par la marque du client */ --gk-brand-c: 0.125; /* chroma — baisser pour une marque sobre */ --gk-brand-50: oklch(97% calc(var(--gk-brand-c) * .14) var(--gk-brand-h)); --gk-brand-100: oklch(94% calc(var(--gk-brand-c) * .28) var(--gk-brand-h)); --gk-brand-200: oklch(88% calc(var(--gk-brand-c) * .48) var(--gk-brand-h)); --gk-brand-300: oklch(80% calc(var(--gk-brand-c) * .72) var(--gk-brand-h)); --gk-brand-400: oklch(68% calc(var(--gk-brand-c) * .92) var(--gk-brand-h)); --gk-brand-500: oklch(55% var(--gk-brand-c) var(--gk-brand-h)); --gk-brand-600: oklch(48% calc(var(--gk-brand-c) * .96) var(--gk-brand-h)); --gk-brand-700: oklch(40% calc(var(--gk-brand-c) * .80) var(--gk-brand-h)); --gk-brand-800: oklch(32% calc(var(--gk-brand-c) * .64) var(--gk-brand-h)); --gk-brand-900: oklch(25% calc(var(--gk-brand-c) * .44) var(--gk-brand-h)); /* ── NEUTRES — légère dérive CHAUDE (h 70) : c'est là que passe la chaleur de la direction B, sans accent terracotta ────────────────── */ --gk-n-0: oklch(100% 0 0); --gk-n-50: oklch(98.5% .004 70); --gk-n-100: oklch(96.5% .005 70); --gk-n-200: oklch(92.5% .006 70); --gk-n-300: oklch(86% .007 70); --gk-n-400: oklch(72% .008 70); --gk-n-500: oklch(60% .009 70); --gk-n-600: oklch(49% .009 70); --gk-n-700: oklch(38% .008 70); --gk-n-800: oklch(27% .007 70); --gk-n-900: oklch(18% .006 70); --gk-n-950: oklch(13% .005 70); /* ── SÉMANTIQUE (jamais l'accent : distincte de la marque) ────────────── */ --gk-success: oklch(58% .13 152); --gk-success-soft: oklch(96% .03 152); --gk-warning: oklch(70% .14 75); --gk-warning-soft: oklch(96% .04 75); --gk-danger: oklch(56% .17 27); --gk-danger-soft: oklch(96% .03 27); /* ── SURFACES & TEXTE (thème clair) ──────────────────────────────────── */ --gk-page: var(--gk-n-50); --gk-surface: var(--gk-n-0); --gk-surface-2: var(--gk-n-100); --gk-border: var(--gk-n-200); --gk-border-strong: var(--gk-n-300); --gk-text: var(--gk-n-900); --gk-text-2: var(--gk-n-600); --gk-text-3: var(--gk-n-500); --gk-on-brand: var(--gk-n-0); /* ── TYPOGRAPHIE ────────────────────────────────────────────────────── Faces système : le CSP de Claude Design bloque les CDN de polices. En production, --gk-font-body embarquera une vraie fonte (@font-face). */ --gk-font-body: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", system-ui, sans-serif; --gk-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --gk-text-xs: 12px; --gk-text-sm: 13px; --gk-text-base: 15px; --gk-text-md: 16px; --gk-text-lg: 18px; --gk-text-xl: 21px; --gk-text-2xl: 25px; --gk-text-3xl: 30px; --gk-text-4xl: 36px; --gk-weight-regular: 400; --gk-weight-medium: 500; --gk-weight-semi: 620; --gk-weight-bold: 700; --gk-leading-tight: 1.18; --gk-leading-snug: 1.35; --gk-leading-body: 1.55; /* ── ESPACEMENT (base 4px, modulé par la densité) ─────────────────────── */ --gk-space-1: calc(4px * var(--gk-density)); --gk-space-2: calc(8px * var(--gk-density)); --gk-space-3: calc(12px * var(--gk-density)); --gk-space-4: calc(16px * var(--gk-density)); --gk-space-5: calc(20px * var(--gk-density)); --gk-space-6: calc(24px * var(--gk-density)); --gk-space-8: calc(32px * var(--gk-density)); --gk-space-10: calc(40px * var(--gk-density)); --gk-space-14: calc(56px * var(--gk-density)); /* Cible tactile : la densité peut AGRANDIR mais jamais descendre sous 44px. Sans le max(), le preset institutionnel (density .82) tombait à 36.1px — le systeme promettait un plancher qu'il enfreignait lui-meme. */ --gk-control-h: max(44px, calc(44px * var(--gk-density))); /* ── RAYONS (molette 1) ──────────────────────────────────────────────── */ --gk-radius-sm: calc(2px + 2px * var(--gk-radius-scale)); --gk-radius-md: calc(3px + 7px * var(--gk-radius-scale)); --gk-radius-lg: calc(4px + 10px * var(--gk-radius-scale)); --gk-radius-xl: calc(4px + 14px * var(--gk-radius-scale)); --gk-radius-full: 999px; /* ── ÉLÉVATION (molette 2) — l'alpha tombe à 0 quand la molette est à 0, et la bordure prend le relais via --gk-border-fallback ──────────── */ --gk-shadow-sm: 0 1px 2px oklch(20% .01 70 / calc(.05 * var(--gk-elevation-scale))); --gk-shadow-md: 0 1px 2px oklch(20% .01 70 / calc(.04 * var(--gk-elevation-scale))), 0 6px 16px -5px oklch(20% .01 70 / calc(.10 * var(--gk-elevation-scale))); --gk-shadow-lg: 0 2px 4px oklch(20% .01 70 / calc(.04 * var(--gk-elevation-scale))), 0 14px 32px -10px oklch(20% .01 70 / calc(.14 * var(--gk-elevation-scale))); --gk-shadow-brand: 0 6px 16px -6px oklch(55% var(--gk-brand-c) var(--gk-brand-h) / calc(.5 * var(--gk-elevation-scale))); /* Quand l'ombre disparaît, le filet doit se renforcer pour tenir la forme */ --gk-border-fallback: color-mix(in oklab, var(--gk-border) calc(55% + 45% * var(--gk-elevation-scale)), var(--gk-border-strong)); --gk-motion: 140ms cubic-bezier(.2, .7, .3, 1); --gk-focus: 0 0 0 3px oklch(55% var(--gk-brand-c) var(--gk-brand-h) / .35); } /* ── PRESET A : institutionnel — trois molettes, zéro autre changement ─── */ :root[data-gk-preset="institutionnel"] { --gk-radius-scale: 0; --gk-elevation-scale: 0; --gk-density: .82; } /* ── THÈME SOMBRE ─────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root { --gk-brand-500: oklch(70% var(--gk-brand-c) var(--gk-brand-h)); --gk-brand-600: oklch(64% var(--gk-brand-c) var(--gk-brand-h)); --gk-brand-50: oklch(26% calc(var(--gk-brand-c) * .30) var(--gk-brand-h)); --gk-brand-100: oklch(31% calc(var(--gk-brand-c) * .42) var(--gk-brand-h)); --gk-brand-200: oklch(40% calc(var(--gk-brand-c) * .55) var(--gk-brand-h)); --gk-page: var(--gk-n-950); --gk-surface: var(--gk-n-900); --gk-surface-2: var(--gk-n-800); --gk-border: var(--gk-n-800); --gk-border-strong: var(--gk-n-700); --gk-text: var(--gk-n-100); --gk-text-2: var(--gk-n-400); --gk-text-3: var(--gk-n-500); --gk-on-brand: var(--gk-n-950); --gk-success-soft: oklch(26% .04 152); --gk-warning-soft: oklch(26% .05 75); --gk-danger-soft: oklch(26% .05 27); } } :root[data-theme="dark"] { --gk-brand-500: oklch(70% var(--gk-brand-c) var(--gk-brand-h)); --gk-brand-600: oklch(64% var(--gk-brand-c) var(--gk-brand-h)); --gk-brand-50: oklch(26% calc(var(--gk-brand-c) * .30) var(--gk-brand-h)); --gk-brand-100: oklch(31% calc(var(--gk-brand-c) * .42) var(--gk-brand-h)); --gk-brand-200: oklch(40% calc(var(--gk-brand-c) * .55) var(--gk-brand-h)); --gk-page: var(--gk-n-950); --gk-surface: var(--gk-n-900); --gk-surface-2: var(--gk-n-800); --gk-border: var(--gk-n-800); --gk-border-strong: var(--gk-n-700); --gk-text: var(--gk-n-100); --gk-text-2: var(--gk-n-400); --gk-text-3: var(--gk-n-500); --gk-on-brand: var(--gk-n-950); --gk-success-soft: oklch(26% .04 152); --gk-warning-soft: oklch(26% .05 75); --gk-danger-soft: oklch(26% .05 27); } :root[data-theme="light"] { --gk-brand-500: oklch(55% var(--gk-brand-c) var(--gk-brand-h)); --gk-brand-600: oklch(48% calc(var(--gk-brand-c) * .96) var(--gk-brand-h)); --gk-brand-50: oklch(97% calc(var(--gk-brand-c) * .14) var(--gk-brand-h)); --gk-brand-100: oklch(94% calc(var(--gk-brand-c) * .28) var(--gk-brand-h)); --gk-brand-200: oklch(88% calc(var(--gk-brand-c) * .48) var(--gk-brand-h)); --gk-page: var(--gk-n-50); --gk-surface: var(--gk-n-0); --gk-surface-2: var(--gk-n-100); --gk-border: var(--gk-n-200); --gk-border-strong: var(--gk-n-300); --gk-text: var(--gk-n-900); --gk-text-2: var(--gk-n-600); --gk-text-3: var(--gk-n-500); --gk-on-brand: var(--gk-n-0); --gk-success-soft: oklch(96% .03 152); --gk-warning-soft: oklch(96% .04 75); --gk-danger-soft: oklch(96% .03 27); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }