/* 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);
/* Η ΣΚΙΑ ΠΟΥ ΕΧΕΙ ΤΟ ΧΡΩΜΑ ΤΟΥ ΚΟΥΜΠΙΟΥ (06/09) — αδελφό token του `--crit-glow`, ίδιος λόγος
ύπαρξης: πάνω σε ΣΚΟΥΡΟ φόντο μια μαύρη σκιά (`--shadow`) κάτω από γεμάτο κουμπί δεν φαίνεται
καθόλου — το κουμπί κάθεται επίπεδο πάνω στη σελίδα. Με χρωματιστή σκιά «ανάβει» και στα δύο
θέματα. Έντονη στο σκούρο, ψίθυρος στο ανοιχτό: εκεί όλες οι σκιές του συστήματος είναι ψίθυρος. */
--accent-glow: rgba(58, 166, 232, .30);
--on-accent: #ffffff;
--ok: #35c08f;
/* Το πράσινο του WhatsApp: η μοναδική επώνυμη απόχρωση του GUI — το κουμπί ΕΙΝΑΙ το σήμα, ίδιο σε
φως και σκοτάδι (γι' αυτό δηλώνεται μόνο εδώ και κληρονομείται). */
--wa: #25d366;
--wa-ink: #fff;
--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);
/* Το αμάξωμα του σκίτσου: ΔΙΚΟ ΤΟΥ token και όχι --ink — η μάζα πρέπει να
ξεχωρίζει από το φόντο σε ΚΑΘΕ θέμα, αλλιώς σε ένα από τα δύο εξαφανίζεται. */
--sk-body: #c5d3e0;
--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;
/* Η ΣΤΗΛΗ ΠΛΟΗΓΗΣΗΣ (Μ1, 04/09) — ΔΥΟ ΠΛΑΤΗ ΚΑΙ ΕΝΑ ΥΨΟΣ, ΓΡΑΜΜΕΝΑ ΜΙΑ ΦΟΡΑ.
`--side-w`: εικονίδιο + η μακρύτερη ετικέτα («Voorbereiding», «Ιδιοκτήτες») χωρίς κόψιμο.
`--side-w-min`: συμπτυγμένη — στόχος αφής 44 px κεντραρισμένος, τίποτα άλλο.
`--topbar-h`: ΥΠΟΛΟΓΙΣΜΟΣ και όχι μέτρηση με το μάτι (sp-5 πάνω + κουμπί + sp-5 κάτω + η γραμμή),
ώστε η sticky στήλη να κολλάει ΑΚΡΙΒΩΣ κάτω από τη μπάρα ακόμα κι αν αλλάξει το `--ctl`. */
--side-w: 232px;
--side-w-min: 64px;
--topbar-h: calc(var(--sp-5) * 2 + var(--ctl) + 1px);
--page-max: 1440px;
/* -------------------------------------------------- κίνηση (§1: ό,τι είναι ζωντανό αναπνέει) */
--t: 150ms;
--ease: ease-out;
--pulse-dot: 2.4s;
--pulse-marker: 3s;
--flash: 300ms;
/* -------------------------------------------------- η εφαρμογή του πελάτη: Η ΒΑΣΗ, ΧΩΡΙΣ ΘΕΜΑ (ιγ)
Τα `--rn-*` γεννήθηκαν για τα τρία θέματα (τέλος του αρχείου) και ΔΕΝ τα χρησιμοποιεί το γραφείο.
Οι τιμές εδώ είναι ΑΚΡΙΒΩΣ η σελίδα του ενοικιαστή όπως ήταν ως τις 06/09: κουμπιά με χρωματιστή
λάμψη, φυσαλίδα πελάτη στο χρώμα ταυτότητας, καμία κλίση, καμία γωνία. Έτσι ένα κέλυφος από την
cache του service worker —που δεν ξέρει καν ότι υπάρχουν θέματα— ζωγραφίζει τη χθεσινή οθόνη και
ποτέ μια άχρωμη. Ίδιος κανόνας με το `theme_of` του server: σκουπίδι ⇒ κάτι σωστό, ποτέ τίποτα. */
--rn-mine: var(--accent);
--rn-on-mine: var(--on-accent);
--rn-mine-soft: var(--accent-soft);
--rn-them-line: transparent;
--rn-lift: 0 2px 10px var(--accent-glow);
--rn-lift-tap: 0 1px 4px var(--accent-glow);
--rn-lift-soft: var(--shadow);
--rn-drop: none;
--rn-sheen: none;
--rn-tilt: 0deg;
--rn-r: .8rem;
--rn-r-card: 1rem;
--rn-bw: 1px;
--rn-ls: .09em;
--rn-dot1: var(--accent-soft); --rn-dot1-ink: var(--accent);
--rn-dot2: var(--accent-soft); --rn-dot2-ink: var(--accent);
--rn-dot3: var(--accent-soft); --rn-dot3-ink: var(--accent);
--rn-dot4: var(--accent-soft); --rn-dot4-ink: var(--accent);
/* 🃏 Η ΜΟΡΦΗ ΤΟΥ Γ2 (06/09 γ) — ΟΙ ΤΙΜΕΣ ΤΗΣ. Το merge 686f32f είχε πάρει από το εγκεκριμένο artboard
ΜΟΝΟ την παλέτα· η οθόνη της συνομιλίας δεν έμοιαζε με το Γ2 γιατί λείπανε τα ΣΧΗΜΑΤΑ (τρία
αυτοκόλλητα αντί για ράγα, δρόμος, avatar, γραμματόσημο, pill βοηθού). Τα σχήματα μπήκαν στο
`renter.css`· εδώ ζουν τα χρώματα και οι δύο γωνίες που τους χρειάζονται.
ΟΙ ΒΑΣΙΚΕΣ ΤΙΜΕΣ ΕΙΝΑΙ ΟΥΔΕΤΕΡΕΣ ΕΠΙΤΗΔΕΣ: χωρίς θέμα (και στο Ελεγκάν) κανένας από τους νέους
κανόνες δεν ζωγραφίζεται — αλλά ένα token που λείπει είναι η μέρα που κάποιος θα το ζητήσει και θα
πάρει διάφανο. Ίδια λογική με τους τέσσερις τόνους των Ερωτήσεων παρακάτω. */
--rn-tab1: var(--accent); --rn-tab3: var(--accent);
--rn-road: var(--line);
--rn-av: var(--bg2);
--rn-av-tilt: 0deg;
--rn-stamp-line: var(--line);
--rn-stamp-ink: var(--muted);
--rn-ai-bg: transparent; --rn-ai-ink: currentColor;
--rn-soft2: var(--card2); --rn-soft2-ink: var(--ink);
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;
--accent-glow: rgba(15, 108, 180, .18);
--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);
--sk-body: #33465a;
--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;
--accent-glow: rgba(15, 108, 180, .18);
--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);
--sk-body: #33465a;
--shadow: 0 1px 3px rgba(20, 40, 60, .08);
--shadow-strong: 0 6px 18px rgba(20, 40, 60, .14);
color-scheme: light;
}
/* ================================================================ ΤΑ ΧΡΩΜΑΤΑ ΤΩΝ ΣΗΜΑΙΩΝ (02/09)
*
* 🚨 ΕΞΑΙΡΕΣΗ ΣΤΟΝ ΚΑΝΟΝΑ ΤΩΝ TOKENS, ΚΑΙ ΓΙ' ΑΥΤΟ ΖΟΥΝ ΕΔΩ: μια σημαία ΔΕΝ αλλάζει με το θέμα.
* Το μπλε της ελληνικής είναι το ίδιο μπλε σε σκούρο και σε ανοιχτό — αν το έπαιρνε από `--accent` θα
* ήταν διακόσμηση, όχι σημαία. Μπαίνουν στο `tokens.css` επειδή εκεί ζουν ΟΛΑ τα χρώματα (ένα αρχείο,
* GUI_SPEC §1) — όχι επειδή είναι tokens θέματος: γι' αυτό ορίζονται ΜΙΑ φορά, έξω από τα δύο θέματα,
* και δεν έχουν παραλλαγή στο `[data-theme]`.
*
* ΓΙΑΤΙ ΕΦΥΓΑΝ ΤΑ EMOJI (Vassilis 02/09): σε Windows + Chrome τα 🇬🇷🇩🇪 ΔΕΝ αποδίδονται — ο browser
* γράφει τα δύο regional letters, δηλαδή «GR» «DE» με γράμματα, και ο επιλογέας γίνεται λίστα από
* κωδικούς χωρών. Η γραμματοσειρά δεν σώζεται με fallback: τα Windows απλώς δεν έχουν σημαίες.
*/
:root {
--flag-white: #ffffff;
--flag-gr-blue: #0d5eaf;
--flag-uk-navy: #012169;
--flag-uk-red: #c8102e;
--flag-de-black: #101010; /* όχι απόλυτο μαύρο: σε σκούρο θέμα η σημαία θα «έλειπε» από πάνω */
--flag-de-red: #dd0000;
--flag-de-gold: #ffce00;
--flag-nl-red: #ae1c28;
--flag-nl-blue: #21468b;
--flag-fr-blue: #002395;
--flag-fr-red: #ed2939;
--flag-es-red: #aa151b;
--flag-es-gold: #f1bf00;
}
/* ════════════════════════════════════════════════════════════════════════════════════════════════
* 🎨 ΤΑ ΤΕΣΣΕΡΑ ΘΕΜΑΤΑ ΤΗΣ ΕΦΑΡΜΟΓΗΣ ΤΟΥ ΠΕΛΑΤΗ (απόφαση ιγ, 06/09 β · «Νυχτερινό» 06/09 νύχτα)
*
* «2-3 έτοιμα θέματα ως ΣΕΤ TOKENS (όχι δεύτερη υλοποίηση οθονών), επιλογή στις Ρυθμίσεις → Εφαρμογή
* πελάτη»: «Καρτ-ποστάλ» (προεπιλογή), «Ανοιχτός Δρόμος», «Ελεγκάν», «Νυχτερινό».
*
* ΓΙΑΤΙ ΕΔΩ ΚΑΙ ΟΧΙ ΣΤΟ `renter.css`: εκεί δεν υπάρχει ούτε ένα hex, και δεν πρέπει να υπάρξει ποτέ
* (`test_the_gui_has_no_colours_outside_tokens`, GUI_SPEC §1). Το `renter.css` κρατά τα ΣΧΗΜΑΤΑ κάθε
* θέματος (εγκοπές, ζιγκ-ζαγκ, σφραγίδα, hairlines)· εδώ ζουν οι ΤΙΜΕΣ. Δύο αρχεία, δύο δουλειές.
*
* ΔΥΟ ΕΠΙΛΟΓΕΙΣ ΑΝΑ ΘΕΜΑ, ΚΑΙ ΕΙΝΑΙ ΤΟ ΚΛΕΙΔΙ ΟΛΟΥ ΤΟΥ ΜΠΛΟΚ:
* • `:root[data-rn-theme='…']` — Η ΣΕΛΙΔΑ ΤΟΥ ΠΕΛΑΤΗ. Χρειάζεται ειδικότητα (0,2,0) για να κερδίσει
* το `:root:not([data-theme='dark'])` του ανοιχτού θέματος από πάνω· γι' αυτό το μπλοκ είναι
* ΤΕΛΕΥΤΑΙΟ στο αρχείο (ίση ειδικότητα ⇒ αποφασίζει η σειρά, και η σειρά είναι εδώ).
* • `[data-rn-theme='…']` σκέτο — ΟΠΟΙΟΔΗΠΟΤΕ κουτί, δηλαδή Η ΜΙΚΡΟΓΡΑΦΙΑ ΤΟΥ ΕΠΙΛΟΓΕΑ στις Ρυθμίσεις
* (`gui/settings.js`). Έτσι η προεπισκόπηση δεν ξαναγράφει ΟΥΤΕ ΕΝΑ χρώμα: φοράει τα ίδια ακριβώς
* tokens που θα δει ο πελάτης. Μία αλήθεια — αν αύριο αλλάξει το πράσινο, αλλάζει και η μικρογραφία.
*
* 🌙 ΓΙΑΤΙ ΔΕΝ ΥΠΑΡΧΕΙ ΝΥΧΤΕΡΙΝΗ ΠΑΡΑΛΛΑΓΗ, ΚΑΙ ΕΙΝΑΙ ΡΗΤΗ ΕΠΙΛΟΓΗ: ως την 06/09 η σελίδα του πελάτη
* ακολουθούσε το `prefers-color-scheme` (σκούρο τη νύχτα στο καμπινέ). Με θέμα, ΤΟ ΘΕΜΑ ΚΕΡΔΙΖΕΙ ΚΑΙ
* ΤΙΣ ΔΥΟ ΩΡΕΣ: ένα «Καρτ-ποστάλ» που γίνεται κάρβουνο στις εννιά το βράδυ δεν είναι πια Καρτ-ποστάλ,
* και τα τρία πρώτα θέματα εγκρίθηκαν ως ΑΝΟΙΧΤΑ — ο καμβάς δεν έδειξε ποτέ σκούρη εκδοχή τους. Το
* `color-scheme: light` είναι μέρος της ίδιας απόφασης: χωρίς αυτό ο επιλογέας ώρας (``) και το πεδίο αναζήτησης ζωγραφίζονται ΣΚΟΥΡΑ από το λειτουργικό πάνω στο κρεμ χαρτί.
* Νυχτερινές παραλλαγές ΤΟΥΣ = ΝΕΑ ΑΠΟΦΑΣΗ (τρεις ακόμα παλέτες που δεν έχει δει κανείς) — δεν
* εφευρέθηκαν. ⚠ ΤΟ «ΝΥΧΤΕΡΙΝΟ» ΔΕΝ ΕΙΝΑΙ ΠΑΡΑΒΙΑΣΗ ΤΟΥ ΚΑΝΟΝΑ ΑΛΛΑ Η ΕΠΙΒΕΒΑΙΩΣΗ ΤΟΥ: είναι ΤΕΤΑΡΤΟ
* θέμα με δικά του εγκεκριμένα artboards, που είναι σκούρο ΚΑΙ ΤΙΣ ΔΥΟ ΩΡΕΣ — όχι η νυχτερινή όψη
* κάποιου άλλου. Κανένα από τα τέσσερα δεν αλλάζει παλέτα με την ώρα της ημέρας.
*
* ΤΑ `--rn-*` ΕΙΝΑΙ ΤΑ TOKENS ΠΟΥ ΓΕΝΝΗΘΗΚΑΝ ΓΙΑ ΤΑ ΘΕΜΑΤΑ και δεν υπάρχουν στο γραφείο: η φωνή του
* πελάτη (`--rn-mine`), το σήκωμα του sticker (`--rn-lift`), η κλίση (`--rn-sheen`), η γωνία
* (`--rn-tilt`), η ακτίνα (`--rn-r`), το πάχος της γραμμής (`--rn-bw`), το αραίωμα (`--rn-ls`) και οι
* τέσσερις τόνοι των Ερωτήσεων. Η ΒΑΣΗ ΤΟΥΣ (χωρίς κανένα θέμα) ζει στο `:root` πιο πάνω και είναι
* ΑΚΡΙΒΩΣ η σελίδα όπως ήταν ως τις 06/09 — ένα κέλυφος από cache που δεν ξέρει από θέματα δεν
* ζωγραφίζει ποτέ άχρωμη οθόνη.
* ════════════════════════════════════════════════════════════════════════════════════════════════ */
/* ---------------------------------------------------------------- 1 · ΚΑΡΤ-ΠΟΣΤΑΛ (Γ2, προεπιλογή)
Πράσινο ταξιδιού + κοραλί σε κρεμ-πράσινο φόντο. Η φυσαλίδα του γραφείου είναι ΚΡΕΜ ΧΑΡΤΙ
(`--card2`) και όχι λευκή: είναι η καρτ-ποστάλ που κρατά ο πελάτης στο χέρι. Το κοραλί δεν είναι
δεύτερο accent — είναι Η ΔΙΚΗ ΤΟΥ φωνή (`--rn-mine`), ώστε οι δύο πλευρές της κουβέντας να
ξεχωρίζουν χωρίς λεζάντα. */
[data-rn-theme='postcard'],
:root[data-rn-theme='postcard'] {
--bg: #f2f7f3;
--bg2: #e4efe8;
--card: #ffffff;
--card2: #fffdf6;
--line: #d7e8dc;
--ink: #22382b;
--muted: #5c7465;
--accent: #2f8f5b;
--accent-dim: #1d5c3a;
--accent-soft: #e2f4e9;
--accent-glow: rgba(47, 143, 91, .28);
--on-accent: #ffffff;
--ok-soft: rgba(47, 143, 91, .14);
--warn: #a8790a;
--crit: #d0412a;
--crit-soft: rgba(208, 65, 42, .10);
--hover: rgba(47, 143, 91, .08);
--overlay: rgba(34, 56, 43, .38);
--shadow: 0 3px 8px rgba(34, 56, 43, .10);
--shadow-strong: 0 8px 22px rgba(34, 56, 43, .16);
--rn-mine: #e8603c;
--rn-on-mine: #ffffff;
--rn-mine-soft: #fdeee8;
--rn-them-line: #e7dcc3;
--rn-lift: 0 4px 0 #1d5c3a;
--rn-lift-tap: 0 1px 0 #1d5c3a;
--rn-lift-soft: 0 3px 0 rgba(34, 56, 43, .07);
--rn-drop: drop-shadow(0 6px 14px rgba(34, 56, 43, .14));
--rn-sheen: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .06));
--rn-tilt: -1.4deg;
--rn-r: 14px;
--rn-r-card: 18px;
--rn-bw: 2px;
--rn-ls: .09em;
--rn-dot1: #e2f4e9; --rn-dot1-ink: #2f8f5b;
--rn-dot2: #fdeee8; --rn-dot2-ink: #e8603c;
--rn-dot3: #e3f1fc; --rn-dot3-ink: #1d7fd6;
--rn-dot4: #faf0d4; --rn-dot4-ink: #a8790a;
/* 🃏 Η ΜΟΡΦΗ ΤΟΥ Γ2, ΜΕ ΤΑ ΧΡΩΜΑΤΑ ΤΟΥ ΚΑΜΒΑ (γρ. 17, 28, 33-34, 44, 49-51 του `Gamma2.dc.html`).
⚠ ΤΟ `--rn-tab1` ΔΕΝ ΕΙΝΑΙ ΤΟ `--rn-mine`, ΑΝ ΚΑΙ ΕΔΩ ΕΧΟΥΝ ΤΗΝ ΙΔΙΑ ΤΙΜΗ: στο Γ3 η φωνή του
πελάτη είναι ΜΠΛΕ ενώ η καρτέλα «Κράτηση» μένει κοραλί — δύο πράγματα που τυχαίνει να συμπίπτουν
σε ένα θέμα δεν είναι το ίδιο token. */
--rn-tab1: #e8603c; --rn-tab3: #f0a800;
--rn-road: #bcd8c5;
--rn-av: #eafff2;
--rn-av-tilt: -4deg;
--rn-stamp-line: #cbb98f;
--rn-stamp-ink: #f5c445;
--rn-ai-bg: #f5ecd6; --rn-ai-ink: #7a621f;
--rn-soft2: #dcece1; --rn-soft2-ink: #5c7465;
color-scheme: light;
}
/* ---------------------------------------------------------------- 2 · ΑΝΟΙΧΤΟΣ ΔΡΟΜΟΣ (Γ3)
ΙΔΙΑ ΔΟΜΗ, ΑΛΛΗ ΠΑΛΕΤΑ — και αυτό είναι όλη η απόδειξη ότι τα θέματα είναι tokens: ανάμεσα σε αυτό
και το Καρτ-ποστάλ δεν αλλάζει ΟΥΤΕ ΕΝΑΣ κανόνας σχήματος. Εδώ η φωνή του πελάτη είναι ΤΟ ΙΔΙΟ μπλε
με το κουμπί (όπως στον καμβά): μία οικογένεια, δύο εντάσεις.
⚠ ΤΟ ΜΕΛΑΝΙ ΕΙΝΑΙ ΜΠΛΕ-ΚΑΡΒΟΥΝΟ ΚΑΙ ΟΧΙ ΤΟ ΠΡΑΣΙΝΟ-ΜΑΥΡΟ ΤΟΥ ΚΑΜΒΑ: εκεί το `#22382b` ήρθε αυτούσιο
από το Γ2 (ο γεννήτορας ξαναχρησιμοποίησε τη σελίδα) — πράσινο μελάνι σε μπλε θέμα είναι αντιγραφή,
όχι σχεδίαση. */
[data-rn-theme='open_road'],
:root[data-rn-theme='open_road'] {
--bg: #f3f7fa;
--bg2: #e2ebf3;
--card: #ffffff;
--card2: #f4f9fd;
--line: #d3e2ee;
--ink: #1b2f3d;
--muted: #5c6b7a;
--accent: #0f6cb4;
--accent-dim: #0a4a80;
--accent-soft: #e3eff8;
--accent-glow: rgba(15, 108, 180, .26);
--on-accent: #ffffff;
--ok-soft: rgba(27, 138, 102, .13);
--warn: #a8790a;
--crit: #d0412a;
--crit-soft: rgba(208, 65, 42, .10);
--hover: rgba(15, 108, 180, .08);
--overlay: rgba(27, 47, 61, .38);
--shadow: 0 3px 8px rgba(27, 47, 61, .10);
--shadow-strong: 0 8px 22px rgba(27, 47, 61, .16);
--rn-mine: #0f6cb4;
--rn-on-mine: #ffffff;
--rn-mine-soft: #e3eff8;
--rn-them-line: #d3e2ee;
--rn-lift: 0 4px 0 #0a4a80;
--rn-lift-tap: 0 1px 0 #0a4a80;
--rn-lift-soft: 0 3px 0 rgba(27, 47, 61, .07);
--rn-drop: drop-shadow(0 6px 14px rgba(27, 47, 61, .14));
--rn-sheen: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .06));
--rn-tilt: -1.4deg;
--rn-r: 14px;
--rn-r-card: 18px;
--rn-bw: 2px;
--rn-ls: .09em;
--rn-dot1: #e3eff8; --rn-dot1-ink: #0f6cb4;
--rn-dot2: #fdeee8; --rn-dot2-ink: #e8603c;
--rn-dot3: #e2f4e9; --rn-dot3-ink: #2f8f5b;
--rn-dot4: #faf0d4; --rn-dot4-ink: #a8790a;
/* 🃏 ΤΑ ΙΔΙΑ ΣΧΗΜΑΤΑ ΜΕ ΤΟ ΚΑΡΤ-ΠΟΣΤΑΛ, ΑΛΛΗ ΠΑΛΕΤΑ (γρ. 17, 28, 33, 44, 49-51 του `Gamma3.dc.html`).
ΟΙ ΔΥΟ ΠΛΑΪΝΕΣ ΚΑΡΤΕΛΕΣ ΚΡΑΤΟΥΝ ΚΟΡΑΛΙ ΚΑΙ ΚΕΧΡΙΜΠΑΡΙ, όπως ακριβώς ο καμβάς: το μπλε είναι Η
ΦΩΝΗ ΤΟΥ ΓΡΑΦΕΙΟΥ (κουμπί, ενεργή καρτέλα, camper) — αν το φορούσαν και οι τρεις καρτέλες, τα
τρία αυτοκόλλητα θα ήταν πάλι ένα πράγμα σε τρία κομμάτια.
ΤΟ ΓΡΑΜΜΑΤΟΣΗΜΟ ΔΕΝ ΖΩΓΡΑΦΙΖΕΤΑΙ ΕΔΩ (το Γ3 δεν έχει) — τα δύο tokens του ορίζονται μόνο για να
μην είναι διάφανα την ημέρα που κάποιος τα ζητήσει· το κίτρινο είναι του φεγγαριού του Γ3. */
--rn-tab1: #e8603c; --rn-tab3: #f0a800;
--rn-road: #bcd3e8;
--rn-av: #e3eff8;
--rn-av-tilt: 0deg;
--rn-stamp-line: #cbd8e4;
--rn-stamp-ink: #f4c95d;
--rn-ai-bg: #e3eff8; --rn-ai-ink: #0f6cb4;
--rn-soft2: #e2ebf3; --rn-soft2-ink: #5c6b7a;
color-scheme: light;
}
/* ---------------------------------------------------------------- 3 · ΕΛΕΓΚΑΝ (Φ)
Ιβουάρ, κάρβουνο, χρυσό. ΚΑΜΙΑ ΚΛΙΣΗ, ΚΑΜΙΑ ΣΚΛΗΡΗ ΣΚΙΑ, ΚΑΜΙΑ ΓΩΝΙΑ ΠΑΝΩ ΑΠΟ 4 px: τα τέσσερα
`none` και το `--rn-r: 4px` ΕΙΝΑΙ η σχεδίαση, δεν είναι παραλείψεις.
🔠 Η ΓΡΑΜΜΑΤΟΣΕΙΡΑ ΕΙΝΑΙ SYSTEM STACK ΚΑΙ ΟΧΙ Playfair/Lora ΤΟΥ ΚΑΜΒΑ: ο νόμος του σπιτιού είναι CSP
`self` (GUI_SPEC §1) — καμία Google Font, ποτέ. Το self-hosting δύο ακόμα οικογενειών (με ελληνικό
υποσύνολο, άδεια, ~60 kB πάνω από 3G σε βουνό) είναι ΝΕΑ ΑΠΟΦΑΣΗ, όχι παρενέργεια ενός θέματος.
Georgia πρώτη (Windows/macOS/iOS, με ελληνικά), 'Times New Roman' δεύτερη, και ΓΕΝΙΚΟ `serif`
τελευταίο — εκεί προσγειώνεται το Android (Noto Serif, πλήρη ελληνικά). Μηδέν bytes κατεβάσματος.
⚠ ΤΟ `--card2` ΕΙΝΑΙ ΠΙΟ ΑΝΟΙΧΤΟ ΑΠΟ ΤΟ `--card`, ΕΠΙΤΗΔΕΣ: εδώ η «ταινία» της κάρτας δεν είναι
βαμμένη λωρίδα αλλά καθαρό χαρτί με μια τρίχα από κάτω — το βάθος το δίνει η γραμμή, όχι το γέμισμα. */
[data-rn-theme='elegant'],
:root[data-rn-theme='elegant'] {
--bg: #f6f4ef;
--bg2: #efece4;
--card: #fffdf8;
--card2: #ffffff;
--line: #e4ddcd;
--ink: #26241f;
--muted: #8d8674;
--accent: #b08d4a;
--accent-dim: #8f7038;
--accent-soft: #f3ecdd;
--accent-glow: rgba(176, 141, 74, .20);
--on-accent: #fffdf8;
--ok-soft: rgba(176, 141, 74, .12);
--warn: #8f7038;
--crit: #9c3524;
--crit-soft: rgba(156, 53, 36, .09);
--hover: rgba(176, 141, 74, .09);
--overlay: rgba(38, 36, 31, .40);
--shadow: 0 1px 4px rgba(38, 36, 31, .07);
--shadow-strong: 0 8px 22px rgba(38, 36, 31, .09);
--font: Georgia, 'Times New Roman', serif;
--rn-mine: #2b2b28;
--rn-on-mine: #f6f4ef;
--rn-mine-soft: #eceae4;
--rn-them-line: #e4ddcd;
--rn-lift: none;
--rn-lift-tap: none;
--rn-lift-soft: none;
--rn-drop: none;
--rn-sheen: none;
--rn-tilt: 0deg;
--rn-r: 4px;
--rn-r-card: 4px;
--rn-bw: 1px;
--rn-ls: .16em;
/* Οι τέσσερις τόνοι των Ερωτήσεων ορίζονται ΚΑΙ εδώ, αν και ο κύκλος δεν ζωγραφίζεται (λιτή λίστα με
hairlines): ένα token που λείπει σε ένα θέμα είναι η μέρα που κάποιος θα δείξει τον κύκλο και θα
πάρει διάφανο. Ίδιο χρυσό και στους τέσσερις — εδώ η ποικιλία ΕΙΝΑΙ το λάθος. */
--rn-dot1: #f3ecdd; --rn-dot1-ink: #b08d4a;
--rn-dot2: #f3ecdd; --rn-dot2-ink: #b08d4a;
--rn-dot3: #f3ecdd; --rn-dot3-ink: #b08d4a;
--rn-dot4: #f3ecdd; --rn-dot4-ink: #b08d4a;
/* 🃏 ΚΑΙ ΤΑ ΕΝΝΙΑ TOKENS ΤΗΣ ΜΟΡΦΗΣ Γ2, ΑΝ ΚΑΙ ΤΟ ΕΛΕΓΚΑΝ ΔΕΝ ΖΩΓΡΑΦΙΖΕΙ ΟΥΤΕ ΕΝΑ ΑΠΟ ΤΑ ΣΧΗΜΑΤΑ
ΤΟΥΣ (αυτοκόλλητα, δρόμος, avatar, γραμματόσημο, pill): εδώ οι καρτέλες μένουν υπογράμμιση και η
ετικέτα του βοηθού μένει δίπλα στην ώρα — απόφαση, όχι παράλειψη. Ίδιος λόγος με τους τέσσερις
τόνους από πάνω: ένα token που λείπει σε ένα θέμα είναι η μέρα που κάποιος θα πάρει διάφανο. */
--rn-tab1: #b08d4a; --rn-tab3: #b08d4a;
--rn-road: #e4ddcd;
--rn-av: #fffdf8;
--rn-av-tilt: 0deg;
--rn-stamp-line: #e4ddcd;
--rn-stamp-ink: #b08d4a;
--rn-ai-bg: transparent; --rn-ai-ink: #b08d4a;
--rn-soft2: #ffffff; --rn-soft2-ink: #8d8674;
color-scheme: light;
}
/* ---------------------------------------------------------------- 4 · ΝΥΧΤΕΡΙΝΟ (Ν)
Ανθρακί, επίπεδο, γεωμετρικό, ΕΝΑ teal. Οι τιμές βγαίνουν αυτούσιες από τα εγκεκριμένα artboards
(`docs/design/renter-themes-2026-09-06/NightChat|NightPass|NightQa.dc.html`) — καμία εφευρεμένη.
🌙 ΕΙΝΑΙ ΘΕΜΑ, ΟΧΙ «ΝΥΧΤΕΡΙΝΗ ΠΑΡΑΛΛΑΓΗ», ΚΑΙ Η ΔΙΑΦΟΡΑ ΕΙΝΑΙ ΟΛΗ Η ΑΠΟΦΑΣΗ: το μεγάλο σχόλιο πιο
πάνω («δεν υπάρχει νυχτερινή παραλλαγή») ΜΕΝΕΙ ισχυρό λέξη προς λέξη. Τα άλλα τρία θέματα δεν
σκουραίνουν ποτέ — ούτε στις εννιά το βράδυ στο καμπινέ. Αυτό εδώ είναι ανθρακί ΚΑΙ ΤΙΣ ΔΥΟ ΩΡΕΣ
επειδή το ΔΙΑΛΕΞΕ η rental, όχι επειδή το επέβαλε το `prefers-color-scheme`. Ίδιος κανόνας, ανάποδη
κατεύθυνση: το θέμα κερδίζει την ώρα της ημέρας — γι' αυτό `color-scheme: dark` ρητό, ώστε ο
επιλογέας ώρας (``) και τα πεδία να ζωγραφιστούν σκούρα από το λειτουργικό.
ΤΟ ΒΑΘΟΣ ΕΙΝΑΙ ΤΕΣΣΕΡΑ ΓΚΡΙ, ΟΧΙ ΣΚΙΑ: σελίδα `#1f1f1f` → ζώνη κεφαλίδας `#262626` → κάρτα `#2c2c2c`
→ εσοχή `#333333`. Γι' αυτό `--shadow: none` και τα πέντε `none` των `--rn-lift*`: πάνω σε ανθρακί
μια μαύρη σκιά δεν φαίνεται καν, και μια χρωματιστή θα ήταν λάμψη — δηλαδή ακριβώς η χειρονομία που
αυτό το θέμα δεν κάνει πουθενά.
⚠ ΤΟ ΛΕΥΚΟ ΠΑΝΩ ΣΤΟ TEAL ΕΙΝΑΙ 3,5:1 ΚΑΙ ΕΙΝΑΙ ΡΗΤΗ ΕΠΙΛΟΓΗ ΤΟΥ ΕΓΚΕΚΡΙΜΕΝΟΥ ARTBOARD: ζει ΜΟΝΟ σε
γεμάτο κουμπί και σε φυσαλίδα πελάτη, από 15 px και πάνω με βάρος 500-600. Το κείμενο σώματος δεν
το αγγίζει ποτέ — `--ink` πάνω σε `--bg` είναι 14,7:1 και `--muted` πάνω σε `--card` 6,5:1.
ΟΙ ΤΕΣΣΕΡΙΣ ΤΟΝΟΙ ΤΩΝ ΕΡΩΤΗΣΕΩΝ ΕΙΝΑΙ ΑΚΡΙΒΩΣ ΤΑ ΤΕΣΣΕΡΑ ΖΕΥΓΗ ΤΟΥ `NightQa` (ταυτότητα, κεχριμπάρι,
ουδέτερο, κοραλί) — εδώ η ποικιλία ΕΙΝΑΙ η σχεδίαση, σε αντίθεση με το Ελεγκάν. */
[data-rn-theme='night'],
:root[data-rn-theme='night'] {
--bg: #1f1f1f;
--bg2: #262626;
--card: #2c2c2c;
--card2: #333333;
--line: #3a3a3a;
--ink: #f2f2f2;
--muted: #a9b3b3;
--accent: #39979c;
--accent-dim: #2c7a7e;
--accent-soft: rgba(57, 151, 156, .16);
/* Ορίζεται αν και ΔΕΝ ζωγραφίζεται (τα `--rn-lift*` είναι `none`): ίδιος λόγος με τα tokens σχήματος
του Ελεγκάν — ένα token που λείπει σε ένα θέμα είναι η μέρα που κάποιος θα πάρει διάφανο. */
--accent-glow: rgba(57, 151, 156, .26);
--on-accent: #ffffff;
--ok-soft: rgba(57, 151, 156, .14);
--warn: #e0b13a;
--crit: #e0604a;
--crit-soft: rgba(224, 96, 74, .14);
--hover: rgba(242, 242, 242, .06);
--overlay: rgba(17, 17, 17, .62);
--shadow: none;
--shadow-strong: none;
--rn-mine: #39979c;
--rn-on-mine: #ffffff;
--rn-mine-soft: rgba(57, 151, 156, .16);
--rn-them-line: #3f6d70;
--rn-lift: none;
--rn-lift-tap: none;
--rn-lift-soft: none;
--rn-drop: none;
--rn-sheen: none;
--rn-tilt: 0deg;
--rn-r: 10px;
--rn-r-card: 12px;
--rn-bw: 1px;
/* Το αραίωμα ΤΩΝ ΕΤΙΚΕΤΩΝ (ΠΑΡΑΛΑΒΗ, ΒΑΣΗ, ΣΤΟ ΟΧΗΜΑ) — .14em στα artboards. Οι ΚΑΡΤΕΛΕΣ έχουν δικό
τους, .12em, και ζει στο `renter.css`: δεν είναι η ίδια τυπογραφία, δεν είναι το ίδιο token. */
--rn-ls: .14em;
--rn-dot1: rgba(57, 151, 156, .16); --rn-dot1-ink: #39979c;
--rn-dot2: rgba(224, 177, 58, .16); --rn-dot2-ink: #e0b13a;
--rn-dot3: rgba(242, 242, 242, .10); --rn-dot3-ink: #f2f2f2;
--rn-dot4: rgba(224, 96, 74, .14); --rn-dot4-ink: #e0604a;
/* 🃏 ΚΑΙ ΤΑ ΕΝΝΙΑ TOKENS ΤΗΣ ΜΟΡΦΗΣ Γ2, ΑΝ ΚΑΙ ΤΟ ΝΥΧΤΕΡΙΝΟ ΔΕΝ ΖΩΓΡΑΦΙΖΕΙ ΚΑΝΕΝΑ ΑΠΟ ΤΑ ΣΧΗΜΑΤΑ
ΤΟΥΣ (αυτοκόλλητα, δρόμος, avatar, γραμματόσημο): ίδιος λόγος με το Ελεγκάν. Το `--rn-av` παίρνει
το `#111111` του δίσκου των artboards — αν κάποια μέρα δειχθεί, θα είναι το σωστό μαύρο.
ΤΟ PILL ΤΟΥ ΒΟΗΘΟΥ ΟΜΩΣ ΖΩΓΡΑΦΙΖΕΤΑΙ ΕΔΩ (`NightChat`): accent-soft φόντο, accent μελάνι. */
--rn-tab1: #39979c; --rn-tab3: #39979c;
--rn-road: #3a3a3a;
--rn-av: #111111;
--rn-av-tilt: 0deg;
--rn-stamp-line: #3a3a3a;
--rn-stamp-ink: #39979c;
--rn-ai-bg: rgba(57, 151, 156, .16); --rn-ai-ink: #39979c;
--rn-soft2: #333333; --rn-soft2-ink: #a9b3b3;
color-scheme: dark;
}