/** * TakaCircular — design tokens v0.7 (CD.1), source unique de vérité. * * Convention : préfixe --tc-. Les couleurs sémantiques (statuts, sceaux) * dérivent des 5 familles teal / ambre / émeraude / indigo / rouge — jamais * de nouvelle teinte hors familles. Espacement sur grille de 4 px, rayons à * 3 crans, une seule durée d'animation multipliée par --tc-anim-scale. * * Sémantique des familles (v0.7) : * teal → action de progression, marque * ambre → marché, transactions, « à venir » * émeraude→ prouvé, conforme, signé * indigo → technique, preuve, interrupteur * rouge → échec, destructif, révocation * * Les préférences d'interface (taille de texte, contraste, réduction des * animations) PILOTENT --tc-scale-text / --tc-contrast / --tc-anim-scale — * voir prefs.js pour l'écriture de ces variables sur , et plus bas * dans ce fichier pour les règles qui les consomment. */ :root { /* ── Neutres ─────────────────────────────────────────────────────────── */ --tc-ink: #16201E; --tc-paper: #F4F3EE; --tc-surface: #FFFFFF; --tc-surface-2: #EEEDEA; /* Fond légèrement recessé (en-têtes de carte/table) — teinte dérivée, pas de valeur en dur */ --tc-surface-tint: color-mix(in srgb, var(--tc-surface) 58%, var(--tc-paper) 42%); --tc-border: color-mix(in srgb, #E7E6DF calc(100% / var(--tc-contrast)), var(--tc-ink) calc(100% - 100% / var(--tc-contrast))); --tc-muted: color-mix(in srgb, #6E7B77 calc(100% / var(--tc-contrast)), var(--tc-ink) calc(100% - 100% / var(--tc-contrast))); --tc-faint: color-mix(in srgb, #9AA5A0 calc(100% / var(--tc-contrast)), var(--tc-ink) calc(100% - 100% / var(--tc-contrast))); /* Second palier d'encre — extension de la famille ink, dérivée (pas de valeur en dur) */ --tc-ink-2: color-mix(in srgb, var(--tc-ink) 55%, var(--tc-muted) 45%); /* ── Teal — action de progression, marque ───────────────────────────── */ --tc-teal-600: #0C6E61; --tc-teal-700: #09574D; --tc-teal-100: #E1EFEC; /* ── Ambre — marché, transactions, « à venir » ──────────────────────── */ --tc-amber-600: #A96A12; --tc-amber-100: #F4E9D2; /* ── Émeraude — prouvé, conforme, signé ──────────────────────────────── */ --tc-emerald-600: #1C8A5A; --tc-emerald-100: color-mix(in srgb, var(--tc-emerald-600) 14%, white); /* ── Indigo — technique, preuve, interrupteur ───────────────────────── */ --tc-indigo-600: #38497A; --tc-indigo-100: color-mix(in srgb, var(--tc-indigo-600) 14%, white); /* ── Rouge — échec, destructif, révocation ──────────────────────────── */ --tc-red-600: #B23A2E; --tc-red-100: color-mix(in srgb, var(--tc-red-600) 14%, white); /* ── Surface sombre — secrets/code (clé API, blocs de code) ───────────── Neutre inversé, hors des 5 familles colorées, usage cross-cutting. */ --tc-code-bg: #1a1a2e; --tc-code-fg: #e8f5e9; /* ── Grille & rayons ─────────────────────────────────────────────────── */ --tc-space-unit: 4px; --tc-radius-s: 8px; --tc-radius-m: 14px; --tc-radius-l: 18px; /* ── Typographie ─────────────────────────────────────────────────────── */ --tc-font-title: 'Archivo', sans-serif; --tc-font-body: 'Hanken Grotesk', system-ui, sans-serif; --tc-font-mono: 'IBM Plex Mono', monospace; /* ── Préférences — défauts, réécrits par prefs.js sur ──────────── */ --tc-scale-text: 1; --tc-contrast: 1; --tc-anim-scale: 1; /* Durées dérivées — toute transition/animation doit passer par l'une d'elles pour rester pilotée par --tc-anim-scale (0 = coupées). */ --tc-dur-fast: calc(120ms * var(--tc-anim-scale)); --tc-dur-base: calc(200ms * var(--tc-anim-scale)); --tc-dur-slow: calc(350ms * var(--tc-anim-scale)); --tc-dur-spin: calc(800ms * var(--tc-anim-scale)); } /* Respecte la préférence système tant que l'utilisateur n'a rien réglé explicitement dans TakaCircular (prefs.js pose data-motion="on"/"off" dès qu'un choix explicite existe et prend le dessus). */ @media (prefers-reduced-motion: reduce) { html:not([data-motion]) { --tc-anim-scale: 0; } } html[data-motion="off"] { --tc-anim-scale: 0; } /* Taille de texte — un seul point de pilotage : le corps du document. Tout le reste doit être exprimé en rem/em pour en hériter. */ html { font-size: calc(16px * var(--tc-scale-text)); }