/* ============================================================================ IKONU SUITE — DESIGN TOKENS v3.1 Socle commun aux 26 applications de la suite : trois familles déclinées, IKOTOOL, IKODASH et IKOADS, et treize produits uniques. Source de vérité : variables CSS natives. → utilisables partout : React/Next, Astro, WordPress, Streamlit, Electron. → Tailwind v4 : voir bloc @theme en fin de fichier. → shadcn/ui : voir bloc d'alias en fin de fichier. Hérité de ikonu.fr design system v1.0 (palette Onyx/Ivory/Signal). THÈME : le mode JOUR est le mode principal. C'est lui que renvoie :root. Le mode nuit s'active explicitement par , et laisse la préférence système décider. ========================================================================= */ /* --------------------------------------------------------------------------- 1. PRIMITIVES — valeurs brutes, jamais utilisées directement dans un composant ------------------------------------------------------------------------ */ :root { /* --- Neutres froids (échelle unique, du plus sombre au plus clair) ------ */ --ikn-onyx: #0A0B0E; /* 0 */ --ikn-graphite: #12141A; /* 1 */ --ikn-carbon: #1A1D25; /* 2 */ --ikn-steel: #262A33; /* 3 */ --ikn-fog: #3A3F4B; /* 4 */ --ikn-mute: #4A5160; /* 5 */ --ikn-ash: #7A8290; /* 6 */ --ikn-silver: #B4BAC4; /* 7 */ --ikn-mist: #D8DCE2; /* 8 (ajout v2) */ --ikn-cloud: #E9EBEF; /* 9 (ajout v2) */ --ikn-paper: #FAF9F6; /* 10 (ajout v2) */ --ikn-ivory: #F4F1EA; /* 11 — blanc chaud signature IKONU */ --ikn-white: #FFFFFF; /* --- Signal (rouge de marque IKONU) ------------------------------------ */ --ikn-signal: #EF1A2D; --ikn-signal-bright: #FF2F42; /* hover en dark */ --ikn-signal-deep: #C81222; /* hover en light, texte sur fond clair */ --ikn-signal-ink: #A50E1B; /* texte accent AA sur fond clair */ /* --- Sémantiques d'état ------------------------------------------------ */ --ikn-success: #276B4F; /* 5.64:1 sur ivory */ --ikn-success-alt: #5A9B7E; /* variante dark */ --ikn-warning: #7E5E0F; /* 5.33:1 sur ivory */ --ikn-warning-alt: #D4A84A; /* variante dark */ --ikn-danger: #B3373A; --ikn-danger-alt: #E06B6E; /* variante dark */ --ikn-info: #3D6A96; --ikn-info-alt: #7FA8CE; /* variante dark */ /* --- Typographie ------------------------------------------------------- */ --ikn-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --ikn-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --ikn-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 17px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --text-3xl: 44px; --text-display: clamp(32px, 4.5vw, 48px); --text-h1: clamp(28px, 3.2vw, 40px); --text-h2: clamp(22px, 2.6vw, 28px); --text-h3: 20px; --text-h4: 18px; --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.55; --lh-loose: 1.7; --ls-tight: -0.02em; /* titres display */ --ls-normal: 0; --ls-wide: 0.04em; /* eyebrows, labels mono majuscules */ --ls-wider: 0.1em; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* --- Espacement (échelle 4px) ------------------------------------------ */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10:128px; --s-11:160px; /* --- Rayons ------------------------------------------------------------ */ --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 12px; --r-2xl: 16px; --r-full: 999px; --r-icon: 22.5%; /* squircle des icônes produit */ /* --- Mouvement --------------------------------------------------------- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; /* --- Layout ------------------------------------------------------------ */ --container: 1280px; --container-narrow: 960px; --container-wide: 1600px; /* dashboards denses */ --page-gutter: 24px; --topbar-h: 56px; --sidebar-w: 248px; --sidebar-w-collapsed: 60px; /* --- Z-index ----------------------------------------------------------- */ --z-base: 0; --z-sticky: 100; --z-drawer: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; } /* --------------------------------------------------------------------------- 2. THÈME CLAIR (défaut) — sémantique. C'est CE bloc qu'on consomme. ------------------------------------------------------------------------ */ :root, [data-theme="light"] { color-scheme: light; /* Surfaces : du fond de page vers l'élément le plus « levé » */ --bg: var(--ikn-ivory); /* fond de page */ --surface: var(--ikn-paper); /* cartes, panneaux */ --surface-raised: var(--ikn-white); /* modales, popovers, dropdowns */ --surface-sunken: #EDEAE2; /* zones inactives, code, tracks */ --surface-hover: rgba(10, 11, 14, 0.04); --surface-active: rgba(10, 11, 14, 0.08); /* Bordures */ --border: rgba(10, 11, 14, 0.10); --border-strong: rgba(10, 11, 14, 0.18); --border-subtle: rgba(10, 11, 14, 0.06); /* Texte */ --text: var(--ikn-onyx); --text-secondary: var(--ikn-steel); --text-muted: var(--ikn-mute); --text-faint: var(--ikn-ash); --text-inverse: var(--ikn-ivory); /* Accent de marque */ --brand: var(--ikn-signal); --brand-hover: var(--ikn-signal-deep); --brand-text: var(--ikn-signal-ink); /* accent utilisé comme texte */ --brand-on: var(--ikn-white); /* texte posé SUR l'accent */ --brand-wash: rgba(239, 26, 45, 0.08); --brand-line: rgba(239, 26, 45, 0.28); /* États */ --success: var(--ikn-success); --success-wash: rgba(46, 125, 91, 0.10); --warning: var(--ikn-warning); --warning-wash: rgba(154, 116, 21, 0.10); --danger: var(--ikn-danger); --danger-wash: rgba(179, 55, 58, 0.10); --info: var(--ikn-info); --info-wash: rgba(61, 106, 150, 0.10); /* Focus — anneau unique, identique dans toute la suite */ --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand); /* Ombres — très discrètes, l'élévation passe surtout par la bordure */ --shadow-sm: 0 1px 2px rgba(10, 11, 14, 0.06); --shadow-md: 0 4px 12px rgba(10, 11, 14, 0.08); --shadow-lg: 0 16px 40px rgba(10, 11, 14, 0.12); --scrim: rgba(10, 11, 14, 0.45); } /* --------------------------------------------------------------------------- 3. THÈME SOMBRE — mêmes noms de tokens, valeurs inversées. ------------------------------------------------------------------------ */ [data-theme="dark"] { color-scheme: dark; --bg: var(--ikn-onyx); --surface: var(--ikn-graphite); --surface-raised: var(--ikn-carbon); --surface-sunken: #07080A; --surface-hover: rgba(244, 241, 234, 0.05); --surface-active: rgba(244, 241, 234, 0.09); --border: rgba(244, 241, 234, 0.10); --border-strong: rgba(244, 241, 234, 0.20); --border-subtle: rgba(244, 241, 234, 0.05); --text: var(--ikn-ivory); --text-secondary: var(--ikn-silver); --text-muted: var(--ikn-ash); --text-faint: #6B7383; /* 4.13:1 sur onyx */ --text-inverse: var(--ikn-onyx); --brand: var(--ikn-signal); --brand-hover: var(--ikn-signal-bright); --brand-text: var(--ikn-signal-bright); --brand-on: var(--ikn-white); --brand-wash: rgba(239, 26, 45, 0.14); --brand-line: rgba(239, 26, 45, 0.36); --success: var(--ikn-success-alt); --success-wash: rgba(90, 155, 126, 0.14); --warning: var(--ikn-warning-alt); --warning-wash: rgba(212, 168, 74, 0.14); --danger: var(--ikn-danger-alt); --danger-wash: rgba(224, 107, 110, 0.14); --info: var(--ikn-info-alt); --info-wash: rgba(127, 168, 206, 0.14); --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--ikn-signal-bright); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.65); --scrim: rgba(0, 0, 0, 0.65); } /* Suivi de l'OS — OPT-IN. Il faut poser pour l'activer. Sans cet attribut, une machine en thème sombre reste en mode jour : c'est voulu, le jour est le mode principal de la suite. */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { color-scheme: dark; --bg: var(--ikn-onyx); --surface: var(--ikn-graphite); --surface-raised: var(--ikn-carbon); --surface-sunken: #07080A; --surface-hover: rgba(244, 241, 234, 0.05); --surface-active: rgba(244, 241, 234, 0.09); --border: rgba(244, 241, 234, 0.10); --border-strong: rgba(244, 241, 234, 0.20); --border-subtle: rgba(244, 241, 234, 0.05); --text: var(--ikn-ivory); --text-secondary: var(--ikn-silver); --text-muted: var(--ikn-ash); --text-faint: #6B7383; --text-inverse: var(--ikn-onyx); --brand-hover: var(--ikn-signal-bright); --brand-text: var(--ikn-signal-bright); --brand-wash: rgba(239, 26, 45, 0.14); --brand-line: rgba(239, 26, 45, 0.36); --success: var(--ikn-success-alt); --warning: var(--ikn-warning-alt); --danger: var(--ikn-danger-alt); --info: var(--ikn-info-alt); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55); --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.65); --scrim: rgba(0, 0, 0, 0.65); } } /* --------------------------------------------------------------------------- 4. TEINTES PRODUIT — ELLES PILOTENT L'UI DE LEUR PRODUIT. Poser `` et l'accent de l'interface — boutons, liens, anneau de focus — prend la teinte du produit. Rien d'autre à écrire. CETTE RÈGLE A CHANGÉ LE 26/08/2026. Avant, l'UI restait rouge Signal partout et seule l'icône portait la teinte : le principe « Google Workspace ». On l'a retourné pour une raison observée en ouvrant IKOAGENT pour la première fois — la console ressemblait à IKOTOOL. Ce n'était pas un bug : `--hue-ikotool` EST `--ikn-signal`, le hub porte la couleur de la maison. Toute UI conforme à l'ancienne règle ressemblait donc au hub, et un outil qu'on ne reconnaît pas d'un coup d'œil dans une barre d'onglets a perdu l'essentiel de ce que son icône lui donnait. Ce que ça n'autorise pas pour autant : écrire une couleur en dur. L'accent vient de `--brand`, qui suit `data-product`. Une application qui code sa teinte en dur casse le jour où le produit change de couleur — ce qui vient d'arriver à IKOADS. ------------------------------------------------------------------------ */ /* --product : teinte vive — TUILE d'icône, favicon, image OG, séries de graphes. --product-ink : même teinte, luminance corrigée pour rester lisible EN TEXTE ou en trait fin sur le fond du thème courant (≥ 4.6:1). */ :root { --hue-ikotool: #EF1A2D; /* Signal — le hub */ --hue-ikodash: #3E7BFA; /* Azur */ --hue-ikoadmin: #17ADB4; /* Lagon */ --hue-ikolead: #E29524; /* Ambre */ --hue-ikodrive: #1FAE7C; /* Jade */ --hue-ikobackup: #C63A9E; /* Prune */ --hue-ikodata: #7C5CFF; /* Violet */ --hue-ikochat: #A8C81B; /* Citron */ --hue-ikoma: #E8622A; /* Flux */ /* Modules existants du parc */ --hue-ikoauth: #1FC96E; /* Plumbob */ --hue-ikoflow: #5E7398; /* Ardoise */ --hue-ikofold: #8A7B5C; /* Sable */ --hue-ikocard: #2F6FA3; /* Marine */ --hue-ikoads: #9C55D6; /* Améthyste */ --hue-ikoagent: #D97757; /* Orange Claude */ } /* IKOADS était Terre (#B8462F) jusqu'au 26/08/2026. IKOAGENT est arrivé avec l'orange de Claude, à cinq degrés de teinte : deux produits actifs aussi proches sont indiscernables dans une barre d'onglets. C'est IKOADS qui a bougé, parce que sa teinte ne disait rien de la publicité, alors que celle d'IKOAGENT cite son moteur. Proximité connue et acceptée : IKOMA (#E8622A) est à trois degrés d'IKOAGENT. IKOMA est au catalogue mais n'existe pas — le jour où il naîtra, c'est lui qui bougera. */ /* Encres — thème clair */ :root, [data-theme="light"] { --ink-ikotool:#D70F21; --ink-ikodash:#145EF9; --ink-ikoadmin:#10777B; --ink-ikolead:#966114; --ink-ikodrive:#167B58; --ink-ikobackup:#B93593; --ink-ikodata:#6C48FF; --ink-ikochat:#60730F; --ink-ikoma:#BB4514; --ink-ikoauth:#137C44; --ink-ikoflow:#596D90; --ink-ikofold:#786B50; --ink-ikocard:#3070A5; --ink-ikoads:#8D4DC2; --ink-ikoagent:#A05840; } /* Encres — thème sombre */ [data-theme="dark"] { --ink-ikotool:#F79099; --ink-ikodash:#87ADFC; --ink-ikoadmin:#17ADB4; --ink-ikolead:#E29524; --ink-ikodrive:#23C58C; --ink-ikobackup:#CA48A5; --ink-ikodata:#B3A0FF; --ink-ikochat:#A8C81B; --ink-ikoma:#F09873; --ink-ikoauth:#1FC96E; --ink-ikoflow:#677CA1; --ink-ikofold:#B8AC95; --ink-ikocard:#82B3DB; --ink-ikoads:#C69EE7; --ink-ikoagent:#E39D86; } @media (prefers-color-scheme: dark) { [data-theme="auto"] { --ink-ikotool:#F79099; --ink-ikodash:#87ADFC; --ink-ikoadmin:#17ADB4; --ink-ikolead:#E29524; --ink-ikodrive:#23C58C; --ink-ikobackup:#CA48A5; --ink-ikodata:#B3A0FF; --ink-ikochat:#A8C81B; --ink-ikoma:#F09873; --ink-ikoauth:#1FC96E; --ink-ikoflow:#677CA1; --ink-ikofold:#B8AC95; --ink-ikocard:#82B3DB; --ink-ikoads:#C69EE7; --ink-ikoagent:#E39D86; } } /* Sélection du produit courant : */ [data-product="ikotool"] { --product: var(--hue-ikotool); --product-ink: var(--ink-ikotool); --product-name: "IKOTOOL"; } [data-product="ikodash"] { --product: var(--hue-ikodash); --product-ink: var(--ink-ikodash); --product-name: "IKODASH"; } [data-product="ikodrive"] { --product: var(--hue-ikodrive); --product-ink: var(--ink-ikodrive); --product-name: "IKODRIVE"; } [data-product="ikobackup"] { --product: var(--hue-ikobackup); --product-ink: var(--ink-ikobackup); --product-name: "IKOBACKUP"; } [data-product="ikodata"] { --product: var(--hue-ikodata); --product-ink: var(--ink-ikodata); --product-name: "IKODATA"; } [data-product="ikochat"] { --product: var(--hue-ikochat); --product-ink: var(--ink-ikochat); --product-name: "IKOCHAT"; } [data-product="ikoma"] { --product: var(--hue-ikoma); --product-ink: var(--ink-ikoma); --product-name: "IKOMA"; } [data-product="ikoauth"] { --product: var(--hue-ikoauth); --product-ink: var(--ink-ikoauth); --product-name: "IKOAUTH"; } [data-product="ikoflow"] { --product: var(--hue-ikoflow); --product-ink: var(--ink-ikoflow); --product-name: "IKOFLOW"; } [data-product="ikolead"] { --product: var(--hue-ikolead); --product-ink: var(--ink-ikolead); --product-name: "IKOLEAD"; } [data-product="ikofold"] { --product: var(--hue-ikofold); --product-ink: var(--ink-ikofold); --product-name: "IKOFOLD"; } [data-product="ikocard"] { --product: var(--hue-ikocard); --product-ink: var(--ink-ikocard); --product-name: "IKOCARD"; } [data-product="ikoads"] { --product: var(--hue-ikoads); --product-ink: var(--ink-ikoads); --product-name: "IKOADS"; } [data-product="ikoadmin"] { --product: var(--hue-ikoadmin); --product-ink: var(--ink-ikoadmin); --product-name: "IKOADMIN"; } [data-product="ikoagent"] { --product: var(--hue-ikoagent); --product-ink: var(--ink-ikoagent); --product-name: "IKOAGENT"; } /* Sous-produits : ils héritent de la teinte du parent, seul le glyphe change. Sans ces lignes, `data-product="ikodash-infra"` ne resout aucune couleur — et chaque application finit par les redeclarer dans son coin. */ [data-product="ikotool-check"] { --product: var(--hue-ikotool); --product-ink: var(--ink-ikotool); --product-name: "IKOTOOL Check"; } [data-product="ikotool-schema"] { --product: var(--hue-ikotool); --product-ink: var(--ink-ikotool); --product-name: "IKOTOOL Schema"; } [data-product="ikotool-goal"] { --product: var(--hue-ikotool); --product-ink: var(--ink-ikotool); --product-name: "IKOTOOL Goal"; } [data-product="ikotool-habits"] { --product: var(--hue-ikotool); --product-ink: var(--ink-ikotool); --product-name: "IKOTOOL Habits"; } [data-product="ikotool-redesign"] { --product: var(--hue-ikotool); --product-ink: var(--ink-ikotool); --product-name: "IKOTOOL Redesign"; } [data-product="ikotool-todo"] { --product: var(--hue-ikotool); --product-ink: var(--ink-ikotool); --product-name: "IKOTOOL Todo"; } [data-product="ikotool-content"] { --product: var(--hue-ikotool); --product-ink: var(--ink-ikotool); --product-name: "IKOTOOL Content"; } [data-product="ikotool-ticket"] { --product: var(--hue-ikotool); --product-ink: var(--ink-ikotool); --product-name: "IKOTOOL Ticket"; } [data-product="ikodash-infra"] { --product: var(--hue-ikodash); --product-ink: var(--ink-ikodash); --product-name: "IKODASH Infra"; } [data-product="ikodash-client"] { --product: var(--hue-ikodash); --product-ink: var(--ink-ikodash); --product-name: "IKODASH Client"; } [data-product="ikodash-finance"] { --product: var(--hue-ikodash); --product-ink: var(--ink-ikodash); --product-name: "IKODASH Finance"; } [data-product="ikoads-google"] { --product: var(--hue-ikoads); --product-ink: var(--ink-ikoads); --product-name: "IKOADS Google"; } [data-product="ikoads-meta"] { --product: var(--hue-ikoads); --product-ink: var(--ink-ikoads); --product-name: "IKOADS Meta"; } /* --------------------------------------------------------------------------- L'ACCENT DE L'UI SUIT LE PRODUIT. Ce bloc doit rester APRÈS les sélecteurs [data-product] : à spécificité égale, c'est l'ordre qui tranche. `--brand` prend `--product-ink` et non `--product`. Ce n'est pas un détail de nuance : `--product` est la teinte vive, calibrée pour une TUILE d'icône, et du texte blanc dessus tombe entre 1.9 et 5.3 selon le produit — illisible sur le citron d'IKOCHAT, limite sur l'améthyste d'IKOADS. `--product-ink` est la même teinte corrigée en luminance ; mesuré sur les quinze produits, le blanc y tient entre 5.23 et 5.32. Un seul jeu de règles suffit donc, sans exception par produit et sans surprise le jour où l'on en ajoute un. Les deux voiles restent sur `--product` : ce sont des fonds très dilués, la teinte vive y est plus juste et le contraste ne s'y pose pas. ------------------------------------------------------------------------ */ [data-product] { --brand: var(--product-ink); --brand-hover: color-mix(in srgb, var(--product-ink) 84%, #000); --brand-text: var(--product-ink); --brand-wash: color-mix(in srgb, var(--product) 8%, transparent); --brand-line: color-mix(in srgb, var(--product) 28%, transparent); } /* Le texte POSÉ SUR l'accent. En clair l'accent est foncé, donc blanc dessus ; en sombre `--product-ink` bascule vers sa version claire, donc onyx dessus. Sans cette bascule, un bouton devient illisible la nuit — et c'est le genre de défaut qu'on ne voit pas parce qu'on développe en thème clair. */ [data-product] { --brand-on: var(--ikn-white); } [data-theme="dark"][data-product] { --brand-on: var(--ikn-onyx); } @media (prefers-color-scheme: dark) { [data-theme="auto"][data-product] { --brand-on: var(--ikn-onyx); } } /* --------------------------------------------------------------------------- 8. DÉGRADÉS PRODUIT — variante d'icône « Anneau ». Trois arrêts, avec un voyage de teinte de 20 à 40° entre le clair et le profond : c'est ce déplacement — et non le seul écart de luminosité — qui évite l'aplat saturé. Réservés à la couronne de l'icône et aux visuels d'en-tête. Jamais un fond de page, jamais un bouton. Un dégradé par FAMILLE. Les sous-produits n'en ont pas : ils héritent de celui de leur parent. ------------------------------------------------------------------------ */ :root { --grad-ikoadmin: linear-gradient(135deg, #7BEBE0 0%, #17ADB4 48%, #0A5E76 100%); --grad-ikoads: linear-gradient(135deg, #D3AEF2 0%, #9C55D6 48%, #4A1E7E 100%); --grad-ikoagent: linear-gradient(135deg, #F5C0A6 0%, #D97757 48%, #7E3320 100%); --grad-ikoauth: linear-gradient(135deg, #8FF9B8 0%, #1FC96E 48%, #075E36 100%); --grad-ikobackup: linear-gradient(135deg, #F7A0DA 0%, #C63A9E 48%, #711763 100%); --grad-ikocard: linear-gradient(135deg, #8ECAF0 0%, #2E77B8 48%, #123F68 100%); --grad-ikochat: linear-gradient(135deg, #E6F87F 0%, #A8C81B 48%, #4F6B06 100%); --grad-ikodash: linear-gradient(135deg, #7FB2FF 0%, #3A63EE 48%, #1E2FA8 100%); --grad-ikodata: linear-gradient(135deg, #BBA3FF 0%, #7A4BEE 48%, #3F1BA8 100%); --grad-ikodrive: linear-gradient(135deg, #67E3B0 0%, #17A97C 48%, #07634F 100%); --grad-ikoflow: linear-gradient(135deg, #A9BAD6 0%, #5E7398 48%, #2E3C58 100%); --grad-ikofold: linear-gradient(135deg, #E3D2AE 0%, #A08760 48%, #5E4A32 100%); --grad-ikolead: linear-gradient(135deg, #FFD08A 0%, #E29524 48%, #9A5510 100%); --grad-ikoma: linear-gradient(135deg, #FFB07A 0%, #F2653A 48%, #B32B36 100%); --grad-ikotool: linear-gradient(135deg, #FF7A6B 0%, #F0294A 48%, #A50E2E 100%); } /* Le voile appliqué par-dessus la couronne, qui lui donne son relief. */ :root { --grad-sheen: linear-gradient(140deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 55%); } /* --------------------------------------------------------------------------- 5. BASE — reset minimal partagé ------------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--ikn-font-sans); font-size: var(--text-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } h1, h2, h3, h4 { font-family: var(--ikn-font-display); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: 0; } h1 { font-size: var(--text-h1); } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-h3); } h4 { font-size: var(--text-h4); } code, kbd, pre, samp, .ikn-mono { font-family: var(--ikn-font-mono); } /* Eyebrow / label technique — signature IKONU (cf. `step.01.select` du site) */ .ikn-eyebrow { font-family: var(--ikn-font-mono); font-size: var(--text-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------------------- 6. TAILWIND v4 — importer ce fichier puis coller ce bloc. (Tailwind v3 : reprendre les mêmes clés dans theme.extend de tailwind.config) ------------------------------------------------------------------------ */ /* @import "tailwindcss"; @import "./ikonu-tokens.css"; @theme inline { --color-bg: var(--bg); --color-surface: var(--surface); --color-surface-raised: var(--surface-raised); --color-surface-sunken: var(--surface-sunken); --color-border: var(--border); --color-border-strong: var(--border-strong); --color-text: var(--text); --color-text-secondary: var(--text-secondary); --color-text-muted: var(--text-muted); --color-brand: var(--brand); --color-brand-on: var(--brand-on); --color-product: var(--product); --color-product-ink: var(--product-ink); --color-success: var(--success); --color-warning: var(--warning); --color-danger: var(--danger); --color-info: var(--info); --font-display: var(--ikn-font-display); --font-sans: var(--ikn-font-sans); --font-mono: var(--ikn-font-mono); --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-xl: var(--r-xl); --shadow-sm: var(--shadow-sm); --shadow-md: var(--shadow-md); --shadow-lg: var(--shadow-lg); } @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); */ /* --------------------------------------------------------------------------- 7. shadcn/ui — alias de compatibilité. Coller dans globals.css. Permet d'utiliser tous les composants shadcn sans les modifier. ------------------------------------------------------------------------ */ /* :root, [data-theme="light"], [data-theme="dark"] { --background: var(--bg); --foreground: var(--text); --card: var(--surface); --card-foreground: var(--text); --popover: var(--surface-raised); --popover-foreground: var(--text); --primary: var(--brand); --primary-foreground: var(--brand-on); --secondary: var(--surface-sunken); --secondary-foreground:var(--text); --muted: var(--surface-sunken); --muted-foreground: var(--text-muted); --accent: var(--surface-hover); --accent-foreground: var(--text); --destructive: var(--danger); --destructive-foreground: var(--ikn-white); --input: var(--border); --ring: var(--brand); --radius: var(--r-lg); } */