/* SIMU design tokens Pagrindas: Canva „SIMU Brand Color Guide" v1.0. Papildyta: neutralų skalė, būsenos, sąveikos būsenos. Proporcijos: 60% Navy/White · 25% Soft Gray · 10% Electric Blue · 5% Orange */ :root { /* --- Brandas (Canva guide, nekeičiama) --- */ --simu-navy: #0B1220; /* pagrindas, tamsios juostos */ --simu-graphite: #111827; /* tekstas ant šviesaus */ --simu-blue: #2563EB; /* akcentas */ --simu-orange: #F97316; /* TIK pagrindinis CTA */ --simu-orange-light: #FFEDD5;/* subtilus akcentas */ --simu-gray: #F8FAFC; /* šviesus fonas */ --simu-white: #FFFFFF; /* --- Sąveikos būsenos --- */ --simu-blue-hover: #1D4ED8; --simu-blue-soft: #EFF4FE; /* badge'ai, pažymėti blokai */ --simu-orange-hover: #EA580C; --simu-orange-deep: #C2410C; /* kai baltas tekstas būtinas */ /* Tekstas ant oranžinės VISADA Navy — baltas duoda 2,8:1 ir nepraeina */ --simu-on-orange: var(--simu-navy); /* --- Neutralų skalė --- */ --simu-n-50: #F8FAFC; /* = Soft Gray */ --simu-n-100: #F1F5F9; /* antrinis fonas, hover eilutėse */ --simu-n-200: #E2E8F0; /* rėmeliai, skirtukai */ --simu-n-400: #94A3B8; /* blankus tekstas, placeholderiai */ --simu-n-500: #64748B; /* antrinis tekstas */ --simu-n-700: #334155; /* tekstas ant šviesiai pilko */ --simu-n-900: #111827; /* = Graphite */ /* --- Būsenos --- Naudojamos TIK formose, pranešimuose ir toast'uose. Niekada kaip puslapio dekoras ir niekada kaip užpildytas mygtukas. */ --simu-error: #DC2626; --simu-error-soft: #FEF2F2; --simu-success: #047857; --simu-success-soft: #ECFDF5; --simu-warning: #B45309; --simu-warning-soft: #FEF3C7; --simu-info: var(--simu-blue); --simu-info-soft: var(--simu-blue-soft); /* --- Neaktyvu ir fokusas --- */ --simu-disabled-bg: var(--simu-n-200); --simu-disabled-text: var(--simu-n-400); --simu-focus: var(--simu-blue); --simu-focus-ring: 0 0 0 3px var(--simu-blue-soft); /* --- Linijos --- */ --simu-line: rgba(17, 24, 39, 0.12); --simu-line-strong: rgba(17, 24, 39, 0.22); --simu-line-dark: rgba(255, 255, 255, 0.14); /* --- Semantiniai vaidmenys --- Pagrindinis puslapis tamsus, vidiniai šviesūs. Kode naudoti šiuos, ne brandines spalvas tiesiogiai. */ /* Šviesus režimas — vidiniai puslapiai, numatytasis */ --bg: var(--simu-gray); --surface: var(--simu-white); --text: var(--simu-graphite); --text-muted: var(--simu-n-500); --text-faint: var(--simu-n-400); --line-ui: var(--simu-line); --accent: var(--simu-blue); --cta: var(--simu-orange); /* Tamsus režimas — pagrindinis puslapis, poraštė, tamsios juostos. Įjungiamas klase .is-dark ant sekcijos ar . */ --bg-dark: var(--simu-navy); --surface-dark: #0F1729; --text-on-dark: var(--simu-white); --text-muted-on-dark: var(--simu-n-400); --eyebrow-on-dark: var(--simu-orange-light); --line-on-dark: rgba(255, 255, 255, 0.14); --grid-on-dark: rgba(255, 255, 255, 0.07); --flood: var(--simu-blue); /* Interaktyvių elementų kraštinės (mygtukai, laukeliai) privalo duoti 3:1 pagal WCAG 2.1 SC 1.4.11. Dekoratyvios linijos lieka 0.14 ir 0.07 — joms kontrasto reikalavimas negalioja. */ --line-interactive: rgba(255, 255, 255, 0.34); /* Užlietoje Electric Blue sekcijoje 7% baltumo linijos nebematomos. */ --grid-on-flood: rgba(255, 255, 255, 0.16); /* --- Tarpai (8 px skalė) --- */ --space-1: 8px; /* Pusiniai žingsniai. Reikalingi mygtukų vidui ir smulkiems tarpams — be jų kode atsirasdavo akimi parinktos 9, 13 ir 15 px reikšmės. */ --space-05: 4px; --space-075: 6px; --space-15: 12px; /* --- Tinklelio tarpas --- Atstumas nuo ašies linijos iki teksto. Vienintelė vieta, kur jį keisti: pakeitus čia, pasikeičia visur — ir prie kraštinių linijų, ir stulpelių viduje. Nulis reikštų flush lygiavimą, kai tekstas remiasi į liniją. */ --grid-gutter: 12px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-6: 48px; --space-8: 64px; --space-12: 96px; /* --- Formos --- Aštrūs kampai yra SIMU geometrija. Nulis visur, be išimčių — apvalinimai grąžintų numatytąją šių dienų išvaizdą. */ --radius: 0; --radius-lg: 0; /* --- Tipografija --- */ --font-display: "Manrope", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --step--1: 0.875rem; --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.5rem; --step-3: 1.875rem; --step-4: 2.5rem; --step-5: 3.5rem; --step-6: 5rem; /* pagrindinio puslapio antraštė */ --step-7: 6.5rem; /* kai antraštė yra vaizdas, o ne užrašas */ /* Antraščių sandarumas didėja kartu su dydžiu */ --tracking-display: -0.04em; --leading-display: 0.98; /* --- Judesys --- */ --ease: 180ms ease; } /* --- Tamsi sekcija --- Uždėk .is-dark ant (pagrindinis puslapis) arba ant sekcijos. */ .is-dark { background: var(--bg-dark); color: var(--text-on-dark); --bg: var(--bg-dark); --surface: var(--surface-dark); --text: var(--text-on-dark); --text-muted: var(--text-muted-on-dark); --text-faint: var(--text-muted-on-dark); --line-ui: var(--line-on-dark); }