/* ============================================================================ AIOS Console — tokens.css Source de vérité : DESIGN.md §1–2. Marque Pick & Go + neutres teintés. Thème : défaut via prefers-color-scheme, classes .theme-light/.theme-dark (posées sur ) qui GAGNENT dans les deux sens. ========================================================================== */ :root { /* --- Marque Pick & Go (invariantes) --- */ --pg-rose: #e91e8c; --pg-orange: #f57c00; --pg-violet: #7b2ff7; --pg-gradient: linear-gradient(135deg, #f57c00 0%, #e91e8c 50%, #7b2ff7 100%); /* --- Typographie --- */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, "SF Mono", "Fira Code", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; --lh-base: 1.55; /* --- Espacements --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* --- Rayons --- */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-full: 999px; /* --- Anneau de focus --- */ --focus-ring: 0 0 0 3px rgba(123, 47, 247, 0.55); --focus-outline: 2px solid var(--pg-violet); /* ===================== THÈME CLAIR (défaut) ===================== */ --bg: #faf6fb; --surface: #ffffff; --surface-2: #f4edf7; --surface-3: #ece1f2; --border: #e3d6ec; --border-strong: #cdbad9; --text: #1d1424; --text-muted: #665a71; --text-invert: #ffffff; /* Sémantiques : couleurs de texte (contraste ≥4.5:1 sur surface claire) */ --ok: #2e7d32; --warn: #b45309; --crit: #c62828; --info: #1565c0; /* Teintes de fond des états (surfaces douces) */ --ok-bg: #e6f2e8; --warn-bg: #fbeede; --crit-bg: #fae2e3; --info-bg: #e5eefb; /* Niveaux N0–N4 : fond + texte + bord (croissants) */ --n0-bg: #e5eefb; --n0-fg: #1257a8; --n0-bd: #bcd3f2; --n1-bg: #e6f2e8; --n1-fg: #2e7d32; --n1-bd: #c1e0c6; --n2-bg: #fbeede; --n2-fg: #b45309; --n2-bd: #f2d6ac; --n3-bg: #fce1ef; --n3-fg: #ad1268; --n3-bd: #f4bcda; --n4-bg: #fae2e3; --n4-fg: #a31620; --n4-bd: #f0bcbf; /* Chips d'origine */ --origin-human-bg: #e5eefb; --origin-human-fg: #1257a8; --origin-ai-bg: #efe6fd; --origin-ai-fg: #5a1fb8; --origin-system-bg: #eee7f0; --origin-system-fg: #4a4152; /* Ombres */ --shadow-1: 0 1px 2px rgba(41, 20, 55, 0.08), 0 1px 3px rgba(41, 20, 55, 0.06); --shadow-2: 0 8px 24px rgba(41, 20, 55, 0.14); color-scheme: light; } /* ===================== THÈME SOMBRE (système) ===================== */ @media (prefers-color-scheme: dark) { :root { --bg: #140e1a; --surface: #1d1526; --surface-2: #251b31; --surface-3: #2f2340; --border: #38294a; --border-strong: #4c3a63; --text: #f4ecfa; --text-muted: #b3a4c2; --text-invert: #ffffff; --ok: #6fd48a; --warn: #f4b563; --crit: #f38b91; --info: #7fb2f0; --ok-bg: #16301d; --warn-bg: #3a2a12; --crit-bg: #3a1a1d; --info-bg: #142744; --n0-bg: #142744; --n0-fg: #9cc4f5; --n0-bd: #29456f; --n1-bg: #16301d; --n1-fg: #7fdd98; --n1-bd: #2c5636; --n2-bg: #3a2a12; --n2-fg: #f4c07a; --n2-bd: #63481f; --n3-bg: #3a1330; --n3-fg: #f8a6d4; --n3-bd: #6b2453; --n4-bg: #3a1519; --n4-fg: #f79aa0; --n4-bd: #6b2a2f; --origin-human-bg: #142744; --origin-human-fg: #9cc4f5; --origin-ai-bg: #271a3f; --origin-ai-fg: #c6a6f8; --origin-system-bg: #2a2233; --origin-system-fg: #c3b6d1; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.6); --focus-ring: 0 0 0 3px rgba(198, 166, 248, 0.65); --focus-outline: 2px solid #c6a6f8; color-scheme: dark; } } /* La bascule utilisateur gagne dans les deux sens (spécificité :root.classe). */ :root.theme-dark { --bg: #140e1a; --surface: #1d1526; --surface-2: #251b31; --surface-3: #2f2340; --border: #38294a; --border-strong: #4c3a63; --text: #f4ecfa; --text-muted: #b3a4c2; --text-invert: #ffffff; --ok: #6fd48a; --warn: #f4b563; --crit: #f38b91; --info: #7fb2f0; --ok-bg: #16301d; --warn-bg: #3a2a12; --crit-bg: #3a1a1d; --info-bg: #142744; --n0-bg: #142744; --n0-fg: #9cc4f5; --n0-bd: #29456f; --n1-bg: #16301d; --n1-fg: #7fdd98; --n1-bd: #2c5636; --n2-bg: #3a2a12; --n2-fg: #f4c07a; --n2-bd: #63481f; --n3-bg: #3a1330; --n3-fg: #f8a6d4; --n3-bd: #6b2453; --n4-bg: #3a1519; --n4-fg: #f79aa0; --n4-bd: #6b2a2f; --origin-human-bg: #142744; --origin-human-fg: #9cc4f5; --origin-ai-bg: #271a3f; --origin-ai-fg: #c6a6f8; --origin-system-bg: #2a2233; --origin-system-fg: #c3b6d1; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.6); --focus-ring: 0 0 0 3px rgba(198, 166, 248, 0.65); --focus-outline: 2px solid #c6a6f8; color-scheme: dark; } :root.theme-light { --bg: #faf6fb; --surface: #ffffff; --surface-2: #f4edf7; --surface-3: #ece1f2; --border: #e3d6ec; --border-strong: #cdbad9; --text: #1d1424; --text-muted: #665a71; --text-invert: #ffffff; --ok: #2e7d32; --warn: #b45309; --crit: #c62828; --info: #1565c0; --ok-bg: #e6f2e8; --warn-bg: #fbeede; --crit-bg: #fae2e3; --info-bg: #e5eefb; --n0-bg: #e5eefb; --n0-fg: #1257a8; --n0-bd: #bcd3f2; --n1-bg: #e6f2e8; --n1-fg: #2e7d32; --n1-bd: #c1e0c6; --n2-bg: #fbeede; --n2-fg: #b45309; --n2-bd: #f2d6ac; --n3-bg: #fce1ef; --n3-fg: #ad1268; --n3-bd: #f4bcda; --n4-bg: #fae2e3; --n4-fg: #a31620; --n4-bd: #f0bcbf; --origin-human-bg: #e5eefb; --origin-human-fg: #1257a8; --origin-ai-bg: #efe6fd; --origin-ai-fg: #5a1fb8; --origin-system-bg: #eee7f0; --origin-system-fg: #4a4152; --shadow-1: 0 1px 2px rgba(41, 20, 55, 0.08), 0 1px 3px rgba(41, 20, 55, 0.06); --shadow-2: 0 8px 24px rgba(41, 20, 55, 0.14); --focus-ring: 0 0 0 3px rgba(123, 47, 247, 0.55); --focus-outline: 2px solid var(--pg-violet); color-scheme: light; } /* ============ THÈME SAISONNIER (variante claire chaleureuse) ============ */ /* P3.5 — accent orange/rose Pick & Go, surfaces crème. Bloc complet (comme theme-light/theme-dark) pour rester cohérent quelle que soit la préférence système. Les sémantiques gardent les valeurs claires testées (contraste). */ :root.theme-seasonal { --bg: #fdf5ec; --surface: #fffaf4; --surface-2: #fbeede; --surface-3: #f7e2cf; --border: #f0d9c2; --border-strong: #e0bd9c; --text: #2a1810; --text-muted: #6c5140; --text-invert: #ffffff; --ok: #2e7d32; --warn: #b45309; --crit: #c62828; --info: #1565c0; --ok-bg: #e6f2e8; --warn-bg: #fbeede; --crit-bg: #fae2e3; --info-bg: #e9eefa; --n0-bg: #e9eefa; --n0-fg: #1257a8; --n0-bd: #c3d3ef; --n1-bg: #e6f2e8; --n1-fg: #2e7d32; --n1-bd: #c1e0c6; --n2-bg: #fbe6cf; --n2-fg: #a1490a; --n2-bd: #f0c791; --n3-bg: #fce1ef; --n3-fg: #ad1268; --n3-bd: #f4bcda; --n4-bg: #fae2e3; --n4-fg: #a31620; --n4-bd: #f0bcbf; --origin-human-bg: #e9eefa; --origin-human-fg: #1257a8; --origin-ai-bg: #efe6fd; --origin-ai-fg: #5a1fb8; --origin-system-bg: #f3e7dc; --origin-system-fg: #6c4a2f; --shadow-1: 0 1px 2px rgba(80, 40, 10, 0.1), 0 1px 3px rgba(80, 40, 10, 0.08); --shadow-2: 0 8px 24px rgba(80, 40, 10, 0.18); --focus-ring: 0 0 0 3px rgba(245, 124, 0, 0.55); --focus-outline: 2px solid var(--pg-orange); color-scheme: light; } /* ============ TAILLE DE TEXTE ADAPTABLE (P3.3) ============ */ /* Agrandit la base rem sur :root ; tout le texte en rem suit. Spécificité (0,2,0) > html {font-size:100%} (0,0,1). Persistée en localStorage. */ :root[data-text-size="large"] { font-size: 112.5%; } :root[data-text-size="xlarge"] { font-size: 125%; }