/* ===========================================================================
   THEME TOKENS — v2

   Το ΜΟΝΟ σημείο της εφαρμογής όπου γράφεται χρώμα. Κάθε component, κάθε
   αρχείο στο logic/, κάθε <style> block ζητά `var(--token)` και ποτέ literal.

   ── ΤΙ ΕΙΝΑΙ ΑΥΤΟ ΤΟ ΑΡΧΕΙΟ ΤΩΡΑ ───────────────────────────────────────────

   ΜΟΝΟ το φωτεινό θέμα, με τις τιμές που ήδη έτρεχαν. Αυτό το αρχείο μπήκε
   ως ΚΑΘΑΡΟ REFACTOR: καμία απολύτως οπτική διαφορά. Το σκούρο θέμα είναι
   η φάση 5 και δεν υπάρχει ακόμα — ένα `data-theme="dark"` σήμερα δεν βρίσκει
   κανέναν κανόνα και η σελίδα μένει φωτεινή, που είναι το σωστό.

   Ο πλήρης κατάλογος, οι φάσεις και το γιατί κάθε απόφασης:
   documentation/frontend/dark-mode.md

   ── ΠΩΣ ΓΡΑΦΕΤΑΙ ΤΟ ΣΚΟΥΡΟ, ΟΤΑΝ ΕΡΘΕΙ ─────────────────────────────────────

   Οι κανόνες δηλώνονται σε `[data-theme="dark"]` και ΟΧΙ σε
   `:root[data-theme="dark"]`. Ο λόγος είναι λειτουργικός, όχι αισθητικός:
   το Live UI Preview του admin πρέπει να μπορεί να βάλει το attribute σε ΕΝΑ
   div και να αλλάξει μόνο η κάρτα μέσα του. Με `:root[…]` ο scoped override
   δεν πιάνει ποτέ. Για τον ίδιο λόγο το φωτεινό δηλώνεται δύο φορές — ώστε
   ένα container να μπορεί να γυρίσει και ΠΡΟΣ ΤΑ ΠΙΣΩ, φωτεινό μέσα σε
   σκούρα σελίδα.

   ── ΚΑΙ ΜΙΑ ΠΡΟΕΙΔΟΠΟΙΗΣΗ ──────────────────────────────────────────────────

   Τα ονόματα είναι ΣΗΜΑΣΙΟΛΟΓΙΚΑ, ποτέ περιγραφικά: `--surface-tray`, όχι
   `--gray-100`. Δύο tokens μπορεί σήμερα να έχουν την ΙΔΙΑ τιμή και να
   αποκλίνουν στο σκούρο — π.χ. το `--ink-muted` και το `--chart-tick` είναι
   και τα δύο #64748B εδώ, και δεν είναι το ίδιο πράγμα. Μην τα ενοποιήσεις.

   Οι ακτίνες, τα ύψη και τα breakpoints ΔΕΝ είναι εδώ. Δεν αλλάζουν με το
   θέμα, και αν μπουν στο ίδιο αρχείο κάποιος θα τα αλλάξει «για το dark».
   =========================================================================== */

:root,
[data-theme="light"] {

    /* ── ΕΠΙΦΑΝΕΙΕΣ ────────────────────────────────────────────────────── */

    /* Η σελίδα. Δύο βήματα κάτω από το tray — βλ. index.html. */
    --surface-page: #E9EEF4;
    /* Τα δύο radial washes του body: navy πάνω αριστερά, teal πάνω δεξιά.
       Ίδιες δύο αποχρώσεις με το hero-scrim του login. */
    --surface-page-wash-navy: rgba(17, 85, 128, .10);
    --surface-page-wash-teal: rgba(23, 188, 185, .09);

    /* Το σώμα κάθε κάρτας, και κάθε γραμμή πίνακα που δεν είναι επιλεγμένη. */
    --surface-card: #ffffff;
    /* Το βυθισμένο ράφι. ΥΛΙΚΟ, όχι σήμα: δεν αλλάζει ποτέ ανά ετυμηγορία. */
    --surface-tray: #F3F5F7;
    /* Κάρτα χωρίς καμία μέτρηση πουθενά: κρατά το ράφι, χάνει το βάθος.
       Σχεδόν το χρώμα της σελίδας, επίτηδες — μια άδεια κάρτα υποχωρεί. */
    --surface-tray-empty: #F8FAFC;
    /* Κεφαλίδα πίνακα, και η μπάρα «φόρτωσης» του skeleton. Ίδια τιμή με το
       παραπάνω σήμερα, άλλος ρόλος. */
    --surface-header: #F8FAFC;
    /* Ένα βήμα πιο σκούρο: η γραμμή τμήματος μέσα στον πίνακα. */
    --surface-sunken: #F1F5F9;
    /* Η επιλεγμένη γραμμή του entity table. */
    --surface-row-active: #E7EFF5;
    /* Ο placeholder φόρτωσης, και η λάμψη που τον διατρέχει. */
    --surface-skeleton: #EEF1F4;
    --surface-skeleton-sheen: rgba(255, 255, 255, .65);
    /* Η οθόνη εκκίνησης, πριν μπει οτιδήποτε άλλο. */
    --surface-loader: #F9FAFB;
    /* Το πλαϊνό μενού. ΕΙΝΑΙ ΗΔΗ ΣΚΟΥΡΟ — το σκούρο θέμα δεν το αντιστρέφει,
       θα κατέστρεφε το μόνο σημείο της σελίδας που ήδη δουλεύει σε σκούρο. */
    --surface-sidebar: #0c3a58;
    /* Το ΤΕΡΜΑ της κλίσης του sidebar. Ήταν `to-cqs-blue`, δηλαδή το
       --brand-navy — που είναι σωστό να γίνεται ανοιχτό στο σκούρο, γιατί
       είναι χρώμα ΜΕΛΑΝΙΟΥ πάνω σε φωτεινή σελίδα. Εδώ όμως έβαφε
       ΕΠΙΦΑΝΕΙΑ, και μάλιστα επιφάνεια που δεν γυρίζει ποτέ: το sidebar
       είναι πάντα σκούρο. Το αποτέλεσμα ήταν κλίση από #090D10 σε
       #5AA9E6 — η στήλη ξεθώριαζε σε έντονο γαλάζιο στα δύο τρίτα της.
       Η τιμή εδώ είναι ΑΚΡΙΒΩΣ το φωτεινό --brand-navy, ώστε να μην
       κουνηθεί τίποτα. */
    --surface-sidebar-end: #115580;
    /* Το ενεργό εικονίδιο μέσα στο μενού: το ανοιχτό γαλάζιο της μάρκας πάνω
       στο σκούρο. ΔΕΝ είναι το teal του LIVE. */
    --sidebar-accent: #73cdd8;
    /* Το αμπέρ που διαβάζεται ΠΑΝΩ ΣΤΟ ΣΚΟΥΡΟ ΜΕΝΟΥ. Ίδιο και στα δύο θέματα,
       όπως το --sidebar-accent και για τον ίδιο λόγο: το μενού είναι σκούρο
       πάντα. Το #d97706 των καρτών μετριέται 3,4:1 εκεί — οριακό για 9px
       γράμματα, και αυτό είναι το μόνο σημείο που λέει «δεν είσαι εσύ». */
    --imp-sidebar-accent: #F0C86A;

    /* Το toast του «νέα έκδοση, ανανεώνω» — δικό του ζεύγος, γιατί εμφανίζεται
       πάνω από οτιδήποτε και δεν ανήκει σε καμία κάρτα. */
    --toast-bg: #003d60;
    --toast-ink: #fff;

    /* ── Η ΜΠΑΡΑ IMPERSONATION ─────────────────────────────────────────────
       Δικό της ζεύγος πλακιδίων: δεν είναι κάρτα και δεν είναι chrome, είναι
       η μία γραμμή που λέει «δεν είσαι εσύ». Το αρχείο τα είχε ήδη ως τοπικά
       custom properties με literal τιμές — ανέβηκαν εδώ ώστε το σκούρο θέμα
       να μη χρειαστεί να τα ξαναβρεί. */
    --imp-tile-base: #F1F7FB;
    --imp-tile-base-2: #E6F0F7;
    --imp-tile-base-border: #CFE2EE;
    --imp-action-hover: #0E4468;

    /* ── ΠΕΡΙΓΡΑΜΜΑΤΑ ──────────────────────────────────────────────────── */

    /* Το ουδέτερο περίγραμμα κάρτας. Στο v2 το border ΔΕΝ κουβαλά ετυμηγορία
       — αυτό το κάνει το wash, και μόνο αυτό. */
    --border-neutral: #E5E7EB;
    /* Το ιστορικό `cqs-border` — .tech-card, header, κάρτα του skeleton. */
    --border-card: #EAEAEA;
    /* 1px ουδέτερο πάνω από κάθε tray. Ήταν 2px σε χρώμα status και βγήκε:
       σε πλήρες πλάτος διαβαζόταν ως ράβδος που κόβει την κάρτα στη μέση. */
    --border-divider: #E9EDF1;
    /* Το ίδιο, σε κάρτα χωρίς μέτρηση. */
    --border-divider-soft: #EEF2F6;
    /* Λεπτοί διαχωριστές μέσα σε tray και σε πλέγμα sub-metrics. */
    --border-subtle: #E2E8F0;
    --border-grid: #E7ECF1;
    /* Κατακόρυφη παύλα 1×11px ανάμεσα σε δύο τιμές του ίδιου κελιού. */
    --rule-vertical: #DCE3EA;
    /* Ο διαχωριστής του breadcrumb στο κινητό. Δική του τιμή, ΑΚΡΙΒΩΣ η
       παλιά: είναι ένα σκαλί πιο σκούρο από το --ink-hairline και η διαφορά
       φαίνεται σε μια «·» ανάμεσα σε δύο ονόματα. */
    --rule-soft: #c1c7cf;

    /* Το βάθος του tray, και η σκιά της παγωμένης στήλης ΟΤΑΝ έχει γίνει
       scroll. Το βάθος στον πίνακα είναι δομικό, όχι διακοσμητικό. */
    --shadow-tray-inset: inset 0 2px 4px -2px rgba(15,44,67,.12);
    --shadow-sticky: 1px 0 0 var(--border-divider), 4px 0 8px -6px rgba(15,44,67,.35);

    /* ── ΜΕΛΑΝΙ ────────────────────────────────────────────────────────── */

    --ink: #0F2C43;        /* ο αριθμός-τίτλος */
    --ink-soft: #334155;   /* δευτερεύουσες τιμές μέσα σε tray */
    --ink-muted: #64748B;  /* ετικέτες — 5.03:1 σε λευκό */
    --ink-ghost: #CBD5E1;  /* η παύλα εκεί που θα ήταν αριθμός */
    /* Κείμενο πάνω σε επιφάνεια που ΜΕΝΕΙ σκούρα και στα δύο θέματα — το
       sidebar, η μπάρα προσωποποίησης, τα γεμίσματα teal. Δεν γυρίζει, γιατί
       η επιφάνεια από κάτω δεν γυρίζει. Για γέμισμα που ΓΥΡΙΖΕΙ υπάρχει το
       --ink-on-inverse παρακάτω· τα δύο δεν είναι εναλλάξιμα. */
    --ink-on-dark: #ffffff;

    /* ── ΓΕΜΙΣΜΑΤΑ ΠΟΥ ΔΕΝ ΕΙΝΑΙ ΜΕΛΑΝΙ ──────────────────────────────────
       Το --brand-dark έκανε δύο δουλειές: ήταν το μελάνι της σελίδας
       (`body { color }` και δεκάδες `text-cqs-dark`) ΚΑΙ το γέμισμα δύο
       πλακιδίων (`bg-cqs-dark`). Στο σκούρο το μελάνι ΠΡΕΠΕΙ να γίνει
       ανοιχτό — και τα γεμίσματα το ακολούθησαν μέσα στο ίδιο token. Το
       πλακίδιο του άβαταρ μετρήθηκε 1,29:1 και το κουμπί του drawer 1,17:1.
       Αόρατα και τα δύο.

       Ένα token, ένας ρόλος. Οι τιμές εδώ είναι ΑΚΡΙΒΩΣ οι σημερινές, ώστε
       το φωτεινό να μην κουνηθεί ούτε ένα pixel. */

    /* Το κουμπί μέγιστης έμφασης. Πραγματικά ΑΝΤΙΣΤΡΟΦΟ: σκούρο σε φωτεινή
       σελίδα, φωτεινό σε σκούρη. Γι' αυτό γυρίζει και το μελάνι του μαζί —
       αν γύριζε μόνο η επιφάνεια θα ξαναφτιάχναμε το ίδιο bug. */
    --surface-inverse: #313131;
    --ink-on-inverse: #ffffff;   /* 13,01:1 — και 7,97:1 στο hover (navy) */

    /* Το πλακίδιο ταυτότητας του EntityTable. ΔΕΝ αντιστρέφεται: τα αρχικά
       του είναι teal, και το teal δεν διαβάζεται πάνω σε φωτεινό. */
    --surface-avatar: #313131;   /* teal-light πάνω του: 7,09:1 */

    /* ── ΟΙ ΚΛΑΣΕΙΣ ΠΟΥ ΗΤΑΝ TAILWIND ──────────────────────────────────────
       Τα components έγραφαν `bg-white`, `text-gray-400`, `bg-gray-50`. Σε
       φωτεινό θέμα αυτό δούλευε· σε σκούρο, το σώμα της κάρτας έμενε λευκό
       ενώ το ράφι από κάτω σκούραινε, και ο μεγάλος αριθμός — που ΕΙΧΕ γίνει
       token — γραφόταν ανοιχτό πάνω σε λευκό. Αόρατος.

       Οι τιμές εδώ είναι ΑΚΡΙΒΩΣ οι τιμές του Tailwind, ώστε η μετατροπή να
       είναι μηδενική οπτικά. Είναι περισσότερα γκρι απ' όσα χρειάζεται ένα
       σχέδιο: το `text-gray-400`, το `text-gray-500` και το `text-slate-500`
       κάνουν την ίδια δουλειά με τρεις αποχρώσεις, επειδή γράφτηκαν σε
       διαφορετικές στιγμές. Η ΕΝΟΠΟΙΗΣΗ ΤΟΥΣ ΕΙΝΑΙ ΑΛΛΑΓΗ ΣΧΕΔΙΟΥ και ανήκει
       στη φάση 5 ως ρητή απόφαση — όχι εδώ, λαθραία, μέσα σε ένα refactor που
       υπόσχεται ότι δεν αλλάζει τίποτα. */
    --surface-subtle: #f9fafb;      /* ήταν bg-gray-50  */
    --surface-subtle-2: #f3f4f6;    /* ήταν bg-gray-100 */
    --surface-slate: #f8fafc;       /* ήταν bg-slate-50 */
    --surface-slate-2: #f1f5f9;     /* ήταν bg-slate-100 */
    --ink-strong: #1f2937;          /* ήταν text-gray-800 */
    --ink-label: #6b7280;           /* ήταν text-gray-500 */
    --ink-faint: #9ca3af;           /* ήταν text-gray-400 */
    --ink-disabled: #d1d5db;        /* ήταν text-gray-300 */
    --border-hairline: #f3f4f6;     /* ήταν border-gray-100 */
    --border-input: #d1d5db;        /* ήταν border-gray-300 */

    /* ── ΟΙ ΥΠΟΛΟΙΠΕΣ ΚΛΑΣΕΙΣ TAILWIND ────────────────────────────────────
       Δεύτερο πέρασμα. Το πρώτο πήρε όσες ταίριαζαν ΑΚΡΙΒΩΣ με υπάρχον token
       και άφησε αυτές — και ακριβώς αυτές ήταν οι τρύπες που φάνηκαν στο
       κινητό σε σκούρο: η κάψουλα του υποτμήματος έμενε ανοιχτόχρωμη και το
       ενεργό της κείμενο σχεδόν μαύρο, δηλαδή λευκό πλακίδιο με αόρατο
       γράμμα μέσα σε σκούρη σελίδα.

       Οι τιμές είναι ΑΚΡΙΒΩΣ του Tailwind, ώστε το φωτεινό να μην κουνηθεί. */
    --ink-contrast: #0f172a;        /* ήταν text-slate-900 */
    --ink-secondary: #475569;       /* ήταν text-slate-600 */
    --ink-quiet: #94a3b8;           /* ήταν text-slate-400 */
    --ink-hairline: #cbd5e1;        /* ήταν text-slate-300 */
    --ink-hairline-2: #e2e8f0;      /* ήταν text-slate-200 */
    --ink-black: #111827;           /* ήταν text-gray-900 */
    --ink-body: #4b5563;            /* ήταν text-gray-600 */
    --surface-muted: #cbd5e1;       /* ήταν bg-slate-300 */
    --surface-muted-2: #e5e7eb;     /* ήταν bg-gray-200 */

    /* Status ΩΣ ΕΠΙΦΑΝΕΙΑ, με τις τιμές που έγραφαν ήδη τα QA / Schedule.
       ΔΕΝ ενοποιούνται με τα --status-*-chip-*: εκείνα είναι το κουτί του
       target badge και έχουν άλλες τιμές. Δύο πράγματα που μοιάζουν και δεν
       είναι το ίδιο δεν γίνονται ένα επειδή θα ήταν βολικό. */
    --tint-success-bg: #f0fdf4;     /* ήταν bg-green-50     */
    --tint-success-border: #bbf7d0; /* ήταν border-green-200 */
    --tint-warning-bg: #fffbeb;     /* ήταν bg-amber-50     */
    --tint-warning-border: #fde68a; /* ήταν border-amber-200 */
    --tint-danger-bg: #fef2f2;      /* ήταν bg-red-50       */
    --tint-danger-border: #fecaca;  /* ήταν border-red-200  */

    /* Τρεις ακόμα αποχρώσεις ετυμηγορίας από το v1, που το README του v2
       ονομάζει ρητά ως το παράδειγμα της ασυνέπειας: το EntityTable έλεγε
       `text-yellow-600` εκεί που το KPICard έλεγε amber. Αποκτούν όνομα εδώ
       ώστε να ΦΑΙΝΕΤΑΙ ότι είναι τρεις, πριν αποφασιστεί αν γίνονται μία. */
    --legacy-yellow: #ca8a04;       /* ήταν text-yellow-600 */
    --legacy-yellow-soft: #eab308;  /* ήταν text-yellow-500 */
    --legacy-red-soft: #ef4444;     /* ήταν text-red-500    */

    /* Wash της μάρκας: γέμισμα, όχι συμπαγές χρώμα. Με πλήρες μπλε ο κύκλος
       του άβαταρ θα ήταν το πιο σκούρο αντικείμενο της οθόνης, βαρύτερος από
       κάθε νούμερο KPI. Ίδια λογική στη φυσαλίδα της κάτω μπάρας. */
    --shadow-raised-mobile: 0 1px 2px rgba(15, 44, 67, .12), 0 3px 8px -6px rgba(15, 44, 67, .30);
    --shadow-tray-mobile: 0 1px 2px rgba(15, 44, 67, .05);
    --focus-ring: rgba(17, 85, 128, .40);

    --brand-wash: rgba(17, 85, 128, .08);
    --brand-wash-border: rgba(17, 85, 128, .14);
    --brand-wash-bubble: rgba(17, 85, 128, .09);
    /* Η απόχρωση του υλικού της κεφαλίδας στο κινητό — θόλωμα ΣΥΝ απόχρωση. */
    /* Το ΥΛΙΚΟ της κεφαλίδας στο κινητό, ως τριπλό RGB: το alpha του το
       οδηγεί το scroll, οπότε δεν μπορεί να είναι token χρώματος. */
    --chrome-rgb: 255, 255, 255;
    --chrome-tint: rgba(255, 255, 255, .14);

    /* ── Η ΣΕΛΙΔΑ ΕΙΣΟΔΟΥ ──────────────────────────────────────────────────
       Δική της γλώσσα: φωτογραφία σε πλήρες κάδρο, γυάλινη κάρτα από πάνω,
       και μια παλέτα που δεν εμφανίζεται πουθενά αλλού στην εφαρμογή. Μένει
       ξεχωριστή οικογένεια επίτηδες — η είσοδος ΔΕΝ είναι το dashboard και δεν
       πρέπει να αρχίσει να του μοιάζει επειδή μοιράζονται ένα αρχείο. */
    --login-blue-deep: #003d60;
    --login-blue-hover: #0d4466;
    --login-teal-deep: #0f7f92;
    --login-cyan: #E0F4F7;
    --login-slate: #191c1e;
    --login-border-strong: #E2E8F0;
    --login-error: #ba1a1a;
    --login-muted: #94a3b8;
    /* ΤΟ ΓΥΑΛΙ ΩΣ ΤΡΙΠΛΟ RGB, όχι ως χρώμα.
       Η κάρτα εισόδου δεν είναι επιφάνεια — είναι διάφανο στρώμα πάνω σε
       φωτογραφία, χτισμένο από εννιά rgba() με διαφορετικό alpha το καθένα
       (το γέμισμα .72, η λάμψη .40, το χείλος .38, το εσωτερικό φως .70…).
       Ένα token ανά alpha θα ήταν εννιά tokens που πρέπει να συμφωνούν.
       Ένα τριπλό RGB κρατά ΚΑΘΕ alpha ακριβώς όπως γράφτηκε και αλλάζει μόνο
       το υλικό: λευκό γυαλί σε φωτεινό, σκούρο γυαλί σε σκούρο.

       ⚠️ Το hero — οι κουκκίδες και το κείμενο ΠΑΝΩ στη φωτογραφία — ΔΕΝ το
       χρησιμοποιεί. Εκεί το λευκό είναι λευκό σε κάθε θέμα, γιατί από κάτω
       του υπάρχει πάντα η ίδια φωτογραφία. */
    --glass-rgb: 255, 255, 255;
    --glass-tint: rgba(255, 255, 255, .72);
    /* Το πλαίσιο γύρω από το widget της Cloudflare. Το δικό της περίγραμμα
       ζει μέσα στο iframe και δεν αλλάζει — αυτό εδώ του δίνει πεδίο. */
    --captcha-tile: rgba(255, 255, 255, .55);
    --captcha-tile-border: #E2E8F0;
    --login-glass: #ffffff;
    --login-frame: #BFCDD5;

    /* ── ΤΑ ΠΑΝΕΛ ΠΑΝΩ ΣΤΟ ΓΥΑΛΙ ────────────────────────────────────────────
       Το ghost κουμπί, το πλακίδιο εικονιδίου, τα κελιά του OTP, το notice και
       το κουτί των recovery codes έγραφαν ΚΥΡΙΟΛΕΚΤΙΚΑ rgba(255,255,255,.xx)
       μέσα στο login.html και στο OTPInput.js.

       Η αδιαφάνεια δεν μεταφέρεται. Το ίδιο .55 λευκό που εδώ ανασηκώνει ένα
       πάνελ πάνω από λευκό γυαλί δίνει πάνω σε ΣΚΟΥΡΟ γυαλί μεσαίο γκρι
       (#989CA0), και το --brand-navy από πάνω του μετρήθηκε 1,09:1 — το
       «Κωδικός με email» υπήρχε ως κουμπί, το κείμενό του όχι. Το ίδιο και το
       «Ακύρωση» στο --ink-muted: 1,07:1.

       Ο ρόλος είναι «ανασηκωμένο πάνελ», όχι «λευκό πέπλο», και διατηρείται
       στο σκούρο με πολύ χαμηλότερο άλφα. Και επειδή γυρίζει η ΕΠΙΦΑΝΕΙΑ,
       γυρίζει μαζί και το ΜΕΛΑΝΙ της — δες --surface-inverse/--ink-on-inverse
       για το πρότυπο.

       ⚠️ Κάθε λόγος παρακάτω μετρήθηκε πάνω στο --login-frame, δηλαδή στη
       ΧΕΙΡΟΤΕΡΗ σύνθεση του γυαλιού, όχι στο --login-glass. Στο --login-glass
       είναι παντού ~1,3 μονάδες καλύτεροι. */
    --login-control: rgba(255, 255, 255, .55);        /* ghost κουμπί, κενό κελί OTP */
    --login-control-raised: rgba(255, 255, 255, .72); /* icon κουμπί, γεμάτο κελί OTP */
    --login-control-hover: rgba(255, 255, 255, .88);  /* hover, ενεργό κελί OTP */
    --login-panel: rgba(255, 255, 255, .62);          /* notice, recovery box */
    --login-control-line: rgba(17, 85, 128, .20);
    --login-control-line-hover: rgba(17, 85, 128, .42);
    --login-panel-line: rgba(17, 85, 128, .15);
    --login-field-rule: rgba(17, 85, 128, .30);       /* η γραμμή του FloatingInput πάνω στο γυαλί */

    /* Το μελάνι ΤΟΥΣ, και δεν είναι το --brand-navy/--ink-muted της σελίδας:
       το --ink-muted (#64748B) πάνω στο ghost κουμπί μετριέται 3,88:1 και
       ΕΠΕΦΤΕ ΗΔΗ ΣΤΟ ΦΩΤΕΙΝΟ — 13px «Ακύρωση», όριο 4,5. Η τιμή εδώ είναι το
       πρώτο σκαλί που το περνά χωρίς να πάψει να είναι πιο ήσυχο από το
       --login-control-ink δίπλα του. */
    --login-control-ink: #115580;        /* 6,47:1 σε rest · 7,55:1 σε hover */
    --login-control-ink-muted: #556277;  /* 5,02:1 σε rest · 5,85:1 σε hover */

    /* ── Ο ΔΙΑΚΟΠΤΗΣ ΘΕΜΑΤΟΣ ───────────────────────────────────────────────
       🔴 ΑΥΤΑ ΤΑ ΕΝΝΙΑ ΕΙΝΑΙ ΙΔΙΑ ΚΑΙ ΣΤΑ ΔΥΟ ΘΕΜΑΤΑ, ΕΠΙΤΗΔΕΣ.

       Ο διακόπτης δεν υιοθετεί το θέμα — ΤΟ ΖΩΓΡΑΦΙΖΕΙ. Είναι μια εικόνα της
       μέρας και της νύχτας, και ο ήλιος δεν γίνεται σκούρος επειδή έπεσε το
       φως στο δωμάτιο. Ένας διακόπτης που άλλαζε χρώματα μαζί με ό,τι ελέγχει
       θα έδειχνε την κατάσταση δύο φορές και θα έχανε αυτό που τον κάνει
       αναγνωρίσιμο με μια ματιά.

       Ζουν εδώ και όχι μέσα στο component για τον ίδιο λόγο με όλα τα άλλα:
       ένα μέρος όπου αποφασίζεται χρώμα. Μην τα «διορθώσεις» στο σκούρο. */
    --switch-day-sky: #3D7EAE;
    --switch-night-sky: #1D1F2C;
    --switch-sun: #ECCA2F;
    --switch-sun-shade: #a1872a;
    --switch-moon: #C4C9D1;
    --switch-moon-shade: #969696;
    --switch-crater: #959DB1;
    --switch-cloud: #F3FDFF;
    --switch-cloud-back: #AACADF;
    --switch-star: #ffffff;

    /* ── ΤΟ TOGGLE (components/ui/<v>/Toggle.js) ──────────────────────────
       ΑΛΛΟ ΠΡΑΓΜΑ από τα --switch-* από πάνω: εκείνα ζωγραφίζουν μέρα και
       νύχτα και δεν γυρίζουν ποτέ. Αυτά είναι ένα γενικό on/off που ΓΥΡΙΖΕΙ
       με το θέμα, όπως κάθε άλλο control.

       Το «on» είναι το gradient του κύριου κουμπιού της εισόδου (navy → teal),
       ώστε ένα ενεργό toggle και το «Επαλήθευση» να διαβάζονται ως η ίδια
       οικογένεια. Το «to» ΔΕΝ είναι το --login-teal-deep: εκείνο μετριέται
       2,89:1 στο --login-frame, κάτω από το 3:1 των μη-κειμενικών.

       Μετρημένα στη ΧΕΙΡΟΤΕΡΗ σύνθεση του γυαλιού (--login-frame #BFCDD5):
         track         3,03:1        on-from  4,90:1        on-to  3,63:1
       Και ο λευκός αντίχειρας πάνω στο track του: 4,94:1 off · 5,91+:1 on. */
    --toggle-track: #617285;
    --toggle-track-on-from: #115580;
    --toggle-track-on-to: #0D6E7F;
    --toggle-thumb: #FFFFFF;
    --toggle-thumb-on: #FFFFFF;
    /* Το ✓ μέσα στον αντίχειρα: η κατάσταση λέγεται και χωρίς χρώμα. */
    --toggle-check: #115580;
    --toggle-thumb-shadow: 0 1px 2px rgba(15, 44, 67, .30), 0 0 0 .5px rgba(15, 44, 67, .10);

    /* ── ΜΑΡΚΑ ─────────────────────────────────────────────────────────── */

    --brand-navy: #115580;
    --brand-dark: #313131;
    /* Τα δύο ιστορικά .tech-badge χρώματα. */
    --badge-green: #10B981;
    --badge-gray: #6B7280;
    /* ΑΠΟΚΛΕΙΣΤΙΚΑ σήμα LIVE. Ποτέ ετυμηγορία, ποτέ κείμενο. */
    --brand-teal: #17bcb9;
    --brand-teal-light: #73cdd8;
    /* Ο διάδρομος του DottedBackground: λευκό -> δύο πολύ αχνά γαλάζια. */
    --hero-wash-1: #F5FCFD;
    --hero-wash-2: #E1F5F8;

    --live-signal: var(--brand-teal);
    /* Το ζωντανό ΝΟΥΜΕΡΟ είναι μπλε, 7.97:1 — όχι teal. Το teal είναι 2.3:1
       σε λευκό και δεν επιτρέπεται να γίνει γράμμα. */
    --live-number: #115580;

    /* ── ΕΤΥΜΗΓΟΡΙΑ ────────────────────────────────────────────────────────
       Κάθε status είναι ΤΡΙΑΔΑ, και οι τρεις ρόλοι δεν ανταλλάσσονται:

         text   ό,τι είναι ΓΡΑΜΜΑΤΑ. Περνά AA πάνω στο --surface-card.
         mark   γεμίσματα ≥2px — dot, bar, gradient. ΠΟΤΕ σε γράμματα.
         wash   το mark αραιωμένο· η μόνη μεγάλη έγχρωμη επιφάνεια μιας κάρτας.

       Οι λόγοι σε παρένθεση ισχύουν ΣΕ ΛΕΥΚΟ και ακυρώνονται στο σκούρο —
       κάθε τιμή της φάσης 5 θέλει τον δικό της, ξαναμετρημένο. */

    --status-success-text: #0E7C66;   /* 5.13:1 */
    --status-success-mark: #16a34a;   /* 3.30:1 — μπάρα ναι, γράμμα όχι */
    --status-success-wash: rgba(22,163,74,.10);
    --status-success-chip-bg: #F0FDF9;
    --status-success-chip-bg2: #E2F6EF;
    --status-success-chip-border: #CCEBE4;

    --status-warning-text: #9A6410;   /* 4.99:1 */
    --status-warning-mark: #d97706;   /* 3.19:1 */
    --status-warning-wash: rgba(217,119,6,.10);
    --status-warning-chip-bg: #FDF8EC;
    --status-warning-chip-bg2: #FBEFD6;
    --status-warning-chip-border: #F0DCB0;

    --status-danger-text: #B3261E;    /* 6.54:1 */
    --status-danger-mark: #dc2626;    /* 4.83:1 */
    /* 16%, όχι 10%: ο παλμός το κατεβάζει στο ~9% στο πιο αχνό του καρέ, και
       μια κάρτα σε κίνδυνο πρέπει να μένει σκουρότερη από μια σε
       προειδοποίηση ΑΚΟΜΑ ΚΑΙ ΤΟΤΕ — και υπό prefers-reduced-motion, όπου
       απλώς μένει στο 16%. */
    --status-danger-wash: rgba(220,38,38,.16);
    --status-danger-chip-bg: #FEF2F2;
    --status-danger-chip-bg2: #FBE2DF;
    --status-danger-chip-border: #FCA5A5;

    /* Απούσα μέτρηση. ΔΕΝ έχει wash — σε κανένα θέμα. Ένα γκρι πέπλο θα
       ανακοίνωνε ετυμηγορία εκεί που δεν μετρήθηκε τίποτα. */
    --status-nodata-text: #64748B;    /* 5.03:1 */
    --status-nodata-mark: #94A3B8;
    --status-nodata-chip-bg: #F8FAFC;
    --status-nodata-chip-bg2: #F1F5F9;
    --status-nodata-chip-border: #E2E8F0;

    /* Η λάμψη κάτω από το πλακίδιο του εικονιδίου: το mark με alpha 0x40 (25%).
       ΕΙΝΑΙ ΟΚΤΑΨΗΦΙΟ ΕΠΙΤΗΔΕΣ. Ο κώδικας έγραφε `${t.mark}40` — συνένωση
       συμβολοσειρών πάνω σε hex — που με token θα γινόταν `var(--x)40`, δηλαδή
       άκυρο CSS που δεν ζωγραφίζει τίποτα και δεν φαίνεται σε κανένα diff.
       Η άλφα ανήκει στην τιμή, όχι στον κώδικα που τη ζητά. */
    --status-success-glow: #16a34a40;
    --status-warning-glow: #d9770640;
    --status-danger-glow: #dc262640;

    /* ── ΣΚΙΕΣ ΚΑΙ ΑΝΑΓΛΥΦΟ ────────────────────────────────────────────────
       Χρώμα κι αυτές, όχι γεωμετρία: σε σκούρο θέμα μια σκιά από μελάνι δεν
       φαίνεται, και το λευκό ανάγλυφο πρέπει να αντιστραφεί ή να φύγει. */
    --shadow-card: 0 1px 2px rgba(15,44,67,.05),0 10px 20px -16px rgba(15,44,67,.35);
    --shadow-chip: 0 1px 2px rgba(15,44,67,.06);
    /* Ένας αριθμός πάνω σε wash παίρνει 1px λευκή σκιά από κάτω. Στα 3-4xl
       διαβάζεται ως πολύ ελαφρύ ανάγλυφο και είναι αυτό που εμποδίζει τη
       φιγούρα να μοιάζει τυπωμένη ΠΑΝΩ στο wash αντί για πάνω από αυτό. */
    --shadow-emboss: 0 1px 0 rgba(255,255,255,.9);
    /* Το εσωτερικό φωτεινό χείλος στην κορυφή του πλακιδίου. */
    --tile-highlight: #fff;

    /* Η κάψουλα LIVE. Δικό της ζεύγος: δεν είναι ετυμηγορία και δεν είναι
       επιφάνεια κάρτας — είναι το σήμα ότι το feed αναπνέει. */
    --live-pill-bg: #E6F7F6;
    --live-pill-border: #C3E9E7;

    /* Οι πιο σκούρες παραλλαγές, για hover πάνω σε γέμισμα. */
    --status-success-mark-hover: #15803d;
    --status-warning-mark-hover: #b45309;
    --status-danger-mark-hover: #b91c1c;
    --status-nodata-mark-hover: #64748B;

    /* ── Η ΜΠΑΡΑ ΤΟΥ ΚΕΛΙΟΥ ────────────────────────────────────────────────
       Το γέμισμα σημαίνει ΠΑΝΤΑ «πόσο καλά», σε κάθε στήλη· το tick στο 80%
       σημαίνει ΠΑΝΤΑ «ο στόχος ΤΟΥ ΙΔΙΟΥ ΤΟΥ ΑΤΟΜΟΥ». Το γέμισμα παίρνει το
       mark της ετυμηγορίας· εδώ είναι μόνο τα ουδέτερα μέρη. */
    --bar-track: #EDF1F4;
    --bar-tick: #94A3B8;
    --dot-off: #E2E8F0;

    /* ── ΚΑΜΒΑΣ ────────────────────────────────────────────────────────────
       Το Chart.js δεν κληρονομεί CSS: αυτά διαβάζονται από JS με
       getComputedStyle ΤΗ ΣΤΙΓΜΗ ΤΟΥ DRAW, ποτέ cached σε module scope.
       Ένα chart που κράτησε το χρώμα του από το boot μένει λευκό μέσα σε
       σκούρα κάρτα.

       Οι ετυμηγορίες ΔΕΝ έχουν δικά τους tokens εδώ: το hover και το swatch
       του tooltip χρησιμοποιούν τα --status-*-text, που είναι ό,τι γράφει
       ήδη κάθε ετυμηγορία σε KPI card. Τα φωτεινά mark είναι φανάρι, και
       γι' αυτό έμοιαζε με status bar router το παλιό per-point colouring. */
    --chart-series: #115580;
    --chart-series-hover: #0d4466;
    --chart-target-line: #73cdd8;
    --chart-grid: #f3f4f6;
    /* Ο σκελετός που κρατά ένας άδειος καμβάς: grid χωρίς μετρήσεις. */
    --chart-grid-empty: #F4F7F9;
    --chart-tick: #64748B;
    --chart-point-border: #ffffff;
    --chart-peer-line: #64748B;
    --chart-peer-fill: #CBD5E1;
    --chart-peer-fill-hover: #94A3B8;
    --chart-tooltip-bg: #ffffff;
    --chart-tooltip-title: #111827;
    --chart-tooltip-body: #4B5563;
    --chart-tooltip-border: #E5E7EB;
}

/* ===========================================================================
   ΤΟ ΣΚΟΥΡΟ ΘΕΜΑ

   ΔΕΝ είναι αντιστροφή του παραπάνω. Τρία πράγματα αλλάζουν ΡΟΛΟ και όχι
   απλώς τιμή, και είναι ο λόγος που τα ονόματα είναι σημασιολογικά:

     1. ΤΟ ΡΑΦΙ ΑΝΤΙΣΤΡΕΦΕΤΑΙ. Σε φωτεινό, το --surface-tray είναι πιο σκούρο
        από την κάρτα και διαβάζεται ως βυθισμένο. Σε σκούρο, «πιο σκούρο»
        σημαίνει τρύπα — οπότε εδώ είναι πιο ΦΩΤΕΙΝΟ από το --surface-card.
     2. ΤΑ WASHES ΑΝΕΒΑΙΝΟΥΝ. Ένα mark στο 10% πάνω σε λευκό είναι αχνή
        απόχρωση· πάνω σε σκούρο είναι σχεδόν αόρατο. Πήγαν 14%, και η σχέση
        danger:warning κρατήθηκε ΩΣ ΣΧΕΣΗ (1,6×) — γι' αυτό το danger είναι 22%
        και όχι 16%.
     3. ΟΙ ΣΚΙΕΣ ΑΝΤΙΣΤΡΕΦΟΝΤΑΙ. Σκιά από μελάνι δεν φαίνεται σε σκούρο, και
        το λευκό ανάγλυφο του --shadow-emboss γίνεται θόρυβος. Έγινε μαύρο.

   ΟΙ ΛΟΓΟΙ ΑΝΤΙΘΕΣΗΣ ΕΙΝΑΙ ΜΕΤΡΗΜΕΝΟΙ ΕΔΩ, πάνω στο σκούρο --surface-card
   (#19222A). Δεν μεταφέρθηκε κανένας από το λευκό: το #0E7C66 είναι 5,13:1
   εκεί και πέφτει κάτω από 3:1 εδώ, και το παλιό --live-number (#115580)
   μετριέται 2,02:1 — κυριολεκτικά αόρατο.

   ── ΜΙΑ ΑΠΟΧΡΩΣΗ, ΜΙΑ ΚΛΙΜΑΚΑ ──────────────────────────────────────────

   Κάθε ουδέτερη επιφάνεια εδώ βγαίνει από ΜΙΑ ράμπα σε H208 S26% — το
   ναυτικό της μάρκας (#115580 → 203°) ελαφρώς ανοιγμένο. Δεν είναι
   αισθητική προτίμηση: το «σχεδόν μαύρο με μια πινελιά χρώματος» είναι το
   πιο κοινό default του σκούρου UI, και μια σελίδα που το υιοθετεί μοιάζει
   με οποιοδήποτε άλλο dashboard. Η δική μας απόχρωση την κάνει δική μας.

       L5  #090D10  βυθός (μενού)      L17 #202C37  ράφι
       L7  #0D1216  σελίδα             L20 #263440  υψωμένο
       L9  #11171D  υποχωρεί           L25 #2F4150  περίγραμμα
       L13 #19222A  κάρτα              L31 #3A5064  περίγραμμα+
                                       L40 #4B6881  είσοδος / φάντασμα

   ΤΟ ΒΗΜΑ ΚΑΡΤΑ→ΣΕΛΙΔΑ ΕΙΝΑΙ ΤΩΡΑ 1,17:1 — ΑΚΡΙΒΩΣ ΟΣΟ ΚΑΙ ΣΤΟ ΦΩΤΕΙΝΟ.
   Ήταν 1,09:1 και αυτός ήταν ο λόγος που η σελίδα διαβαζόταν επίπεδη: στο
   φωτεινό τη διαφορά τη συμπληρώνει η ΣΚΙΑ, ενώ σε σκούρο μια σκιά από
   μελάνι πάνω σε σχεδόν μαύρο δεν φαίνεται καθόλου. Έμενε μόνο η
   φωτεινότητα, και ήταν πολύ μικρή — οι κάρτες αιωρούνταν αντί να κάθονται.

   Και το περίγραμμα σηκώνει το υπόλοιπο: 1,53:1 ως προς την κάρτα, από
   1,34:1. Σε σκούρο θέμα το περίγραμμα δουλεύει πιο σκληρά από τη
   φωτεινότητα, γιατί είναι το μόνο που δεν το τρώει η απουσία σκιάς.

   Το ΜΟΝΟ που ΔΕΝ αλλάζει είναι η οικογένεια --switch-*: ο διακόπτης
   ζωγραφίζει τη μέρα και τη νύχτα, δεν τις υιοθετεί.

   ΔΕΝ ΥΠΑΡΧΕΙ ΣΤΟ v1. Ένα COMPONENT_VERSION=v1 δίνει φωτεινή σελίδα ό,τι κι
   αν λέει το localStorage, και αυτό είναι που κρατά το rollback υπόσχεση.
   =========================================================================== */

[data-theme="dark"] {
    --surface-page: #0D1216;
    --surface-page-wash-navy: rgba(90,169,230,.10);
    --surface-page-wash-teal: rgba(45,212,207,.07);
    --surface-card: #19222A;
    /* ΤΟ ΒΑΘΟΣ ΑΝΤΙΣΤΡΕΦΕΤΑΙ: το ράφι είναι ΠΙΟ ΦΩΤΕΙΝΟ από την κάρτα.
       Σε φωτεινό θέμα το βυθισμένο είναι σκουρότερο· σε σκούρο, σκουρότερο
       σημαίνει «τρύπα», όχι «ράφι». Το token κρατά το όνομά του και αλλάζει
       ρόλο — γι' αυτό τα ονόματα είναι σημασιολογικά. */
    --surface-tray: #202C37;
    --surface-tray-empty: #11171D;
    --surface-header: #11171D;
    --surface-sunken: #11171D;
    --surface-row-active: #263440;
    --surface-skeleton: #202C37;
    --surface-skeleton-sheen: rgba(255,255,255,.06);
    --surface-loader: #0D1216;
    --surface-sidebar: #090D10;
    /* dL* 11,2 από την κορυφή — στο φωτεινό η ίδια κλίση μετριέται 11,3.
       Ίδια ανύψωση, ίδιος navy χαρακτήρας, και η στήλη μένει σκούρη. */
    --surface-sidebar-end: #122736;
    --sidebar-accent: #4FC3D9;

    --imp-tile-base: #202C37;
    --imp-tile-base-2: #263440;
    --imp-tile-base-border: #2F4150;
    --imp-action-hover: #3D8FC4;

    --border-neutral: #2F4150;
    --border-card: #2F4150;
    --border-divider: #263440;
    --border-divider-soft: #202C37;
    --border-subtle: #2F4150;
    --border-grid: #263440;
    --rule-vertical: #3A5064;
    --rule-soft: #3A5064;

    /* Σκιά από μελάνι δεν φαίνεται σε σκούρο. Το βάθος γράφεται με φως. */
    --shadow-tray-inset: inset 0 2px 4px -2px rgba(0,0,0,.45);
    --shadow-sticky: 1px 0 0 var(--border-divider), 4px 0 8px -6px rgba(0,0,0,.65);
    --shadow-card: 0 1px 2px rgba(0,0,0,.40),0 10px 20px -16px rgba(0,0,0,.70);
    --shadow-chip: 0 1px 2px rgba(0,0,0,.35);
    /* Το ανάγλυφο αντιστρέφεται: λευκή σκιά σε σκούρο φόντο είναι θόρυβος. */
    --shadow-emboss: 0 1px 0 rgba(0,0,0,.45);
    --tile-highlight: rgba(255,255,255,.07);

    --ink: #E8EEF3;        /* 13,77:1 */
    --ink-soft: #B3C0CB;   /*  8,68:1 */
    --ink-muted: #93A3B0;  /*  6,22:1 στην κάρτα, 5,49:1 στο ράφι — ο δεύτερος δεσμεύει */
    --ink-ghost: #4B6881;
    /* Μένει λευκό: οι επιφάνειες που το φορούν (sidebar, teal) είναι σκούρες
       και εδώ. Δεν είναι «λευκό επειδή το θέμα είναι σκούρο». */
    --ink-on-dark: #ffffff;

    /* Το αντίστροφο κουμπί γυρίζει ΟΛΟΚΛΗΡΟ, επιφάνεια και μελάνι. Έτσι
       κρατάει και το hover του: το `hover:bg-cqs-blue` γίνεται #5AA9E6 εδώ,
       όπου το λευκό μετριέται 2,54:1 ενώ το σκούρο μελάνι 7,40:1. */
    --surface-inverse: #E8EEF3;  /* 13,77:1 από την κάρτα — διαβάζεται ως μπλοκ */
    --ink-on-inverse: #0D1216;   /* 16,10:1 — και 7,40:1 στο hover (navy) */

    /* Το άβαταρ ΔΕΝ γίνεται φωτεινό, γιατί τα teal αρχικά του θα χάνονταν.
       Ανεβαίνει ένα σκαλί της κλίμακας — όσο χρειάζεται για να διαβαστεί ως
       μπλοκ (1,53:1 από την κάρτα, ίδιο με το περίγραμμά της) — και κρατάει
       ΑΚΡΙΒΩΣ τη φωτεινότητα που είχαν τα αρχικά στο φωτεινό. */
    --surface-avatar: #2F4150;   /* teal-light πάνω του: 7,01:1 — ήταν 7,09:1 */

    /* Οι πρώην Tailwind κλάσεις. Εδώ ΕΝΟΠΟΙΟΥΝΤΑΙ σκόπιμα: τρία γκρι που
       έκαναν την ίδια δουλειά σε φωτεινό δεν έχουν λόγο να είναι τρία εδώ. */
    --surface-subtle: #11171D;
    --surface-subtle-2: #202C37;
    --surface-slate: #11171D;
    --surface-slate-2: #202C37;
    --ink-strong: #E8EEF3;
    --ink-label: #93A3B0;
    --ink-faint: #7C8B99;
    --ink-disabled: #4A5966;
    --border-hairline: #263440;
    --border-input: #3A5064;

    /* Η είσοδος σε σκούρο. Η φωτογραφία μένει — δουλεύει και στα δύο· αυτό που
       αλλάζει είναι το γυαλί από πάνω της, που γίνεται σκούρο γυαλί αντί για
       λευκό, και το πλαίσιο που σταματά να είναι ανοιχτό γκρι πάνω σε φωτεινό. */
    --login-blue-deep: #7FBFF0;
    --login-blue-hover: #A5D2F5;
    --login-teal-deep: #4FC3D9;
    --login-cyan: #14313A;
    --login-slate: #E8EEF3;
    --login-border-strong: #2F4150;
    --login-error: #F87171;
    --login-muted: #AEBCC8;
    --glass-rgb: 25, 34, 42;
    --glass-tint: rgba(19, 26, 33, .92);
    --captcha-tile: rgba(255, 255, 255, .04);
    --captcha-tile-border: #2F4150;
    --login-glass: #19222A;
    --login-frame: #2A343D;

    /* Λευκό πέπλο με ΠΟΛΥ χαμηλότερο άλφα: ίδιος ρόλος, άλλο έδαφος. Δες το
       φωτεινό μπλοκ για το γιατί δεν μπορούν να είναι οι ίδιοι αριθμοί.
       Μετρημένα πάνω στο --login-frame (#2A343D):
         rest   #39424B  ΔL* 6,4 από την κάρτα
         hover  #414A52  ΔL* 10,0 από την κάρτα, 3,6 από το rest */
    --login-control: rgba(255, 255, 255, .07);
    --login-control-raised: rgba(255, 255, 255, .09);
    --login-control-hover: rgba(255, 255, 255, .11);
    --login-panel: rgba(255, 255, 255, .06);
    /* Οι γραμμές γυρίζουν από «πιο σκούρες από την κάρτα» σε «πιο ανοιχτές»,
       στο ίδιο ΔL*: φωτεινό −9,3/−19,6 · σκούρο +9,1/+19,4. */
    --login-control-line: rgba(255, 255, 255, .10);
    --login-control-line-hover: rgba(255, 255, 255, .22);
    --login-panel-line: rgba(255, 255, 255, .08);
    --login-field-rule: rgba(255, 255, 255, .28);
    --login-control-ink: #7FBFF0;        /* 5,16:1 σε rest · 4,54:1 σε hover */
    --login-control-ink-muted: #AEBCC8;  /* 5,26:1 σε rest · 4,63:1 σε hover */

    /* Toggle. Στο σκούρο το «on» γίνεται ΦΩΣ (τα ανοιχτά navy/teal της
       μάρκας), άρα ο αντίχειρας γυρίζει σε σκούρο — λευκό πάνω σε #5AA9E6
       δεν περνά. Μετρημένα στο --login-frame (#2A343D):
         track 3,07:1 · on-from 4,98:1 · on-to 6,12:1
         αντίχειρας off 3,53:1 στο track · on 6,94:1 στο on-from */
    --toggle-track: #62809B;
    --toggle-track-on-from: #5AA9E6;
    --toggle-track-on-to: #4FC3D9;
    --toggle-thumb: #E8EEF3;
    --toggle-thumb-on: #0E1A22;
    --toggle-check: #7FBFF0;
    --toggle-thumb-shadow: 0 1px 2px rgba(0, 0, 0, .55);

    --brand-navy: #5AA9E6;
    --brand-dark: #E8EEF3;
    --brand-teal: #2DD4CF;
    --brand-teal-light: #7FE3E0;
    --hero-wash-1: #16222B;
    --hero-wash-2: #1B2A35;
    --badge-green: #34D399;
    --badge-gray: #94A3B8;

    --live-signal: var(--brand-teal);
    --live-number: #6BB6E8;   /* 7,27:1 — το #115580 μετριέται 2,02:1 εδώ, αόρατο */
    --live-pill-bg: #14313A;
    --live-pill-border: #1F5561;

    /* Τα washes ανεβαίνουν: 10% πάνω σε σκούρο είναι σχεδόν αόρατο. Η ΣΧΕΣΗ
       danger:warning διατηρείται ως σχέση (1.6×), όχι ως αριθμός. */
    --status-success-text: #4ADE80;   /*  9,24:1 */
    --status-success-mark: #22C55E;   /*  7,07:1 */
    --status-success-wash: rgba(34,197,94,.14);
    --status-success-glow: #22C55E40;
    --status-success-chip-bg: #10231A;
    --status-success-chip-bg2: #143026;
    --status-success-chip-border: #1E5038;
    --status-success-mark-hover: #4ADE80;

    --status-warning-text: #FBBF24;   /*  9,65:1 */
    --status-warning-mark: #F59E0B;   /*  7,50:1 */
    --status-warning-wash: rgba(245,158,11,.14);
    --status-warning-glow: #F59E0B40;
    --status-warning-chip-bg: #241B08;
    --status-warning-chip-bg2: #33270C;
    --status-warning-chip-border: #58431A;
    --status-warning-mark-hover: #FBBF24;

    --status-danger-text: #F87171;    /*  5,82:1 */
    --status-danger-mark: #EF4444;    /*  4,28:1 — γέμισμα, όριο 3:1 */
    --status-danger-wash: rgba(239,68,68,.22);
    --status-danger-glow: #EF444440;
    --status-danger-chip-bg: #2A1315;
    --status-danger-chip-bg2: #3A191C;
    --status-danger-chip-border: #5E2429;
    --status-danger-mark-hover: #F87171;

    --status-nodata-text: #94A3B8;    /*  6,28:1 */
    --status-nodata-mark: #64748B;
    --status-nodata-chip-bg: #19222A;
    --status-nodata-chip-bg2: #202C37;
    --status-nodata-chip-border: #2F4150;
    --status-nodata-mark-hover: #94A3B8;

    --bar-track: #263440;
    --bar-tick: #64748B;
    --dot-off: #2F4150;

    --chart-series: #5AA9E6;
    --chart-series-hover: #7FBFF0;
    /* Η γραμμή στόχου είναι ΑΝΑΦΟΡΑ, όχι δεδομένο: στο φωτεινό μετριέται
       1,83:1 (dL* 22,6) και στέκεται πολύ πίσω από τη σειρά (dL* 65,7).
       Το #4FC3D9 που είχε εδώ έδινε dL* 60,6 — ΠΙΟ δυνατή από τη σειρά
       του σκούρου (54,0). Η ιεραρχία είχε αντιστραφεί: ο στόχος φώναζε
       πάνω από τα ίδια σου τα νούμερα. */
    --chart-target-line: #2F6874;   /* 2,57:1 · dL* 28,1 — κάτω από τη σειρά */
    --chart-grid: #202C37;
    --chart-grid-empty: #11171D;
    --chart-tick: #93A3B0;
    --chart-point-border: #19222A;
    --chart-peer-line: #8A99A6;
    --chart-peer-fill: #3A5064;
    --chart-peer-fill-hover: #4B6881;
    --chart-tooltip-bg: #202C37;
    --chart-tooltip-title: #E8EEF3;
    --chart-tooltip-body: #B3C0CB;
    --chart-tooltip-border: #2F4150;

    /* Δεύτερο πέρασμα των πρώην Tailwind κλάσεων. Εδώ ΕΝΟΠΟΙΟΥΝΤΑΙ όπου
       έκαναν την ίδια δουλειά, και το status γίνεται ΓΕΜΙΣΜΑ ΧΑΜΗΛΗΣ ΕΝΤΑΣΗΣ
       αντί για ανοιχτόχρωμο πλακίδιο: ένα #fef2f2 πάνω σε σκούρο δεν είναι
       αχνό κόκκινο, είναι λευκό. */
    --ink-contrast: #E8EEF3;
    --ink-secondary: #B3C0CB;
    --ink-quiet: #93A3B0;
    --ink-hairline: #4B6881;
    --ink-hairline-2: #2F4150;
    --ink-black: #E8EEF3;
    --ink-body: #B3C0CB;
    --surface-muted: #2F4150;
    --surface-muted-2: #263440;

    --tint-success-bg: #10231A;
    --tint-success-border: #1E5038;
    --tint-warning-bg: #241B08;
    --tint-warning-border: #58431A;
    --tint-danger-bg: #2A1315;
    --tint-danger-border: #5E2429;

    --legacy-yellow: #FBBF24;
    --legacy-yellow-soft: #FCD34D;
    --legacy-red-soft: #F87171;

    /* Το wash της μάρκας αντιστρέφεται σε ΦΩΣ: 8% navy πάνω σε σκούρο είναι
       αόρατο, ενώ 10% από το ανοιχτό μπλε δίνει το ίδιο «γέμισμα, όχι
       συμπαγές» που ζητούσε ο αρχικός κανόνας. */
    --shadow-raised-mobile: 0 1px 2px rgba(0, 0, 0, .45), 0 3px 8px -6px rgba(0, 0, 0, .70);
    --shadow-tray-mobile: 0 1px 2px rgba(0, 0, 0, .35);
    --focus-ring: rgba(90, 169, 230, .55);

    --brand-wash: rgba(90, 169, 230, .12);
    --brand-wash-border: rgba(90, 169, 230, .22);
    --brand-wash-bubble: rgba(90, 169, 230, .14);
    --chrome-rgb: 25, 34, 42;
    --chrome-tint: rgba(255, 255, 255, .05);

    --toast-bg: #202C37;
    --toast-ink: #E8EEF3;
}