/* MarketGuide — design tokens
   Παλέτα Έξις. Καμία άλλη τιμή χρώματος δεν γράφεται πουθενά αλλού στον κώδικα. */

:root {
  /* ---------- Επιφάνειες ---------- */
  --mg-bg:            #FBF5EC;  /* φόντο σελίδας */
  --mg-surface:       #FFFFFF;  /* κάρτα με έμφαση */
  --mg-surface-warm:  #F6E9D9;  /* κάρτα ήπια, chips, πεδία */
  --mg-surface-sunk:  #F2E7D6;  /* εσοχές, κενές καταστάσεις */

  /* ---------- Κείμενο ---------- */
  --mg-text:          #492213;  /* κύριο κείμενο και τίτλοι */
  --mg-text-soft:     #5C4232;  /* σώμα κειμένου */
  --mg-text-muted:    #8A7259;  /* δευτερεύον, λεζάντες */
  --mg-text-on-dark:  #F6E9D9;  /* κείμενο πάνω σε γεμάτο χρώμα */

  /* ---------- Περιγράμματα ---------- */
  --mg-border:        #E8DBC8;
  --mg-border-strong: #D6C3A8;

  /* ---------- Χρώματα brand ---------- */
  --mg-sage:          #828266;  /* φασκόμηλο, ήρεμα στοιχεία */
  --mg-sage-soft:     #EDF0E2;
  --mg-terracotta:    #C85A33;
  --mg-terracotta-soft: #FAE6DC;
  --mg-blue:          #6C91C2;  /* σπάνια χρήση: σύνδεσμοι, πληροφορία */
  --mg-blue-soft:     #E7EEF7;

  /* ---------- Κλίμακα βαθμού 0-100 ---------- */
  --mg-score-1:       #A33B1E;  /* 0-19   πολύ χαμηλό */
  --mg-score-2:       #C85A33;  /* 20-39  χαμηλό */
  --mg-score-3:       #E0A13F;  /* 40-59  μέτριο */
  --mg-score-4:       #A8AD63;  /* 60-79  καλό */
  --mg-score-5:       #6E8F3A;  /* 80-100 πολύ καλό */

  --mg-score-1-ink:   #FBEDE7;  /* κείμενο πάνω σε κάθε ζώνη */
  --mg-score-2-ink:   #FBEDE7;
  --mg-score-3-ink:   #4A2A02;
  --mg-score-4-ink:   #33380F;
  --mg-score-5-ink:   #F2F6E6;

  /* ---------- Τυπογραφία ---------- */
  --mg-font-ui:       'Inter', system-ui, sans-serif;
  --mg-font-display:  'Manrope', 'Inter', system-ui, sans-serif;

  --mg-size-score:    34px;  /* ο αριθμός μέσα στον κύκλο */
  --mg-size-title:    24px;  /* όνομα προϊόντος */
  --mg-size-lead:     17px;  /* λεκτική ετυμηγορία */
  --mg-size-body:     15px;
  --mg-size-meta:     14px;
  --mg-size-label:    11px;  /* κατηγορία, με letter-spacing */

  --mg-weight-normal: 400;
  --mg-weight-bold:   500;   /* δεν χρησιμοποιούμε 600 ή 700 */
  --mg-leading:       1.6;
  --mg-track-label:   0.08em;

  /* ---------- Γεωμετρία ---------- */
  --mg-radius:        10px;  /* κουμπιά, chips, πεδία */
  --mg-radius-card:   12px;  /* κάρτες */
  --mg-score-size:    84px;  /* διάμετρος κύκλου στη σελίδα προϊόντος */
  --mg-score-size-sm: 44px;  /* διάμετρος κύκλου μέσα σε λίστες */

  /* ---------- Αποστάσεις ---------- */
  --mg-gap-xs:  4px;
  --mg-gap-sm:  8px;
  --mg-gap-md:  16px;
  --mg-gap-lg:  24px;
  --mg-gap-xl:  32px;

  /* ---------- Βάθος ---------- */
  --mg-shadow:  0 1px 2px rgba(73, 34, 19, 0.06);

  color-scheme: light;
}

/* ---------- Σκοτεινό θέμα ----------
   Όταν το κινητό είναι σε σκοτεινή λειτουργία. Ζεστοί σκούροι καφέ τόνοι, ποτέ μαύρο.
   Τα ίδια ονόματα tokens: κανένα άλλο αρχείο δεν χρειάζεται αλλαγή. */
@media (prefers-color-scheme: dark) {
  :root {
    --mg-bg:            #1E1611;  /* φόντο σελίδας */
    --mg-surface:       #2A1F18;  /* κάρτα με έμφαση */
    --mg-surface-warm:  #33261D;  /* κάρτα ήπια, chips, πεδία */
    --mg-surface-sunk:  #251B15;  /* εσοχές, κενές καταστάσεις */

    --mg-text:          #F6E9D9;
    --mg-text-soft:     #E3D2BF;
    --mg-text-muted:    #B39C84;
    --mg-text-on-dark:  #FBF5EC;

    --mg-border:        #3E2F25;
    --mg-border-strong: #56432F;

    --mg-sage:          #A9A98A;
    --mg-sage-soft:     #2D2F22;
    --mg-terracotta:    #D46A42;
    --mg-terracotta-soft: #3D2318;
    --mg-blue:          #93B3DC;
    --mg-blue-soft:     #1F2836;

    /* Κλίμακα βαθμού: ίδιοι τόνοι, ελαφρώς φωτεινότεροι για αντίθεση σε σκούρο φόντο */
    --mg-score-1:       #B8472A;
    --mg-score-2:       #D46A42;
    --mg-score-3:       #E3A84A;
    --mg-score-4:       #AEB46A;
    --mg-score-5:       #7A9C44;

    --mg-shadow:  0 1px 2px rgba(15, 8, 4, 0.4);

    color-scheme: dark;
  }
}

/* Βοηθητικές κλάσεις για τον βαθμό.
   Ο κύκλος παίρνει μία από αυτές ανάλογα με τη ζώνη. */
.mg-score { display: inline-flex; align-items: center; justify-content: center;
            width: var(--mg-score-size); height: var(--mg-score-size);
            border-radius: 50%; font-family: var(--mg-font-display);
            font-size: var(--mg-size-score); font-weight: var(--mg-weight-bold);
            font-variant-numeric: tabular-nums; }
.mg-score--sm { width: var(--mg-score-size-sm); height: var(--mg-score-size-sm);
                font-size: 17px; }

.mg-score--1 { background: var(--mg-score-1); color: var(--mg-score-1-ink); }
.mg-score--2 { background: var(--mg-score-2); color: var(--mg-score-2-ink); }
.mg-score--3 { background: var(--mg-score-3); color: var(--mg-score-3-ink); }
.mg-score--4 { background: var(--mg-score-4); color: var(--mg-score-4-ink); }
.mg-score--5 { background: var(--mg-score-5); color: var(--mg-score-5-ink); }

/* Προϊόν χωρίς επαρκή δεδομένα. Ουδέτερο, ποτέ κόκκινο. */
.mg-score--none { background: var(--mg-surface-warm); color: var(--mg-text-muted);
                  border: 1px solid var(--mg-border-strong); }