:root {
  /* COLOR — Neutral scale (Sand & Off-whites) */
  --neutral-0: hsl(0, 0%, 100%); /* Απόλυτο Λευκό */
  --neutral-50: hsl(40, 30%, 98%); /* Bone White - για φόντο */
  --neutral-100: hsl(40, 25%, 95%); /* Light Sand - για section separators */
  --neutral-200: hsl(40, 20%, 88%); /* Sand Mist */
  --neutral-300: hsl(35, 15%, 80%); /* Muted Sand */
  --neutral-400: hsl(35, 10%, 60%); /* Warm Grey */
  --neutral-500: hsl(35, 8%, 45%); /* Text Secondary */
  --neutral-600: hsl(35, 12%, 35%); /* Text Primary */
  --neutral-700: hsl(35, 15%, 25%); /* Deep Warm Grey */
  --neutral-800: hsl(35, 20%, 15%); /* Dark Earth */
  --neutral-900: hsl(35, 25%, 10%); /* Near Black Warm */
  --neutral-950: hsl(35, 30%, 5%); /* Contrast Black */

  /* COLOR — Brand scale (Cyan-Blue / Logo Color) */
  --brand-50: hsl(205, 80%, 96%); /* Sky Mist */
  --brand-100: hsl(205, 75%, 90%); /* Very Light Blue */
  --brand-200: hsl(205, 70%, 80%); /* Soft Cyan */
  --brand-300: hsl(205, 65%, 70%); /* Logo Light */
  --brand-400: hsl(205, 75%, 55%); /* Bright Azure */
  --brand-500: hsl(205, 85%, 45%); /* Primary Logo Blue */
  --brand-600: hsl(205, 90%, 38%); /* Deep Corporate Blue */
  --brand-700: hsl(205, 90%, 30%); /* Darker Blue */
  --brand-800: hsl(205, 95%, 20%); /* Navy Hint */
  --brand-900: hsl(205, 100%, 12%); /* Midnight Blue */

  /* COLOR — Accent scale (Sand / Flour) */
  --accent-50: hsl(45, 50%, 96%); /* Hint of Flour */
  --accent-100: hsl(45, 45%, 90%); /* Soft Sand */
  --accent-200: hsl(45, 40%, 82%); /* Desert Sand */
  --accent-500: hsl(42, 35%, 65%); /* Golden Sand (Secondary Call to Action) */

  /* SHADOWS — Warm Sand Tones */

  --shadow-sm: 0 1px 2px hsl(35 25% 10% / 0.05);

  --shadow-md:
    0 4px 8px hsl(35 25% 10% / 0.08), 0 1px 2px hsl(35 25% 10% / 0.06);

  --shadow-lg:
    0 12px 24px hsl(35 25% 10% / 0.1), 0 4px 8px hsl(35 25% 10% / 0.06);

  --shadow-xl:
    0 24px 48px hsl(35 25% 10% / 0.12), 0 8px 16px hsl(35 25% 10% / 0.08);

  --shadow-brand: 0 10px 20px hsl(205 85% 45% / 0.15);

  /* TRANSITIONS — Ultra Premium Cinematic Feel */

  /* Για hover states σε buttons & links (άμεσο αλλά κομψό) */
  --transition-fast: 250ms cubic-bezier(0.23, 1, 0.32, 1);

  /* Το βασικό transition για κάρτες, modals και αλλαγές χρωμάτων */
  --transition-base: 450ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Για μεγάλα elements, image reveals ή page transitions */
  --transition-slow: 700ms cubic-bezier(0.075, 0.82, 0.165, 1);

  /* SPECIAL: Το "Soft Elastic" για premium UI elements που θέλουν να ξεχωρίζουν */
  --transition-bounce: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* CLIP PATH */
  --rolling-pin: polygon(
    5% 35%,
    10% 35%,
    10% 10%,
    90% 10%,
    90% 35%,
    95% 35%,
    95% 65%,
    90% 65%,
    90% 90%,
    10% 90%,
    10% 65%,
    5% 65%
  );

  /* BORDER WIDTHS */
  --border-thin: 1px;
  --border-base: 2px;
  --border-thick: 4px;

  /* BORDER RADIUS */
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* SPACING — 8pt grid */
  --space-1: 0.25rem; /*   4px */
  --space-2: 0.5rem; /*   8px */
  --space-3: 0.75rem; /*  12px */
  --space-4: 1rem; /*  16px */
  --space-5: 1.5rem; /*  24px */
  --space-6: 2rem; /*  32px */
  --space-7: 3rem; /*  48px */
  --space-8: 4rem; /*  64px */
  --space-9: 6rem; /*  96px */
  --space-10: 8rem; /* 128px */

  /* TYPOGRAPHY — Font families */
  /* Η Instrument Serif αναλαμβάνει το display/heading ρόλο */
  --font-display: 'Instrument Serif', serif;

  /* Η Plus Jakarta Sans αναλαμβάνει το body και τα UI στοιχεία */
  --font-sans:
    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    sans-serif;

  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

  /* TYPOGRAPHY — Fluid size scale (clamp) */
  --fs-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --fs-sm: clamp(0.875rem, 0.85rem + 0.35vw, 1rem);
  --fs-base: clamp(1rem, 0.95rem + 0.5vw, 1.125rem);
  --fs-lg: clamp(1.125rem, 1.05rem + 0.65vw, 1.375rem);
  --fs-xl: clamp(1.375rem, 1.3rem + 0.85vw, 1.85rem); /* Για μικρούς τίτλους */
  --fs-2xl: clamp(1.85rem, 1.6rem + 1.25vw, 2.5rem); /* Για H3 */
  --fs-3xl: clamp(2.5rem, 2.1rem + 2vw, 3.5rem); /* Για H2 */
  --fs-4xl: clamp(3.2rem, 2.8rem + 3vw, 5rem); /* Για Hero H1 */
  --fs-5xl: clamp(4.5rem, 3.5rem + 5vw, 7.5rem); /* Για Display Statements */
  --fs-giant: clamp(12rem, 22vw, 24rem);

  /* TYPOGRAPHY — Line heights, letter spacing, weights */
  --lh-tight: 1.05; /* Ιδανικό για την Instrument Serif */
  --lh-snug: 1.2;
  --lh-normal: 1.6; /* Πιο αέρινο για το premium body text */
  --lh-loose: 1.85;

  --ls-tight: -0.03em; /* Η Instrument Serif "δένει" πανέμορφα με tight spacing */
  --ls-normal: 0.01em; /* Η Plus Jakarta Sans θέλει λίγο αέρα στα ελληνικά */
  --ls-wide: 0.08em; /* Για uppercase buttons/labels */

  --fw-regular: 400; /* Αποκλειστικά για Instrument Serif */
  --fw-semibold: 600; /* Το βασικό σου βάρος για Plus Jakarta Sans (Body) */
  --fw-bold: 700; /* Για έμφαση και Buttons */
  --fw-black: 800; /* Για δυνατά τυπογραφικά στοιχεία */

  /* LAYOUT — Measure (optimal line length for reading) */
  --measure-narrow: 50ch;
  --measure-base: 65ch;
  --measure-wide: 75ch;

  /* Viewport heights — dvh is "dynamic viewport height */
  --height-hero-sm: 60svh;
  --height-hero-md: 80svh;
  --height-hero-full: 100svh;
  --height-hero-dvh: 100dvh;

  /* LAYOUT — Heights */
  --height-header-compact: 3.5rem; /*  56px */
  --height-header: 4rem; /*  64px */
  --height-header-large: 5rem; /*  80px */

  /* LAYOUT — Aspect ratios */
  --aspect-square: 1 / 1; /* avatars, logos */
  --aspect-portrait: 3 / 4; /* profile photos */
  --aspect-landscape: 4 / 3; /* classic photo */
  --aspect-photo: 3 / 2; /* DSLR photo */
  --aspect-video: 16 / 9; /* YouTube, modern video */
  --aspect-cinema: 21 / 9; /* cinematic hero */
  --aspect-golden: 1.618 / 1; /* golden ratio */

  /* LAYOUT — Container max-widths */
  --container-xs: 20rem; /*  320px — super narrow */
  --container-sm: 40rem; /*  640px — narrow (forms, prose) */
  --container-md: 48rem; /*  768px — medium content */
  --container-lg: 64rem; /* 1024px — standard content */
  --container-xl: 80rem; /* 1280px — wide landing pages */
  --container-2xl: 96rem; /* 1536px — very wide */

  /* Z-INDEX */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}