/* GRAPHIT.EARTH — tokenii de design ai platformei. * * Singura sursă de adevăr pentru culoare, tipografie și spațiere. Înainte de fișierul ăsta, * 14 din cele 17 pagini de consolă își declarau propria paletă: aceleași ~30 de variabile, * copiate, cu mici derive între ele. O schimbare de culoare cerea 14 editări, iar două eșecuri * de contrast (WCAG 1.4.3 și 1.4.11) erau replicate peste tot. * * Ce s-a schimbat față de paleta copiată (vezi docs/AI-PIPE_interfata.html §02, §05): * * 1. ROLURILE SUNT SEPARATE. Vechiul `--line` servea și ca separator decorativ (fără prag de * contrast) și ca singură limită vizibilă a câmpurilor și butoanelor (prag 3:1). La 1,22–1,48:1 * pica al doilea rol. Acum: `--line` rămâne decorativ, `--line-control` e limita de control și * trece 3:1 pe toate suprafețele. * 2. `--faint` NU MAI ȚINE TEXT. La 3,13–3,80:1, folosit pe etichete mono de 10 px, cumula două * probleme. A devenit `--text-disabled` (elementele dezactivate sunt exceptate de WCAG), iar * textul secundar are acum `--text-2` (alias: `--muted`), verificat ≥4,5:1. * 3. TEMA DESCHISĂ E REALĂ. Toate cele 17 pagini aveau `data-theme="dark"` scris în fișier și * nicio pagină nu întreba sistemul. Acum implicitul urmează `prefers-color-scheme`, iar * atributul explicit de pe bate preferința (comutatorul din bara globală). * 4. SEVERITĂȚILE SUNT LEGATE DE ITU-T X.733. Fiecare are și o formă (vezi icons.svg, `sv-*`), * pentru că informația nu are voie să treacă doar prin culoare (WCAG 1.4.1, IEC 60073). * * Numele vechi (`--muted`, `--faint`, `--line`, `--crit`, `--hi`, `--sky`, `--conj`…) sunt păstrate * ca ALIASURI, ca paginile existente să nu se rupă la ștergerea paletelor locale. Sunt marcate * „compat" mai jos și se retrag pe măsură ce paginile sunt atinse — nu se folosesc în cod nou. * * Contrastul e verificat automat: ci/ui_check.py recalculează fiecare pereche token×suprafață * la fiecare rulare de CI și pică build-ul la regresie. Nu e o promisiune, e o poartă. */ :root { /* ——— tipografie ——— */ --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace; --serif: "Charter", "Bitstream Charter", "Iowan Old Style", Georgia, "Times New Roman", serif; /* Scala tipografică. Minimul e 12 px în UI operațional (ISO 9241-125); înainte existau 79 de declarații sub 10 px, majoritatea pe etichete mono în majuscule — cel mai greu tip de text de citit la dimensiuni mici. `--fs-wall` e scala ecranului de perete, citit de la 3–5 m (ISO 11064-5). */ --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 32px; /* Scala ecranului de perete. ISO 11064-5: un afișaj de cameră de operare se citește de la 3–5 m, deci are propria scală, nu o poate împrumuta pe cea a unei console de birou. Podeaua e 24 px — sub ea, un text la 4 m devine o pată. Treptele urmează același raport ≈1,2. */ --fs-wall: 24px; --fs-wall-lg: 30px; --fs-wall-xl: 38px; --fs-wall-2xl: 52px; --fs-wall-3xl: 72px; /* Înălțimi de rând. 1,5 pe corpul de text nu e o preferință: WCAG 1.4.12 cere ca textul să suporte 1,5 fără pierdere de conținut, iar dacă pornești de acolo, criteriul e satisfăcut prin construcție. Titlurile stau mai strâns, pentru că sunt scurte. */ --lh-tight: 1.15; /* display */ --lh-title: 1.25; /* titluri */ --lh-snug: 1.4; /* etichete, celule de tabel */ --lh-body: 1.55; /* corpul interfeței */ --lh-read: 1.65; /* suprafețe de lectură: documente, texte juridice */ /* Spațiere între litere. Pozitivă la majuscule mici (altfel se lipesc), zero la corp, ușor negativă la display (la corp mare, spațiile par prea largi). */ --tr-display: -0.01em; --tr-body: 0; --tr-label: 0.005em; --tr-overline: 0.08em; /* Trei greutăți. Mai multe nu se disting pe fonturi de sistem și cresc încărcarea cognitivă. */ --fw-normal: 400; --fw-semi: 600; --fw-bold: 700; /* Măsura optimă a rândului de text: 45–75 de caractere, 66 fiind ținta clasică. */ --measure: 68ch; /* ——— standardul de lățime ——— Trei tipuri de suprafață, trei reguli. Măsurătoarea de dinainte găsise trei plafoane diferite (1200, 1500, 1560 px) fără niciun principiu în spate: /satelliti folosea cu 300 px mai puțin decât panourile vecine, pe același ecran. `--ge-gutter` — respirația laterală, aceeași pe toate suprafețele. Suprafețele OPERAȚIONALE nu au plafon: sunt tabele și panouri dense, iar lățimea e chiar ce se cumpără cu un monitor lat. Un plafon acolo lasă pixeli nefolosiți lângă o coloană care s-ar putea citi. Suprafețele de LECTURĂ au plafon, dar unul tipografic, nu de layout: măsura de 45–75 de caractere pe rând. Peste ea, ochiul pierde începutul rândului următor. */ --ge-gutter: 24px; --ge-gutter-sm: 16px; /* ——— spațiere: scală de 4 px, nicio valoare în afara ei ——— */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --radius: 6px; --radius-pill: 999px; /* ——— mișcare: sub 200 ms, doar opacity și transform ——— */ --dur: 160ms; --ease: cubic-bezier(.2, .6, .3, 1); /* ——— cromul cojii ——— */ --ge-bar-h: 52px; /* lockup-ul complet de 40 px, cu 6 px de respirație sus și jos */ --ge-rail-w: 56px; --ge-docnav-w: 232px; /* meniul secundar, DOAR pe cele patru documente publice */ --ge-drawer-w: 300px; /* Locul REZERVAT pentru numele paginii. Numele au între 6 („Portal") și 32 de caractere („Termeni și condiții de utilizare"): lăsat să curgă, împinge indicatorii de stare cu ~164 px de la o pagină la alta, iar ochiul îi caută de fiecare dată în altă parte. Un loc de lățime fixă îi ancorează la același x pe toate suprafețele — e cerința de poziție consecventă a informației de stare din ISO 11064-5 / EEMUA 191, nu o preferință. 34ch acoperă cel mai lung nume fără tăiere; ce nu încape primește puncte de suspensie și numele întreg în `title`. */ --ge-ctx-w: 34ch; } /* ═══════════════ TEMA ÎNCHISĂ ═══════════════ Implicită pentru consolă: tura se operează pe întuneric. */ :root, :root[data-theme="dark"] { /* Culorile de marcă. NU intră în paleta de stare: verdele, chihlimbarul și roșul rămân rezervate semanticii operaționale. Sigla e BICOLORĂ: `--brand-earth` e portocaliul care poartă semnul (litera din hexagon, mottoul), `--brand-structure` e tonul neutru care poartă structura (hexagon, bară, wordmark) — pe temă închisă structura e albă, nu ardezie. */ --brand-earth: #ff5e00; /* marca, verbatim — logo, motto, icoane de navigare */ --brand-earth-ink: #ff5e00; /* varianta care poate purta TEXT: 5,72:1 pe --surface */ --brand-structure: #FFFFFF; /* structura siglei pe temă închisă — 17,52:1 pe --surface */ color-scheme: dark; --bg: #0B1017; --surface: #121A24; --surface-2: #18222E; --surface-3: #1E2A38; --panel: #18222E; /* era folosit în reentry.html fără să fie definit nicăieri */ --ink: #E6ECF4; --text-2: #9DAEC2; /* text secundar — 6,3:1 pe --bg */ --text-disabled: #5A6B7E; /* NU pentru text activ; elementele dezactivate sunt exceptate */ --line: #22303F; /* separator decorativ, fără prag */ --line-control: #637C98; /* limita unui control — 3,37:1 pe cea mai deschisă suprafață */ --accent: #ff5e00; --accent-ink: #FF7A2B; /* 5,9:1 pe --bg — accentul care poartă text */ --accent-soft: rgba(255, 94, 0, .15); /* severități ITU-T X.733 — fiecare are pereche de formă în icons.svg */ --sev-crit: #F0705E; --sev-crit-soft: rgba(240, 112, 94, .16); --sev-major: #D8C062; --sev-major-soft: rgba(216, 192, 98, .16); --sev-minor: #BFCF7A; --sev-minor-soft: rgba(191, 207, 122, .16); --sev-warn: #6FA8D6; --sev-warn-soft: rgba(111, 168, 214, .16); --sev-indet: #8697AB; --sev-indet-soft: rgba(134, 151, 171, .16); --sev-clear: #6FB380; --sev-clear-soft: rgba(111, 179, 128, .16); /* accente de domeniu (geometrie, glob, capabilități) */ --geo: #74A7CF; --globe-line: #3D5D79; /* ——— compat: numele vechi, mapate pe valori care trec pragurile ——— */ --muted: var(--text-2); --faint: var(--text-disabled); --ok: var(--sev-clear); --ok-soft: var(--sev-clear-soft); --warn: var(--sev-major); --warn-soft: var(--sev-major-soft); --crit: var(--sev-crit); --crit-soft: var(--sev-crit-soft); --hi: #E8B75C; --hi-soft: rgba(232, 183, 92, .16); --risk: var(--sev-crit); --sky: var(--geo); --sky-soft: rgba(116, 167, 207, .14); --live: #4FD1DB; --live-soft: rgba(79, 209, 219, .14); --conj: #B0A2D8; --conj-soft: rgba(176, 162, 216, .15); /* ── REGIMURI ORBITALE — paletă CATEGORIALĂ ────────────────────────────────────────────── Regimul e o identitate (LEO/MEO/GEO/HEO), nu o stare și nu un accent de acțiune. Până acum era pictat cu ce se nimerea: GEO cu `--accent` (portocaliul mărcii) și HEO cu `--crit` — adică 692 din 1 162 de obiecte în portocaliu-roșu pe glob, plus culori de SEVERITATE folosite pentru categorii. Cele două sunt rezervate: `--accent` e pentru acțiune, `--sev-*` pentru stare. O conjuncție critică nu are cum să iasă în față dacă jumătate din populație e deja roșie. Al doilea motiv: aceleași patru regimuri aveau CULORI DIFERITE pe /satelliti și pe /ssa (MEO ambră vs albastru, GEO albastru vs portocaliu). Un obiect își schimba culoarea la click. De aceea stau aici, o dată, nu în fiecare pagină. Alegerea hues: verde 135° · albastru 205° · nisip 35° · lavandă 260° — depărtate pe roată, la croma MODERATĂ și luminozitate apropiată, ca niciunul să nu domine. Identitatea nu stă niciodată doar pe culoare: comutatoarele din panou sunt legenda, iar fișa de detaliu scrie regimul. */ --regime-leo: #8FCB9B; --regime-meo: #74A7CF; --regime-geo: #D6A76A; --regime-heo: #A99AD1; --regime-other: #8697AB; /* ── TIP DE MANEVRĂ — a doua paletă categorială ──────────────────────────────────────────────── Tot categorie, nu stare: E-W e o corecție în plan (Δa), N-S e în afara planului (Δi), iar „ambele" e conjuncția lor. Aveau ACEEAȘI problemă ca regimurile — patru liste independente (legenda din /satelliti, fluxul de alerte P2, banda de populație, globul din /ssa), două pe `--accent` și una pe `--live`. Deci: patru consumatori, o declarație. Hues distincte de cele de regim, ca banda să rămână citibilă când se colorează pe manevră peste un fond de regimuri: nisip 35° · albastru 205° · lavandă 260°. */ --man-ew: #D6A76A; --man-ns: #74A7CF; --man-both: #B0A2D8; --gold: var(--accent); } /* ═══════════════ TEMA DESCHISĂ ═══════════════ Implicită pentru suprafețele de lectură (dosare, produse, documente) și pentru orice utilizator al cărui sistem o cere. */ :root[data-theme="light"] { /* Culorile de marcă. NU intră în paleta de stare: verdele, chihlimbarul și roșul rămân rezervate semanticii operaționale. Sigla e BICOLORĂ: `--brand-earth` poartă semnul, `--brand-structure` poartă structura — pe temă deschisă, ardezia. */ --brand-earth: #ff5e00; /* marca rămâne verbatim — logotipurile sunt exceptate de WCAG 1.4.3 */ --brand-earth-ink: #A83A00; /* pe alb, #ff5e00 dă 3,06:1 — text NU. Varianta închisă dă 6,42:1 */ --brand-structure: #4E555E; /* structura siglei pe temă deschisă — 7,54:1 pe alb */ color-scheme: light; --bg: #F2F5F8; --surface: #FFFFFF; --surface-2: #EAEFF4; --surface-3: #E0E7EE; --panel: #EAEFF4; --ink: #16202C; --text-2: #54657A; --text-disabled: #94A3B2; --line: #DBE3EB; --line-control: #6A7E93; --accent: #A83A00; --accent-ink: #953300; --accent-soft: rgba(255, 94, 0, .10); --sev-crit: #B23A26; --sev-crit-soft: rgba(178, 58, 38, .10); --sev-major: #7A6410; --sev-major-soft: rgba(122, 100, 16, .10); --sev-minor: #5F6B14; --sev-minor-soft: rgba(95, 107, 20, .10); --sev-warn: #2F6291; --sev-warn-soft: rgba(47, 98, 145, .10); --sev-indet: #576675; --sev-indet-soft: rgba(87, 102, 117, .10); --sev-clear: #2F6C40; --sev-clear-soft: rgba(47, 108, 64, .10); --geo: #31648C; --globe-line: #9FB6C9; --muted: var(--text-2); --faint: var(--text-disabled); --ok: var(--sev-clear); --ok-soft: var(--sev-clear-soft); --warn: var(--sev-major); --warn-soft: var(--sev-major-soft); --crit: var(--sev-crit); --crit-soft: var(--sev-crit-soft); --hi: #7E5A0F; --hi-soft: rgba(126, 90, 15, .10); --risk: var(--sev-crit); --sky: var(--geo); --sky-soft: rgba(49, 100, 140, .10); --live: #17707A; --live-soft: rgba(23, 112, 122, .12); --conj: #5B4B8A; --conj-soft: rgba(91, 75, 138, .12); /* Regimuri, varianta pentru fond deschis: aceleași hues, croma și luminozitate coborâte ca să rămână lizibile pe alb — nu o inversare automată. */ --regime-leo: #3F7A4F; --regime-meo: #31648C; --regime-geo: #8A6224; --regime-heo: #5B4B8A; --regime-other: #566A80; --man-ew: #8A6224; --man-ns: #31648C; --man-both: #5B4B8A; --gold: var(--accent); } /* Fără atribut explicit pe , sistemul decide. Comutatorul din bara globală scrie data-theme și persistă alegerea; regulile de mai sus, mai specifice, o respectă. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #F2F5F8; --surface: #FFFFFF; --surface-2: #EAEFF4; --surface-3: #E0E7EE; --panel: #EAEFF4; --ink: #16202C; --text-2: #54657A; --text-disabled: #94A3B2; --line: #DBE3EB; --line-control: #6A7E93; --accent: #8A5A11; --accent-ink: #6F480D; --accent-soft: rgba(138, 90, 17, .10); --sev-crit: #B23A26; --sev-crit-soft: rgba(178, 58, 38, .10); --sev-major: #7A6410; --sev-major-soft: rgba(122, 100, 16, .10); --sev-minor: #5F6B14; --sev-minor-soft: rgba(95, 107, 20, .10); --sev-warn: #2F6291; --sev-warn-soft: rgba(47, 98, 145, .10); --sev-indet: #576675; --sev-indet-soft: rgba(87, 102, 117, .10); --sev-clear: #2F6C40; --sev-clear-soft: rgba(47, 108, 64, .10); --geo: #31648C; --globe-line: #9FB6C9; --hi: #9A5518; --hi-soft: rgba(154, 85, 24, .10); --live: #17707A; --live-soft: rgba(23, 112, 122, .12); --conj: #5B4B8A; --conj-soft: rgba(91, 75, 138, .12); --regime-leo: #3F7A4F; --regime-meo: #31648C; --regime-geo: #8A6224; --regime-heo: #5B4B8A; --regime-other: #566A80; --man-ew: #8A6224; --man-ns: #31648C; --man-both: #5B4B8A; } } /* SCOS: densitatea rândurilor (`--ge-row-h` + `[data-density]`). Cele trei trepte — compact 28 px, normal 34, relaxat 40 — erau declarate aici și comandate de un buton din bară, dar NICIO pagină și nicio componentă nu citea tokenul: comutatorul schimba un atribut pe care nimeni nu îl asculta. Când se reia, se reintroduc împreună: tokenul, cele două reguli, butonul din `shell.js:buildBar` și cheile `bar.density_title` + `density.*` din cataloage. Constrângerea de respectat rămâne ținta de ≥24 px din WCAG 2.5.8 — în modul compact se păstrează prin spațiere, nu prin dimensiunea vizuală a controlului. */