/* Copie de : aesop_arena_tactical/app_home/static/app_home/css/main.css @ 55e5aad1, 2026-10-24 Adaptée pour aesop_arena_plan : la teinte du plan est le CYAN (spec §10.2) — --accent #22d3ee, --accent-highlight, --accent-soft, --row-highlight ; --info passe au bleu ciel, puisque le cyan est pris. Le reste est celui du jeu, et les ajouts du plan sont en fin de fichier (« les ajouts du plan »). */ /* Diodote · Plan COPD — dark design system (standalone, no aesop_ui dependency). Same tokens as the Diodote family (aesop_arena, aesop_wargame), cyan-keyed: the arena is blue because it builds, the game amber because it fights, the plan cyan because it designs. THE TOKENS — every stylesheet of this service (ops.css, plan.css, lobby.css, a page's own) reads these; a colour or a font size written as a literal is a defect waiting to drift. surfaces --bg the page --bg-secondary cards, panels, the rows of a list --bg-elevated what sits on a card: inputs' fill, chips, the explainer, a raised button --surface-tooltip floating things: the (i) bubble, toasts, the map's tooltips --map-bg behind a map while its cells draw lines --border hairlines between everything --border-strong a bubble's or a key cap's outline --border-input the edge of a field, a select or a switch's track: 3:1 against the page and a card text --text-bright titles and values · --text-primary body · --text-secondary labels, table heads --text-muted meta and hints (4.5:1 on every surface, the amber-tinted cards included) --on-accent text drawn on the amber fill accent --accent · --accent-highlight · --accent-soft selection, the primary action, the focus ring states --success · --warning · --danger · --danger-text (red that reads as text on the dark surfaces) --info the sensor cyan (a band, a sensor envelope) --path a planned route (lime) energy --energy-nuclear · --energy-coal · --energy-hydro · --energy-solar · --energy-wind the source a power station is drawn with (lens « Economy › Power plants »); nuclear's violet is the only violet of the map, so nothing else reads like it digital --digital a cable landing, a data centre (magenta — no other layer uses it) rows --row-highlight the row that matters (the weakest link, the relevant track) --row-good the best row (the recommended COA) type --font (the page, and every control) · --mono (code, key caps, seat codes) --fs-2xs .7rem · --fs-xs .72rem · --fs-sm .76rem · --fs-md .85rem · --fs-lg 1rem the body is 14px; nothing in px; nothing is written under .7rem, the floor of a text that carries information (ui-static-33) shape --radius (cards) · --radius-sm (buttons, inputs, alerts) · --focus (the keyboard ring) layout --navbar-height zero when the top line is folded away; every layout reads it THE SHARED COMPONENTS (defined below, for every page — do not redefine them in a page's stylesheet): .btn (-primary, -ghost, -lg, [disabled]) .badge (-ok, -warn, -no, -level) — a status word, never a button .alert (-danger, -warn, -ok) — .refuse-card and .warn-card are its two historical names .messages / .message-{success,info,warning,error} Django's messages, announced and dismissable .section-title (an h2 that opens a section) · .block-title (an h3 that heads a panel or a block) .data-table (every table of figures) · .kv (a key/value table) · .table-wrap (a wide table scrolls in it) .card · .panel (folds) · .explainer · .field / .field-row / .segmented / .switch · progress .ux-ico (-add, -danger) — an icon-only button or summary (aria-hidden glyph + .sr-only name + a tooltip) .ux-tiles › .ux-tile (.ux-tile-k the label, .ux-tile-v the value) — a panel's state at a glance utilities: .inline · .mt-s · .mt-1 · .sr-only — a field's width is its page's (gm.css: .w-5, .w-6, .w-full) */ :root { color-scheme: dark; /* the browser's own controls (spinners, pickers, scrollbars) are dark too */ --bg: #0f1117; --bg-secondary: #171a23; --bg-elevated: #1e222d; --surface-tooltip: #262b38; --map-bg: #0b0e14; --border: #2a2f3d; --border-strong: #3a4152; --border-input: #636a7d; /* 3.5:1 on --bg, 3.2:1 on --bg-secondary (browser_admin-15) */ --text-primary: #e6e8ef; --text-secondary: #b8bccb; --text-muted: #979daf; /* ≥ 4.5:1 on --bg-elevated, --surface-tooltip and an --accent-soft card */ --text-bright: #ffffff; --on-accent: #101010; --accent: #22d3ee; --accent-highlight: #67e8f9; --accent-soft: rgba(34, 211, 238, 0.14); --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --danger-text: #fca5a5; --info: #38bdf8; --path: #a3e635; --energy-nuclear: #a78bfa; --energy-coal: #94a3b8; --energy-hydro: #38bdf8; --energy-solar: #fde047; --energy-wind: #4ade80; --digital: #e879f9; --row-highlight: #0f2a2e; --row-good: #14211a; --fs-2xs: .7rem; --fs-xs: .72rem; --fs-sm: .76rem; --fs-md: .85rem; --fs-lg: 1rem; --navbar-height: 52px; --radius: 8px; --radius-sm: 6px; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Q33 (spec §40.6) — le schéma du processus, d'après PROMPT_STYLE_SVG_JS_HTMX : une couleur par phase (1–2 l'appréciation, 3a–3b l'estimation, 4a–4b le plan, 5–6 réservées), les deux sens de flèche, la provenance ; et le serif des fiches. */ --band-1: #D63A9B; --band-2: #D63A9B; --band-3a: #2F86E0; --band-3b: #2F86E0; --band-4a: #00A898; --band-4b: #00A898; --band-res: #8C9AA3; --flow-down: #2AA3B5; --flow-up: #E56B36; --prov-measured: #4CAF76; --prov-estimated: #8B96E0; --prov-illustrative: #E0A043; --prov-empty: #8B9AA3; --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Liberation Serif", Georgia, serif; accent-color: var(--accent); /* checkboxes, radios and range thumbs the page does not draw itself */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text-primary); font-family: var(--font); font-size: 14px; line-height: 1.55; } /* The browser draws controls in its own font (Arial) unless told otherwise: one typeface for a