/* * ============================================================ * TALK2EAT — DESIGN TOKENS (Futur clair · violet / bleu / argent) * Identité alignée sur le site vitrine index-futur-clair. * * cyber → CLAIR futuriste (défaut) : argent, encre, violet, bleu * default → SOMBRE futuriste : ardoise nuit, violet, bleu * dark → SOMBRE doux * * ROLLBACK : public/design-tokens.ancien.css * ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); /* ============================================================ 1. PALETTE PRIMITIVE ============================================================ */ :root { --tk-argent: #F3F5FB; --tk-blanc: #FFFFFF; --tk-brume: #E9EDF7; --tk-encre: #151A2E; --tk-ardoise: #4C5678; --tk-silver: #8892AC; --tk-violet: #6C4CF1; --tk-violet-f: #5A3FD6; --tk-violet-l: #8B5CFF; --tk-bleu: #2E7BFF; --tk-bleu-f: #2360D6; --tk-vert: #1F9E6B; --tk-ambre: #B0710B; --tk-rouge: #DC2626; --tk-ligne: rgba(94,110,170,.18); --tk-ligne-f: rgba(108,76,241,.32); --tk-nuit: #0F1220; --tk-nuit-1: #171B2E; --tk-nuit-2: #1E2338; --tk-nuit-3: #262C45; /* — Compat anciens primitifs (--p-*) — */ --p-void:#0F1220; --p-abyss:#171B2E; --p-deep:#1E2338; --p-layer:#262C45; --p-raised:#2F3652; --p-violet-900:#3B2A8F; --p-violet-700:#5A3FD6; --p-violet-600:#6C4CF1; --p-violet-400:#8B5CFF; --p-violet-300:#B4A0FF; --p-violet-100:#EDE7FF; --p-cyan-700:#2360D6; --p-cyan-500:#2E7BFF; --p-cyan-300:#7FB0FF; --p-cyan-100:#E4EEFF; --p-rose-700:#B91C1C; --p-rose-500:#DC2626; --p-rose-300:#F1A9A9; --p-amber:#B0710B; --p-red:#DC2626; --p-green:#1F9E6B; --p-blue:#2E7BFF; --p-text-0:#F3F5FB; --p-text-1:#B7C0DA; --p-text-2:#8892AC; --p-border-dim:rgba(94,110,170,.12); --p-border-mid:rgba(94,110,170,.25); --p-border-hot:rgba(108,76,241,.5); } /* ============================================================ 2. TOKENS SÉMANTIQUES — par thème (data-theme sur ) ============================================================ */ /* ── CLAIR futuriste (défaut, clé "cyber" conservée) ── */ [data-theme="cyber"] { --bg:#F3F5FB; --bg1:#FFFFFF; --bg2:#F7F8FD; --bg3:#E9EDF7; --b:rgba(94,110,170,.18); --b2:rgba(94,110,170,.32); --indigo:#6C4CF1; --indigo2:#5A3FD6; --ig:rgba(108,76,241,.09); --amber:#9A6300; --red:#DC2626; --green:#1F9E6B; --blue:#2E7BFF; --t:#151A2E; --t2:#4C5678; --t3:#8892AC; --r:12px; --rs:8px; --f:'Inter',system-ui,sans-serif; --m:'IBM Plex Mono',monospace; --cy-violet:#6C4CF1; --cy-violet-l:#5A3FD6; --cy-cyan:#2E7BFF; --cy-rose:#DC2626; --cy-glow-violet:0 2px 12px rgba(108,76,241,.14); --cy-glow-cyan:0 2px 12px rgba(46,123,255,.14); --cy-glow-rose:0 2px 12px rgba(220,38,38,.14); --cy-glow-subtle:0 1px 8px rgba(108,76,241,.10); --cy-surface-violet:rgba(108,76,241,.06); --cy-surface-cyan:rgba(46,123,255,.06); --cy-surface-rose:rgba(220,38,38,.06); --cy-tglow-violet:none; --cy-tglow-cyan:none; --cy-tglow-rose:none; } /* ── SOMBRE futuriste ── */ [data-theme="default"] { --bg:#0F1220; --bg1:#171B2E; --bg2:#1E2338; --bg3:#262C45; --b:rgba(150,165,220,.14); --b2:rgba(150,165,220,.26); --indigo:#8B5CFF; --indigo2:#7A4CF0; --ig:rgba(139,92,255,.12); --amber:#E0A93B; --red:#F87171; --green:#4FD1A0; --blue:#5C9BFF; --t:#EAEEFB; --t2:#AEB7D6; --t3:#7B85A6; --r:12px; --rs:8px; --f:'Inter',system-ui,sans-serif; --m:'IBM Plex Mono',monospace; --cy-violet:#8B5CFF; --cy-violet-l:#A47CFF; --cy-cyan:#5C9BFF; --cy-rose:#F87171; --cy-glow-violet:0 0 16px rgba(139,92,255,.35); --cy-glow-cyan:0 0 16px rgba(92,155,255,.32); --cy-glow-rose:0 0 16px rgba(248,113,113,.3); --cy-glow-subtle:0 0 10px rgba(139,92,255,.2); --cy-surface-violet:rgba(139,92,255,.10); --cy-surface-cyan:rgba(92,155,255,.09); --cy-surface-rose:rgba(248,113,113,.09); --cy-tglow-violet:none; --cy-tglow-cyan:none; --cy-tglow-rose:none; } /* ── SOMBRE doux ── */ [data-theme="dark"] { --bg:#141726; --bg1:#1C2036; --bg2:#242942; --bg3:#2D3350; --b:rgba(150,165,220,.12); --b2:rgba(150,165,220,.22); --indigo:#8B5CFF; --indigo2:#7A4CF0; --ig:rgba(139,92,255,.12); --amber:#E0A93B; --red:#F87171; --green:#4FD1A0; --blue:#5C9BFF; --t:#EAEEFB; --t2:#AEB7D6; --t3:#7B85A6; --r:12px; --rs:8px; --f:'Inter',system-ui,sans-serif; --m:'IBM Plex Mono',monospace; --cy-violet:#8B5CFF; --cy-violet-l:#A47CFF; --cy-cyan:#5C9BFF; --cy-rose:#F87171; --cy-glow-violet:0 0 16px rgba(139,92,255,.30); --cy-glow-cyan:0 0 16px rgba(92,155,255,.28); --cy-glow-rose:0 0 16px rgba(248,113,113,.28); --cy-glow-subtle:0 0 10px rgba(139,92,255,.18); --cy-surface-violet:rgba(139,92,255,.10); --cy-surface-cyan:rgba(92,155,255,.09); --cy-surface-rose:rgba(248,113,113,.09); --cy-tglow-violet:none; --cy-tglow-cyan:none; --cy-tglow-rose:none; } /* ============================================================ 3. TOKENS ÉTENDUS (compat --cy-*) — effets neutralisés ============================================================ */ :root { --cy-font-display:'Space Grotesk','Inter',sans-serif; --cy-font-mono:'IBM Plex Mono',monospace; --cy-ls-wide:.02em; --cy-ls-wider:.05em; --cy-duration-fast:.12s; --cy-duration-base:.2s; --cy-duration-slow:.35s; --cy-ease-out:cubic-bezier(.22,.61,.36,1); --cy-ease-spring:cubic-bezier(.34,1.3,.64,1); --cy-clip-sm:none; --cy-clip-md:none; --cy-clip-lg:none; --cy-scanlines:none; --cy-border-cyan:rgba(46,123,255,.35); --cy-border-rose:rgba(220,38,38,.35); --cy-border-active:rgba(108,76,241,.55); --cy-border-glow:rgba(108,76,241,.35); --cy-grad-primary:linear-gradient(135deg,#6C4CF1,#2E7BFF); --cy-grad-danger:linear-gradient(135deg,#DC2626,#B91C1C); --cy-grad-hot:linear-gradient(135deg,#6C4CF1,#8B5CFF); --cy-grad-data:linear-gradient(135deg,#2E7BFF,#6C4CF1); --cy-cyan-l:#5C9BFF; } /* ============================================================ 4. LISIBILITÉ & ERGONOMIE (correctifs audit UX — conservés) ============================================================ */ body { font-family:var(--f); letter-spacing:normal; text-transform:none; } /* Cibles tactiles : actions fréquentes de la PWA resto → min 44px */ .abtn, .btn-sec, .btn-danger, .act-btn, .btn-add, .btn-remove, .btn-done, .gmap-btn, .modify-btn, .valider-btn, .oo-btn, .btn-rm-save, .btn-rm-cancel { font-family:var(--f); font-size:.95rem; font-weight:600; letter-spacing:normal; text-transform:none; min-height:44px; padding:10px 16px; border-radius:var(--rs); transition:background var(--cy-duration-fast),border-color var(--cy-duration-fast),transform .1s ease; } .abtn + .abtn, .act-btn + .act-btn { margin-left:6px; } .abp { color:#fff; background:var(--indigo); border:1px solid var(--indigo2); } .abp:hover { background:var(--indigo2); } .abd, .aba { color:#fff; background:var(--green); border:1px solid var(--green); } .abd:hover, .aba:hover { filter:brightness(1.06); } .abr { color:#fff; background:var(--red); border:1px solid var(--red); } .abr:hover { filter:brightness(1.06); } .abc { color:var(--t2); background:transparent; border:1px solid var(--b2); } .abc:hover { color:var(--t); border-color:var(--t3); } .abw { color:#fff; background:var(--amber); border:1px solid var(--amber); } .btn-sec { background:transparent; border:1.5px solid var(--indigo); color:var(--indigo); } .btn-sec:hover { background:var(--ig); } .btn-danger { background:transparent; border:1.5px solid var(--red); color:var(--red); } .btn-danger:hover { background:rgba(220,38,38,.08); } .act-btn { border:1px solid var(--b2); background:var(--bg1); color:var(--t); } .act-btn:hover { border-color:var(--indigo); color:var(--indigo); } h1,h2,h3,h4,.card-title,.panel-title { font-family:var(--f); letter-spacing:normal; text-transform:none; text-shadow:none; } input,select,textarea,button { font-family:var(--f); } input,select,textarea { min-height:42px; font-size:1rem; } textarea { min-height:64px; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--indigo); outline-offset:2px; } .cy-scanlines, .scanlines { display:none !important; } * { text-shadow:none; }