/* ============================================================ medtool.ro · tokens.css Sistemul de design partajat: MedCheck + Meditecha ------------------------------------------------------------ Nivel 1 --mt-c-* primitive (paleta brută). Nu se citesc din componente. Nivel 2 --mt-* semantice (roluri). DOAR aceștia apar în components.css. Nivel 3 --mt--* densitate per componentă. Aplicația le rescrie. Regula: în componente nu se scrie niciodată un hex. Se scrie var(--mt-…). ============================================================ */ /* Straturile cascadei. Declarate o singură dată, aici, înaintea oricărui CSS. CSS-ul vechi al fiecărei aplicații intră în @layer legacy și pierde în fața componentelor fără specificitate și fără !important. */ @layer legacy, tokens, components, app; @layer tokens { :root { /* ══════════════ NIVEL 1 — PRIMITIVE ══════════════ */ /* Brand (blocate — medicortoped.ro) */ --mt-c-teal: #2FA4A9; --mt-c-teal-deep: #1a7a7e; /* 4.64:1 pe tentă deschisă; #1f7d81 pica la 4.44 */ --mt-c-green: #7DBA2F; --mt-c-green-deep: #5a9022; /* Hârtie (solul ambelor aplicații) */ --mt-c-paper: #FBFAF7; --mt-c-paper-line: #ece8df; --mt-c-paper-sunk: #f5f3ed; --mt-c-white: #ffffff; /* Chrome (mobilierul întunecat — identic în ambele aplicații) */ --mt-c-chrome: #16282d; --mt-c-chrome-2: #1d343a; --mt-c-chrome-line: #2a474e; --mt-c-chrome-text: #cfe0e2; --mt-c-chrome-muted:#8aa6ab; /* Cerneală */ --mt-c-ink: #16242a; --mt-c-ink-soft: #3a4c52; --mt-c-ink-max: #0e1d22; --mt-c-muted: #7c8c91; --mt-c-label: #9aa9ac; /* Utilitare */ --mt-c-red: #c0392b; --mt-c-red-bg: #fceae7; --mt-c-red-line: #f0d2cd; /* ══════════════ NIVEL 2 — SEMANTICE ══════════════ */ /* Sursa accentului. Fiecare aplicație rescrie DOAR linia asta. medcheck → #2FA4A9 · medteca → #047857 */ --mt-accent-raw: var(--mt-c-teal); /* Familia de accent — valori statice de rezervă; blocul @supports de mai jos le înlocuiește cu derivări OKLCH din --mt-accent-raw. */ --mt-accent: #2FA4A9; --mt-accent-deep: #1a7a7e; /* text pe tentă, hover, cifre mari */ --mt-accent-line: #C8ECEE; /* borduri subtile de accent */ --mt-accent-tint: #EAF7F7; /* fundaluri deschise, hover, capul hero-ului */ --mt-accent-ink: #ffffff; /* text pe accent plin */ /* Suprafețe */ --mt-bg: var(--mt-c-paper); --mt-surface: var(--mt-c-white); --mt-surface-sunk: var(--mt-c-paper-sunk); --mt-overlay: rgba(22, 40, 45, .55); /* Text */ --mt-ink: var(--mt-c-ink); --mt-ink-soft: var(--mt-c-ink-soft); --mt-ink-max: var(--mt-c-ink-max); --mt-muted: var(--mt-c-muted); --mt-label: var(--mt-c-label); /* Linii */ --mt-border: var(--mt-c-paper-line); --mt-border-strong: #d9d3c6; --mt-divider: #f1eee6; /* Chrome — roluri */ --mt-chrome: var(--mt-c-chrome); --mt-chrome-2: var(--mt-c-chrome-2); --mt-chrome-line: var(--mt-c-chrome-line); --mt-chrome-text: var(--mt-c-chrome-text); --mt-chrome-muted: var(--mt-c-chrome-muted); /* Inelul de focus — unul singur, în toată platforma */ --mt-ring: 0 0 0 3px color-mix(in srgb, var(--mt-accent) 18%, transparent); /* ══════════════ STATUS — 8 tokeni × 3 nuanțe ══════════════ Rețeta: fundal deschis + text închis în aceeași gamă + bulină saturată. Aceeași culoare = același înțeles, în ambele aplicații. Meditecha: nou → blue · de revizuit → amber · învățat → green */ --mt-st-green: #5a9022; --mt-st-green-bg: #eef6e2; --mt-st-green-dot: #7DBA2F; --mt-st-blue: #2563eb; --mt-st-blue-bg: #e8f0fe; --mt-st-blue-dot: #3b82f6; --mt-st-orange: #b85e18; --mt-st-orange-bg: #fbeede; --mt-st-orange-dot: #e67e22; --mt-st-amber: #8a6a12; --mt-st-amber-bg: #fcf3da; --mt-st-amber-dot: #d99e1a; --mt-st-gray: #5b6770; --mt-st-gray-bg: #eef1f1; --mt-st-gray-dot: #6b7280; --mt-st-violet: #6d28d9; --mt-st-violet-bg: #f1ecfb; --mt-st-violet-dot: #8b5cf6; --mt-st-cyan: #0e7490; --mt-st-cyan-bg: #e0f2fe; --mt-st-cyan-dot: #06b6d4; --mt-st-rose: #be185d; --mt-st-rose-bg: #fce7f3; --mt-st-rose-dot: #ec4899; /* Al nouălea: se mapează pe accent, deci urmează tema aplicației. */ --mt-st-accent: var(--mt-accent-deep); --mt-st-accent-bg: var(--mt-accent-tint); --mt-st-accent-dot:var(--mt-accent); /* ══════════════ FEEDBACK SEMANTIC ══════════════ */ --mt-ok: var(--mt-st-green); --mt-ok-bg: var(--mt-st-green-bg); --mt-warn: var(--mt-st-amber); --mt-warn-bg: var(--mt-st-amber-bg); --mt-info: var(--mt-st-blue); --mt-info-bg: var(--mt-st-blue-bg); --mt-danger: var(--mt-c-red); --mt-danger-bg: var(--mt-c-red-bg); --mt-danger-line: var(--mt-c-red-line); /* Verdele brand ca suprafață plină — confirmarea finală (Salvează, Finalizează). Nu urmează accentul: „gata" înseamnă același lucru în ambele aplicații. */ --mt-ok-solid: var(--mt-c-green); --mt-ok-solid-deep: var(--mt-c-green-deep); /* ══════════════ EVIDENȚIATOR (doar Meditecha) ══════════════ Sens fix: galben = cheie · verde = indicație · teal = de reținut · roz = atenție */ --mt-hl-yellow: #FFE187; --mt-hl-green: #CDE9A0; --mt-hl-teal: #A6E3E6; --mt-hl-pink: #F8C2D0; --mt-hl-ink: var(--mt-c-ink-max); /* ══════════════ GRADIENTE — trei, cu nume diferite ══════════════ brand = semnătura. EXACT trei utilizări: .mt-mark, .mt-rule, .mt-item.is-active Nu urmează accentul: e semnătura comună a studioului. accent = rampă de nuanță (buton primar, FAB). Nu e semnătura. hero = tentă de fundal. Nu e semnătura. */ --mt-grad-brand: linear-gradient(135deg, var(--mt-c-teal), var(--mt-c-green)); --mt-grad-accent: linear-gradient(135deg, var(--mt-accent), var(--mt-accent-deep)); --mt-grad-hero: linear-gradient(135deg, var(--mt-surface) 0%, var(--mt-accent-tint) 100%); /* ══════════════ TIPOGRAFIE ══════════════ Roboto + stive de sistem. Zero resurse de rețea. */ --mt-font: "Roboto", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif; --mt-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --mt-font-read: var(--mt-font); /* Scara. O singură serie pentru ambele aplicații — de la micro-badge la H1 de lecție. IMPORTANT: px, niciodată rem. MedCheck are html{font-size:14px}, Meditecha 16px. */ --mt-fs-micro: 10.5px; --mt-fs-xs: 11px; --mt-fs-sm: 12px; --mt-fs-meta: 12.5px; --mt-fs-base: 13.5px; --mt-fs-md: 15px; --mt-fs-lg: 17px; --mt-fs-xl: 20px; --mt-fs-2xl: 22px; --mt-fs-3xl: 26px; --mt-fs-4xl: 30px; /* Lectura lungă — token propriu, există doar în vizualizarea de lecție. */ --mt-fs-read: 18px; --mt-lh-read: 1.75; --mt-measure: 68ch; --mt-lh-tight: 1.2; --mt-lh-ui: 1.4; --mt-track-eyebrow: .08em; /* ══════════════ SPAȚIERE — bază 4px ══════════════ */ --mt-s1: 4px; --mt-s2: 8px; --mt-s3: 12px; --mt-s4: 16px; --mt-s5: 20px; --mt-s6: 24px; --mt-s7: 32px; --mt-s8: 40px; --mt-s9: 48px; --mt-s10:64px; /* Marginea laterală a ecranului (contractul de mobil: 18px) */ --mt-gutter: 18px; /* ══════════════ RAZE ══════════════ */ --mt-r-sm: 7px; /* input, buton mic, chip-buton */ --mt-r-md: 10px; /* card, popover, iconbtn */ --mt-r-lg: 14px; /* panouri, suprafețe mari */ --mt-r-xl: 18px; /* stare goală, drop box */ --mt-r-pill: 999px; /* ══════════════ ELEVAȚIE — o suprafață, un singur nivel ══════════════ */ --mt-e1: 0 1px 2px rgba(20,40,46,.06), 0 1px 1px rgba(20,40,46,.04); --mt-e2: 0 6px 24px rgba(20,40,46,.12); --mt-e3: 0 16px 48px rgba(20,40,46,.20); /* ══════════════ MIȘCARE ══════════════ */ --mt-ease: cubic-bezier(.2,.7,.2,1); --mt-dur-fast: 120ms; --mt-dur-base: 180ms; --mt-dur-slow: 240ms; /* ══════════════ NIVEL 3 — DENSITATE (rescrise de aplicație) ══════════════ */ --mt-tap: 44px; /* ținta minimă de atingere. Nu coboară niciodată. */ --mt-btn-h: 36px; /* înălțimea butonului pe desktop */ --mt-btn-h-sm: 30px; --mt-field-h: 38px; --mt-hero-pad: 16px 24px; --mt-hero-r: 16px; --mt-card-pad: 16px 18px; /* Straturi */ --mt-z-topbar: 20; --mt-z-pop: 40; --mt-z-dialog: 60; --mt-z-toast: 80; } /* ── Derivarea OKLCH a familiei de accent ────────────────────────────── Verificat pe #2FA4A9 = L .658 / C .100 / H 199.3; #1a7a7e are exact aceeași nuanță la L .530. Deci întreaga scară e reproductibilă dintr-un singur hex. Consecință: o temă nouă = o singură linie, nu cinci hexuri scrise de mână. */ @supports (color: oklch(from red l c h)) { :root { --mt-accent: oklch(from var(--mt-accent-raw) 0.658 calc(c * 1.00) h); --mt-accent-deep: oklch(from var(--mt-accent-raw) 0.530 calc(c * 0.83) h); --mt-accent-line: oklch(from var(--mt-accent-raw) 0.918 calc(c * 0.38) h); --mt-accent-tint: oklch(from var(--mt-accent-raw) 0.966 calc(c * 0.14) h); } } /* ══════════════ DARK ══════════════ Nu e o a doua paletă scrisă de mână: aceeași derivare, alți parametri. De aceea funcționează automat pentru orice accent. Contract: atributul data-theme pe . Aplicația îl setează din localStorage. */ :root[data-theme="dark"] { --mt-bg: #12191c; --mt-surface: #1a2428; --mt-surface-sunk: #151e21; --mt-overlay: rgba(6, 12, 14, .66); --mt-ink: #eef3f1; --mt-ink-soft: #c4cfcc; --mt-ink-max: #ffffff; --mt-muted: #8f9b97; --mt-label: #7d8a88; --mt-border: #2b393d; --mt-border-strong: #3a4b50; --mt-divider: #222d31; --mt-accent: #45c3c8; --mt-accent-deep: #8fe0e3; --mt-accent-line: #2d4a4d; --mt-accent-tint: #17302f; --mt-accent-ink: #0b1416; --mt-danger: #ff6f63; --mt-danger-bg: #331815; --mt-danger-line: #4d211c; --mt-e1: 0 1px 2px rgba(0,0,0,.40); --mt-e2: 0 6px 24px rgba(0,0,0,.50); --mt-e3: 0 16px 48px rgba(0,0,0,.60); /* Statusurile: fundal = bulina diluată în suprafață, text = bulina spălată în alb. Opt linii în loc de douăzeci și patru de hexuri. */ --mt-st-green-bg: color-mix(in srgb, var(--mt-st-green-dot) 16%, var(--mt-surface)); --mt-st-blue-bg: color-mix(in srgb, var(--mt-st-blue-dot) 16%, var(--mt-surface)); --mt-st-orange-bg: color-mix(in srgb, var(--mt-st-orange-dot) 16%, var(--mt-surface)); --mt-st-amber-bg: color-mix(in srgb, var(--mt-st-amber-dot) 16%, var(--mt-surface)); --mt-st-gray-bg: color-mix(in srgb, var(--mt-st-gray-dot) 16%, var(--mt-surface)); --mt-st-violet-bg: color-mix(in srgb, var(--mt-st-violet-dot) 16%, var(--mt-surface)); --mt-st-cyan-bg: color-mix(in srgb, var(--mt-st-cyan-dot) 16%, var(--mt-surface)); --mt-st-rose-bg: color-mix(in srgb, var(--mt-st-rose-dot) 16%, var(--mt-surface)); --mt-st-green: color-mix(in srgb, var(--mt-st-green-dot) 70%, #fff); --mt-st-blue: color-mix(in srgb, var(--mt-st-blue-dot) 70%, #fff); --mt-st-orange: color-mix(in srgb, var(--mt-st-orange-dot) 70%, #fff); --mt-st-amber: color-mix(in srgb, var(--mt-st-amber-dot) 70%, #fff); --mt-st-gray: color-mix(in srgb, var(--mt-st-gray-dot) 70%, #fff); --mt-st-violet: color-mix(in srgb, var(--mt-st-violet-dot) 70%, #fff); --mt-st-cyan: color-mix(in srgb, var(--mt-st-cyan-dot) 70%, #fff); --mt-st-rose: color-mix(in srgb, var(--mt-st-rose-dot) 70%, #fff); /* Evidențiatorul: aceleași patru culori, dar ca fundal translucid peste hârtia întunecată — altfel cele patru pastele ard pe ecran noaptea. */ --mt-hl-ink: #0e1d22; } @supports (color: oklch(from red l c h)) { :root[data-theme="dark"] { --mt-accent: oklch(from var(--mt-accent-raw) 0.70 calc(c * 0.95) h); --mt-accent-deep: oklch(from var(--mt-accent-raw) 0.82 calc(c * 0.85) h); --mt-accent-line: oklch(from var(--mt-accent-raw) 0.32 calc(c * 0.30) h); --mt-accent-tint: oklch(from var(--mt-accent-raw) 0.24 calc(c * 0.55) h); --mt-bg: oklch(from var(--mt-accent-raw) 0.155 calc(c * 0.12) h); --mt-surface: oklch(from var(--mt-accent-raw) 0.215 calc(c * 0.12) h); --mt-surface-sunk:oklch(from var(--mt-accent-raw) 0.185 calc(c * 0.12) h); --mt-border: oklch(from var(--mt-accent-raw) 0.30 calc(c * 0.18) h); --mt-accent-ink: oklch(from var(--mt-accent-raw) 0.145 calc(c * 0.14) h); } } }