/* ==========================================================================
   Ekoya Land Systems — Design Tokens
   Single source of truth for colour, type, spacing, radii, shadows, motion.
   ========================================================================== */

:root {
  /* ==========================================================================
     EKOYA — dark-teal & mineral system
     Deep teal · primary teal · active turquoise · soft aqua · mineral · sand · clay.
     Variable NAMES are retained from the original build so every component
     inherits the new palette; the meanings below are the source of truth.
     ========================================================================== */

  /* ---- Teal core (was "evergreen") ---- */
  --ek-evergreen-900: #062F33;  /* deep teal — darkest surfaces */
  --ek-evergreen:     #0B4A4F;  /* primary teal */
  --ek-evergreen-700: #0E5A5F;
  --ek-evergreen-600: #12857E;

  /* ---- Turquoise / aqua accent (was "moss") ---- */
  --ek-moss-700: #0E5A56;
  --ek-moss-600: #12857E;
  --ek-moss:     #19A7A2;       /* active turquoise — interactive accent */
  --ek-moss-200: #B9E1DC;       /* soft aqua */

  /* ---- Clay secondary accent (retained) ---- */
  --ek-clay-700: #8A4E2B;
  --ek-clay-600: #A65E38;
  --ek-clay:     #C9774A;       /* clay accent — used sparingly */
  --ek-clay-200: #ECD5C6;

  /* ---- Secondary teal-blue for data differentiation (was "water") ---- */
  --ek-water-700: #0B4A4F;
  --ek-water-600: #0E5A5F;
  --ek-water:     #2C8F9A;
  --ek-water-200: #C7E6E2;

  /* ---- Neutrals / surfaces ---- */
  --ek-bg:       #F5F3EC;       /* mineral white background */
  --ek-bg-2:     #EDE8DE;
  --ek-bg-3:     #E6DDD0;       /* warm sand */
  --ek-surface:  #FFFFFF;
  --ek-surface-2:#FBFAF5;

  /* ---- Text ---- */
  --ek-ink:      #102629;       /* dark teal-ink / body */
  --ek-ink-2:    #3B4B4D;       /* secondary text */
  --ek-ink-3:    #66716F;       /* muted / captions */
  --ek-on-dark:  #EAF3F1;
  --ek-on-dark-2:#A9C8C4;

  /* ---- Lines & focus ---- */
  --ek-line:     #DFDACE;
  --ek-line-2:   #CFC8BA;
  --ek-focus:    #12857E;       /* turquoise — focus / selected on light */
  --ek-focus-dark:#7FD6CE;      /* aqua — focus on dark */

  /* ---- Status / semantic (never colour-only; paired with icon+label) ---- */
  --ek-status-public:   #0E6E63;
  --ek-status-restricted:#A65E38;
  --ek-status-ongoing:  #2C8F9A;
  --ek-status-bg-public:   #D7ECE7;
  --ek-status-bg-restricted:#F3E5D8;
  --ek-status-bg-ongoing:  #D2EBE8;

  /* ---- Typography ---- */
  --ek-font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --ek-font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ek-fs-900: clamp(2.6rem, 1.6rem + 4.4vw, 4.6rem);   /* hero */
  --ek-fs-800: clamp(2.1rem, 1.5rem + 2.6vw, 3.3rem);   /* page title */
  --ek-fs-700: clamp(1.7rem, 1.35rem + 1.5vw, 2.4rem);  /* section h2 */
  --ek-fs-600: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);  /* h3 */
  --ek-fs-500: 1.2rem;
  --ek-fs-400: 1.0625rem;   /* body */
  --ek-fs-300: 0.9375rem;   /* small */
  --ek-fs-200: 0.8125rem;   /* micro / labels */

  --ek-lh-tight: 1.08;
  --ek-lh-snug:  1.28;
  --ek-lh-body:  1.62;

  --ek-ls-caps: 0.10em;

  /* ---- Spacing scale (8px base) ---- */
  --ek-1: 0.25rem;
  --ek-2: 0.5rem;
  --ek-3: 0.75rem;
  --ek-4: 1rem;
  --ek-5: 1.5rem;
  --ek-6: 2rem;
  --ek-7: 3rem;
  --ek-8: 4rem;
  --ek-9: 6rem;
  --ek-10: 8rem;

  /* ---- Layout ---- */
  --ek-maxw: 1200px;
  --ek-maxw-narrow: 760px;
  --ek-maxw-wide: 1360px;
  --ek-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --ek-section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);

  /* ---- Radii ---- */
  --ek-r-xs: 4px;
  --ek-r-sm: 8px;
  --ek-r-md: 14px;
  --ek-r-lg: 22px;
  --ek-r-pill: 999px;

  /* ---- Borders ---- */
  --ek-bw: 1px;
  --ek-border: 1px solid var(--ek-line);

  /* ---- Shadows ---- */
  --ek-shadow-sm: 0 1px 2px rgba(6, 47, 51, 0.07), 0 1px 3px rgba(6, 47, 51, 0.05);
  --ek-shadow-md: 0 6px 20px rgba(6, 47, 51, 0.10), 0 2px 6px rgba(6, 47, 51, 0.06);
  --ek-shadow-lg: 0 20px 48px rgba(6, 47, 51, 0.16), 0 6px 14px rgba(6, 47, 51, 0.08);

  /* ---- Motion ---- */
  --ek-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ek-dur-fast: 140ms;
  --ek-dur: 260ms;
  --ek-dur-slow: 480ms;

  /* ---- Aspect ratios ---- */
  --ek-ar-wide: 16 / 9;
  --ek-ar-card: 3 / 2;
  --ek-ar-square: 1 / 1;
  --ek-ar-portrait: 4 / 5;

  /* ---- Header height ---- */
  --ek-header-h: 104px;
}

@media (max-width: 640px) {
  :root { --ek-header-h: 82px; }
}