/* ============================================================================
   Marisini Sea View — Design Tokens (3-layer: primitive → semantic → component)
   Source of truth for ALL pages. Never hardcode hex in HTML — use var(--…).
   Palette: content-extracted.md · Maintained manually (Node not installed).
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------------
     LAYER 1 — PRIMITIVES (raw values, never used directly in components)
     ------------------------------------------------------------------------ */

  /* Brand blue (primary #4EA6C9 → 400, dark #1F7699 → 600) */
  --blue-50:  #eaf4f8;
  --blue-100: #d4e9f1;
  --blue-200: #a9d3e4;
  --blue-300: #7ebdd6;
  --blue-400: #4ea6c9;   /* PRIMARY — «το βασικό μπλε» */
  --blue-500: #3a92b5;
  --blue-600: #1f7699;   /* DARK — hover / depth */
  --blue-700: #195f7b;
  --blue-800: #14495e;
  --blue-900: #0e3342;

  /* Sand / cream (accent #ECE3CE) */
  --sand-50:  #fbf9f4;
  --sand-100: #f5efe2;
  --sand-200: #ece3ce;   /* ACCENT */
  --sand-300: #ddccac;
  --sand-400: #cdb893;

  /* Terracotta (warm complementary accent) */
  --clay-50:  #faf0ea;
  --clay-100: #f1dacd;
  --clay-200: #e6c0aa;
  --clay-300: #d99e80;
  --clay-400: #be6a4a;   /* TERRACOTTA */
  --clay-500: #a85937;
  --clay-600: #8c4a2e;

  /* Ochre / gold (warm complementary accent) */
  --ochre-50:  #f8f0dc;
  --ochre-100: #eedfba;
  --ochre-200: #e2cb93;
  --ochre-300: #d9b878;
  --ochre-400: #c99a4e;  /* OCHRE */
  --ochre-500: #b07f34;
  --ochre-600: #8f6628;

  /* Ink / neutrals (secondary #141C14, slate #606676, body #777777) */
  --white:    #ffffff;
  --ink-50:   #f8faf8;
  --ink-100:  #f1f4f1;   /* off-white section bg */
  --ink-200:  #e3e9e3;   /* borders / hairlines */
  --ink-300:  #c7cbc9;
  --ink-400:  #9aa0a0;
  --ink-500:  #777777;   /* brand body grey (captions) */
  --ink-600:  #606676;   /* slate */
  --ink-700:  #3d443d;   /* body text (WCAG-safe on white) */
  --ink-800:  #2a312a;
  --ink-900:  #141c14;   /* near-black — headings / secondary */

  /* Typography (from ui-ux-pro-max → Literata; body swapped to Commissioner for Greek) */
  --font-display: "Tinos", Georgia, "Times New Roman", serif;
  --font-body: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.25rem;    /* 20 */
  --text-2xl:  1.5rem;     /* 24 */
  --text-3xl:  1.875rem;   /* 30 */
  --text-4xl:  2.25rem;    /* 36 */
  --text-5xl:  3rem;       /* 48 */
  --text-hero: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-normal: 1.65;
  --tracking-wide: 0.08em;   /* eyebrow/labels uppercase */

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

  /* Radii */
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
  --radius-xl: 0;  --radius-2xl: 0; --radius-full: 9999px;

  /* Shadows (soft, airy) */
  --shadow-sm:  none;
  --shadow-md:  none;
  --shadow-lg:  none;
  --shadow-card: none;

  /* Layout */
  --container-max: 1200px;
  --header-h: 76px;
  --transition: 200ms ease;

  /* ---------------------------------------------------------------------------
     LAYER 2 — SEMANTIC (purpose-driven; what components reference)
     ------------------------------------------------------------------------ */
  --color-primary: var(--blue-400);
  --color-primary-hover: var(--blue-600);
  --color-primary-contrast: var(--white);
  --color-accent: var(--sand-200);
  --color-accent-warm: var(--clay-400);   /* terracotta */
  --color-accent-gold: var(--ochre-400);  /* ochre */

  --color-bg: var(--white);
  --color-bg-soft: var(--ink-100);     /* alternating section background */
  --color-bg-sand: var(--sand-50);
  --color-surface: var(--white);
  --color-band: var(--blue-400);        /* CTA band background */
  --color-band-contrast: var(--white);
  --color-overlay: rgba(14, 51, 66, 0.42); /* hero image scrim */

  --color-heading: var(--ink-900);
  --color-text: var(--ink-700);         /* body — WCAG AA on white */
  --color-muted: var(--ink-600);
  --color-subtle: var(--ink-500);
  --color-border: var(--ink-200);
  --color-link: var(--blue-600);
  --color-link-hover: var(--blue-700);

  --color-focus: var(--blue-600);
  --color-error: #b3261e;
  --color-success: #2e7d52;
  --color-success-bg: #eaf5ee;
  --color-success-border: #bfe0cc;
  --color-error-bg: #fbeceb;
  --color-error-border: #f3c9c6;

  /* Composited overlays — alpha values can't reference a hex token directly,
     so the blended result is tokenised here instead. */
  --overlay-lightbox: rgba(14, 51, 66, 0.93);    /* blue-900 @93% */
  --overlay-header: rgba(251, 249, 244, 0.92);   /* sand-50 @92% — scrolled header */
  --overlay-header-menu: rgba(251, 249, 244, 0.97); /* sand-50 @97% — open mobile menu */
  --rule-on-dark: rgba(255, 255, 255, 0.18);
  --dot-idle-on-image: rgba(255, 255, 255, 0.45);
  --progress-track: rgba(255, 255, 255, 0.28);
  --shadow-arrow: 0 10px 28px rgba(20, 28, 20, 0.16);  /* ink-900 @16% */

  /* ---------------------------------------------------------------------------
     LAYER 3 — COMPONENT (specific UI pieces)
     ------------------------------------------------------------------------ */
  /* Buttons */
  --btn-bg: var(--color-primary);
  --btn-bg-hover: var(--color-primary-hover);
  --btn-text: var(--color-primary-contrast);
  --btn-radius: var(--radius-full);
  --btn-px: var(--space-6);
  --btn-py: var(--space-3);
  --btn-outline-border: var(--color-primary);

  /* Cards (room cards, review cards) */
  --card-bg: var(--white);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-card);
  --card-border: var(--color-border);

  /* Header / nav */
  --header-bg: rgba(255, 255, 255, 0.92);
  --header-border: var(--color-border);
  --nav-link: var(--color-heading);
  --nav-link-active: var(--color-primary);

  /* CTA band */
  --band-bg: var(--color-band);
  --band-text: var(--color-band-contrast);

  /* Footer */
  --footer-bg: var(--ink-900);
  --footer-text: var(--ink-200);
  --footer-heading: var(--white);
  --footer-link: var(--ink-300);

  /* Forms */
  --field-border: var(--ink-300);
  --field-border-focus: var(--color-primary);
  --field-radius: var(--radius-md);
  --field-bg: var(--white);

  /* Eyebrow / section label */
  --eyebrow-color: var(--color-primary);

  /* Icon (amenities, phosphor) */
  --icon-color: var(--color-primary);
}

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