/* GUI — design tokens, κατεύθυνση «Αιγαίο» (GUI_SPEC §1, απόφαση 31/08 ε). * * ΤΟ ΜΟΝΟ ΑΡΧΕΙΟ ΜΕ ΧΡΩΜΑΤΑ ΚΑΙ ΜΕΓΕΘΗ. Κανένα component δεν γράφει τιμή μέσα του: αν λείπει token, λείπει * από εδώ — δεν το εφευρίσκει το component (ίδια αρχή με το «τίποτα hardcoded» του server· το test * `test_the_gui_has_no_colours_outside_tokens` το επιβάλλει). * * ΘΕΜΑΤΑ: βάση = σκούρο (η κονσόλα του γραφείου, το mockup «Αιγαίο — Στόλος»). Ανοιχτό όταν το λέει το * σύστημα (αυλή/ήλιος, το mockup «Αιγαίο — Όχημα») ή όταν το διαλέξει ο χρήστης από το κουμπί — η επιλογή * γράφεται στο `data-theme` του από το `theme.js` ΠΡΙΝ την πρώτη ζωγραφιά. */ /* IBM Plex Sans, self-hosted (GUI_SPEC §1: Google Fonts ΔΕΝ επιτρέπεται — CSP self). Ένα αρχείο ανά υποσύνολο, variable 400-700: 65 kB συνολικά αντί για 8 στατικά βάρη (260 kB). Άδεια: SIL OFL 1.1 — το κείμενο δίπλα στα αρχεία (`fonts/LICENSE-IBM-Plex.txt`). */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/ibm-plex-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/ibm-plex-sans-greek.woff2') format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } :root { /* -------------------------------------------------- χρώμα: σκούρο (γραφείο/TV) */ --bg: #0e1520; --bg2: #0a1018; --card: #141e2b; --card2: #182534; --line: #233246; --ink: #e8eef4; --muted: #8da0b5; --accent: #3aa6e8; /* ταυτότητα και πλοήγηση — ΠΟΤΕ κατάσταση */ --accent-dim: #1f6fa8; --accent-soft: rgba(58, 166, 232, .16); --on-accent: #ffffff; --ok: #35c08f; --warn: #d9a13c; --crit: #e35d5d; --ok-soft: rgba(53, 192, 143, .14); --warn-soft: rgba(217, 161, 60, .16); --crit-soft: rgba(227, 93, 93, .14); --crit-line: rgba(227, 93, 93, .4); --crit-glow: rgba(227, 93, 93, .12); --on-crit: #ffffff; --on-warn: #0e1520; /* το κεχριμπαρένιο είναι φωτεινό και στα δύο θέματα */ --neutral-soft: rgba(255, 255, 255, .06); --hover: rgba(255, 255, 255, .05); --overlay: rgba(4, 8, 14, .55); --skeleton: rgba(255, 255, 255, .05); --shadow: 0 8px 20px rgba(0, 0, 0, .25); --shadow-strong: 0 10px 24px rgba(0, 0, 0, .35); /* -------------------------------------------------- τυπογραφία */ --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --fs-xs: 12px; --fs-s: 13.5px; --fs-m: 15px; --fs-l: 17px; --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 34px; --lh-text: 1.45; --lh-num: 1.1; --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; /* -------------------------------------------------- σχήμα και απόσταση */ --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 10px; --sp-5: 14px; --sp-6: 18px; --sp-7: 22px; --sp-8: 28px; --r-s: 9px; --r: 10px; --r-pill: 99px; --ctl: 34px; /* κουμπί εικονιδίου / avatar του top bar */ --bottombar-h: 58px; --page-max: 1440px; /* -------------------------------------------------- κίνηση (§1: ό,τι είναι ζωντανό αναπνέει) */ --t: 150ms; --ease: ease-out; --pulse-dot: 2.4s; --pulse-marker: 3s; --flash: 300ms; color-scheme: dark; } /* Ανοιχτό: όταν το ζητά το σύστημα και ο χρήστης δεν έχει διαλέξει ρητά σκούρο. */ @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) { --bg: #f3f6f8; --bg2: #e7edf2; --card: #ffffff; --card2: #eef3f7; --line: #dee7ee; --ink: #16222d; --muted: #5f7183; --accent: #0f6cb4; --accent-dim: #0f6cb4; --accent-soft: #e3eff8; --ok-soft: rgba(27, 138, 102, .12); --warn-soft: rgba(160, 110, 20, .14); --crit-soft: rgba(190, 60, 60, .10); --crit-line: rgba(227, 93, 93, .5); --crit-glow: rgba(227, 93, 93, .10); --on-warn: #16222d; --neutral-soft: #eef3f7; --hover: rgba(15, 108, 180, .07); --overlay: rgba(22, 34, 45, .35); --skeleton: rgba(22, 34, 45, .06); --shadow: 0 1px 3px rgba(20, 40, 60, .08); --shadow-strong: 0 6px 18px rgba(20, 40, 60, .14); color-scheme: light; } } /* Η ρητή επιλογή του χρήστη κερδίζει και στις δύο κατευθύνσεις (GUI_SPEC §2: θυμάται ανά συσκευή). */ :root[data-theme='light'] { --bg: #f3f6f8; --bg2: #e7edf2; --card: #ffffff; --card2: #eef3f7; --line: #dee7ee; --ink: #16222d; --muted: #5f7183; --accent: #0f6cb4; --accent-dim: #0f6cb4; --accent-soft: #e3eff8; --ok-soft: rgba(27, 138, 102, .12); --warn-soft: rgba(160, 110, 20, .14); --crit-soft: rgba(190, 60, 60, .10); --crit-line: rgba(227, 93, 93, .5); --crit-glow: rgba(227, 93, 93, .10); --on-warn: #16222d; --neutral-soft: #eef3f7; --hover: rgba(15, 108, 180, .07); --overlay: rgba(22, 34, 45, .35); --skeleton: rgba(22, 34, 45, .06); --shadow: 0 1px 3px rgba(20, 40, 60, .08); --shadow-strong: 0 6px 18px rgba(20, 40, 60, .14); color-scheme: light; }