/* ==========================================================================
   MediPalas — design tokens
   --------------------------------------------------------------------------
   Every colour, size, shadow and timing in the site resolves to a token here.
   Change a value here and it changes everywhere. Nothing else should hard-code
   a hex value.
   ========================================================================== */

:root {
  /* ---- BRAND PALETTE ---------------------------------------------------
     Taken from the MediPalas logo and their social creatives.

     CONTRAST NOTE — measured against white, WCAG 2.1:
       --green-500  #7AC143   1.85:1  fills and graphics only. NEVER text on white.
       --green-600  #6CBE45   1.95:1  hover fill only.
       --green-700  #4E9A2E   3.51:1  passes the 3:1 bar for LARGE text (>=24px, or
                                      >=18.7px bold), icons, borders and focus rings.
                                      It does NOT pass 4.5:1 for body-size text.
       --green-800  #3E7A24   5.23:1  the text-safe green. Use this for any green
                                      word inside a paragraph, link or label.
       --grey-700   #58595B   7.01:1  body copy.
       --grey-900   #2B2D2E  13.83:1  headings.
       --grey-400   #A7A9AC   2.36:1  decorative and disabled states only.
     On the dark ground (--grey-900), --green-500 measures 6.28:1 and is the
     correct accent there.
     --------------------------------------------------------------------- */
  --green-500: #7AC143;
  --green-600: #6CBE45;
  --green-700: #4E9A2E;
  --green-800: #3E7A24;
  --green-50:  #F1F9EA;
  --green-100: #E2F2D3;

  --grey-900:  #2B2D2E;
  --grey-800:  #3D4041;
  --grey-700:  #58595B;
  --grey-600:  #76787A;
  --grey-400:  #A7A9AC;
  --grey-300:  #C9CBCD;
  --grey-200:  #E3E5E7;
  --grey-100:  #F4F5F6;
  --white:     #FFFFFF;
  --accent-ink:#122016;

  --danger:      #B3261E;
  --danger-bg:   #FDECEA;
  --warning:     #8A5A00;
  --warning-bg:  #FFF6E5;
  --success:     #2E7D32;
  --success-bg:  #EDF7ED;

  /* ---- SEMANTIC SURFACES (light theme) ---------------------------------- */
  --bg:            var(--white);
  --bg-subtle:     var(--grey-100);
  --bg-tint:       var(--green-50);
  --bg-inverse:    var(--grey-900);
  --surface:       var(--white);
  --surface-raised:var(--white);
  --surface-sunken: var(--grey-100);

  --text:          var(--grey-900);
  --text-body:     var(--grey-700);
  --text-muted:    var(--grey-600);
  --text-accent:   var(--green-800);
  --text-on-dark:  var(--white);
  --text-on-dark-muted: #C4C6C8;
  --text-on-brand: var(--accent-ink);

  --border:        var(--grey-200);
  --border-strong: var(--grey-300);
  --border-accent: var(--green-700);

  --brand:         var(--green-500);
  --brand-hover:   var(--green-600);
  --brand-ink:     var(--green-800);

  --focus-ring: var(--green-700);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* The signature gradient from their social creatives: white to soft green,
     top-left to bottom-right. */
  --grad-brand: linear-gradient(135deg, var(--white) 0%, var(--white) 38%, var(--green-50) 100%);
  --grad-brand-strong: linear-gradient(135deg, var(--green-50) 0%, var(--green-100) 100%);
  --grad-dark: linear-gradient(160deg, #24262700 0%, #1B1D1E 100%);

  /* ---- TYPOGRAPHY -------------------------------------------------------
     Manrope for display, Inter for text. Both carry full Greek coverage,
     which is non-negotiable here — every heading on this site is Greek.
     --------------------------------------------------------------------- */
  --font-display: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Ρευστή κλίμακα, 320px -> 1600px viewport.
     Βαθμονομημένη πάνω στα μεγέθη που χρησιμοποιεί το air balloon στα δικά του
     έργα (air-balloon.eu, nova.cy): σώμα κειμένου 18px, επικεφαλίδες ενοτήτων
     60-70px, display έως ~104px. Η προηγούμενη κλίμακα σταματούσε στα 17px /
     52px και η σελίδα διάβαζε μικρή σε οθόνη γραφείου. */
  --fs-xs:   clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);   /* 13 → 14 */
  --fs-sm:   clamp(0.875rem,  0.84rem + 0.20vw, 1rem);       /* 14 → 16 */
  --fs-base: clamp(1rem,      0.95rem + 0.26vw, 1.125rem);   /* 16 → 18 */
  --fs-md:   clamp(1.0625rem, 1.00rem + 0.34vw, 1.25rem);    /* 17 → 20 */
  --fs-lg:   clamp(1.25rem,   1.13rem + 0.60vw, 1.625rem);   /* 20 → 26 */
  --fs-xl:   clamp(1.5rem,    1.28rem + 1.10vw, 2.25rem);    /* 24 → 36 */
  --fs-2xl:  clamp(1.875rem,  1.45rem + 2.10vw, 3.25rem);    /* 30 → 52 */
  --fs-3xl:  clamp(2.25rem,   1.55rem + 3.50vw, 4.25rem);    /* 36 → 68 */
  --fs-4xl:  clamp(2.75rem,   1.70rem + 5.20vw, 5.5rem);     /* 44 → 88 */
  --fs-hero: clamp(2.75rem,   1.20rem + 7.60vw, 6.5rem);     /* 44 → 104 */

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.6;
  --lh-loose: 1.7;

  --ls-tight: -0.022em;
  --ls-snug:  -0.012em;
  --ls-normal: 0;
  --ls-wide:  0.06em;
  --ls-caps:  0.14em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-x:       800;

  /* ---- SPACING (4px base) ----------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;
  --sp-32: 8rem;

  /* Vertical rhythm between major sections, fluid.
     Μεγαλύτερη τυπογραφία θέλει και περισσότερο αέρα, αλλιώς η σελίδα πνίγεται. */
  --section-y: clamp(4rem, 2.4rem + 7vw, 9rem);
  --section-y-tight: clamp(2.75rem, 1.9rem + 3.8vw, 5.5rem);

  /* ---- LAYOUT ------------------------------------------------------------
     Πλατύ περιεχόμενο, όπως στα υπόλοιπα έργα του air balloon: στα 1600px
     οθόνης το ωφέλιμο πλάτος βγαίνει ~1430px (≈89% της οθόνης) αντί για τα
     1240px που άφηναν φαρδιές λευκές λωρίδες δεξιά κι αριστερά. */
  --wrap:        1720px;
  --wrap-narrow: 1040px;
  --wrap-wide:   1900px;
  --gutter: clamp(1rem, 0.35rem + 2.2vw, 2.75rem);

  --header-h: 4.5rem;
  --header-h-scrolled: 3.75rem;
  --header-clearance: 6rem;

  /* ---- RADII -------------------------------------------------------------- */
  --r-xs: 4px;  --r-sm: 8px;   --r-md: 12px;  --r-lg: 18px;
  --r-xl: 26px; --r-2xl: 34px; --r-pill: 999px;

  /* ---- ELEVATION ---------------------------------------------------------
     Layered, low-opacity, neutral-cool. No black-at-30% slabs. */
  --sh-xs: 0 1px 2px rgba(43, 45, 46, 0.06);
  --sh-sm: 0 1px 2px rgba(43, 45, 46, 0.05), 0 2px 6px rgba(43, 45, 46, 0.05);
  --sh-md: 0 2px 4px rgba(43, 45, 46, 0.05), 0 6px 16px rgba(43, 45, 46, 0.07);
  --sh-lg: 0 4px 8px rgba(43, 45, 46, 0.05), 0 14px 34px rgba(43, 45, 46, 0.09);
  --sh-xl: 0 8px 18px rgba(43, 45, 46, 0.07), 0 28px 60px rgba(43, 45, 46, 0.12);
  --sh-brand: 0 6px 18px rgba(78, 154, 46, 0.22);

  /* ---- MOTION ------------------------------------------------------------- */
  --dur-fast: 140ms;
  --dur:      240ms;
  --dur-slow: 420ms;
  --dur-xslow: 720ms;
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-back:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Z-INDEX SCALE ------------------------------------------------------ */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-float: 300;
  --z-menu: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-skip: 700;

  color-scheme: light;
}

/* The dark hero band keeps its charcoal ground in BOTH themes — it is a
   deliberate brand register, not a theme surface. These tokens let a section
   opt into it without fighting the theme. */
.on-dark {
  --bg: var(--grey-900);
  --surface: #313334;
  --text: var(--white);
  --text-body: var(--text-on-dark-muted);
  --text-muted: #9A9C9E;
  --text-accent: var(--green-500);
  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);
  --focus-ring: var(--green-500);
  color-scheme: dark;
}