/* =====================================================================
   css/sfa-tokens.css - η βάση του βιομηχανικού ύφους
   =====================================================================
   Φορτώνεται ΠΡΩΤΟ από τα sfa-*.css, αμέσως μετά το color_palette.css.

   ΓΙΑΤΙ ΞΕΧΩΡΙΣΤΟ ΑΡΧΕΙΟ. Το `color_palette.css` είναι κατάλογος ΧΡΩΜΑΤΩΝ.
   Το βιομηχανικό ύφος δεν είναι χρώματα: είναι ΠΥΚΝΟΤΗΤΑ (ένα ύψος πεδίου
   παντού), ΓΕΩΜΕΤΡΙΑ (μικρές καμπύλες, λεπτές γραμμές, καμία σκιά-βουνό) και
   ΤΟΝΟΙ (κόκκινο/κεχριμπαρένιο/πράσινο/μπλε με απαλή εκδοχή του καθενός).
   Αυτά λείπουν εντελώς από την πλατφόρμα: κάθε παράθυρο έβαζε δικά του px.

   Ίδιο συμβόλαιο με το WeldGrid (`css/wg-tokens.css`), στην παλέτα της
   StrataforAll: σκούρο καφέ και χρυσό αντί για ναυτικό και πορτοκαλί.
   ===================================================================== */

:root {
    /* ── Πυκνότητα: ΕΝΑ ύψος για κάθε πεδίο ────────────────────────── */
    --sfa-field-height: 42px;
    --sfa-control-height: 36px;
    --sfa-gap: 10px;
    --sfa-gap-sm: 6px;
    --sfa-pad: 16px;

    /* ── Γεωμετρία ─────────────────────────────────────────────────── */
    --sfa-radius: 8px;
    --sfa-radius-sm: 6px;
    --sfa-radius-lg: 14px;
    --sfa-radius-pill: 999px;

    /* ── Επιφάνειες ────────────────────────────────────────────────── */
    --sfa-surface: var(--background-white, #fff);
    --sfa-surface-soft: #faf7f3;
    --sfa-surface-muted: #f3f0ec;
    --sfa-border: #ded7cd;
    --sfa-border-strong: #c7bcac;

    /* ── Κείμενο ───────────────────────────────────────────────────── */
    --sfa-ink: var(--text-color, #22223b);
    --sfa-ink-muted: #6c6a72;
    --sfa-ink-inverse: #ffffff;

    /* ── Ταυτότητα ─────────────────────────────────────────────────── */
    --sfa-accent: var(--primary-color, #d3984a);
    --sfa-accent-soft: #f7ecdc;
    --sfa-accent-strong: #b87d33;
    --sfa-deep: var(--header-bg-color, #3f2d16);
    --sfa-deep-soft: #ece6dd;

    /* ── Τόνοι. Κάθε τόνος ΜΕ την απαλή εκδοχή του: χωρίς αυτήν, κάθε
         σήμανση καταλήγει γεμάτο χρωματιστό πλαίσιο που ουρλιάζει. ─── */
    --sfa-red: var(--pdf-color, #a32d2f);
    --sfa-red-soft: #fbeceb;
    --sfa-amber: #b37a06;
    --sfa-amber-soft: #fdf3dd;
    --sfa-green: #1f7a45;
    --sfa-green-soft: #e6f3ec;
    --sfa-info: #2f6f9f;
    --sfa-info-soft: #e8f1f8;

    /* ── Σκιές: επίπεδες, όχι «μπαλόνια» ───────────────────────────── */
    --sfa-shadow-sm: 0 1px 2px rgb(34 34 59 / 6%);
    --sfa-shadow-md: 0 8px 24px rgb(34 34 59 / 10%);
    --sfa-shadow-lg: 0 18px 44px rgb(34 34 59 / 16%);

    /* ── Εστίαση ───────────────────────────────────────────────────── */
    --sfa-focus-width: 2px;
    --sfa-focus-ring: 0 0 0 3px color-mix(in srgb, var(--sfa-accent) 28%, transparent);

    /* ── Κίνηση. Μηδενίζεται μόνο του σε prefers-reduced-motion, οπότε
         κανένα άλλο αρχείο δεν χρειάζεται δικό του media query. ────── */
    --sfa-transition: 140ms ease;
    --sfa-transition-fast: 90ms ease;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --sfa-transition: 0ms;
        --sfa-transition-fast: 0ms;
    }
}