/* ============================================================
   DESIGN TOKENS — v3.2
   ============================================================
   Sections:
   1.  Fluid Engine      — shared interpolation config
   2.  Type Scale        — modular scale engine + step tokens
   3.  Spacing           — fluid base unit + derived scale
   4.  Colors            — brand primitives + semantic roles
   5.  Typography        — heading and body text tokens
   6.  Border Radius     — derived from spacing
   7.  Shadows           — elevation layer
   8.  Transitions       — easing curves and durations
   9.  Z-Index           — stacking layer scale
   10. Layout            — containers, section gaps, hero sizing
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   1. FLUID ENGINE
   Single interpolator shared by type and spacing.
   --fluid-progress scales from 0rem → 1rem as the viewport
   moves from --vp-min to --vp-max.

   EDIT THESE to change the responsive range:
   ──────────────────────────────────────────────────────────── */

:root {
   --vp-min: 360;
   /* Minimum viewport width (px, unitless) */
   --vp-max: 1120;
   /* Maximum viewport width (px, unitless) */

   --fluid-progress: clamp(0rem,
         (100vw - (var(--vp-min) * 1px)) / (var(--vp-max) - var(--vp-min)),
         1rem);
}


/* ────────────────────────────────────────────────────────────
   2. TYPE SCALE
   Modular scale driven by four config values.
   Change the four variables below; all steps recalculate.

   How the engine works:
   Each step's size = previous step's size × ratio.
   Negative steps divide by ratio instead.
   Step 0 is the true base — size at 1:1 scale.

   EDIT THESE to change the type scale:
   ──────────────────────────────────────────────────────────── */

:root {
   --fluid-min-size: 17;
   /* Base font size at min viewport (px, unitless) */
   --fluid-max-size: 20;
   /* Base font size at max viewport (px, unitless) */
   --fluid-min-ratio: 1.2;
   /* Modular scale ratio at min viewport           */
   --fluid-max-ratio: 1.667;
   /* Modular scale ratio at max viewport           */
}

/* ── Scale Engine — no need to edit below ─────────────────── */

:root {
   /* Step 0 — true base (font size ÷ 16 to convert px → rem) */
   --size-min-0: calc(var(--fluid-min-size) / 16);
   --size-max-0: calc(var(--fluid-max-size) / 16);
   --step-0: calc((var(--size-min-0) * 1rem) + (var(--size-max-0) - var(--size-min-0)) * var(--fluid-progress));

   /* Step −1: step 0 ÷ ratio */
   --size-min--1: calc(var(--size-min-0) / var(--fluid-min-ratio));
   --size-max--1: calc(var(--size-max-0) / var(--fluid-max-ratio));
   --step--1: calc((var(--size-min--1) * 1rem) + (var(--size-max--1) - var(--size-min--1)) * var(--fluid-progress));

   /* Step −2: step −1 ÷ ratio */
   --size-min--2: calc(var(--size-min--1) / var(--fluid-min-ratio));
   --size-max--2: calc(var(--size-max--1) / var(--fluid-max-ratio));
   --step--2: calc((var(--size-min--2) * 1rem) + (var(--size-max--2) - var(--size-min--2)) * var(--fluid-progress));

   /* Step 1: step 0 × ratio */
   --size-min-1: calc(var(--size-min-0) * var(--fluid-min-ratio));
   --size-max-1: calc(var(--size-max-0) * var(--fluid-max-ratio));
   --step-1: calc((var(--size-min-1) * 1rem) + (var(--size-max-1) - var(--size-min-1)) * var(--fluid-progress));

   /* Step 2: step 1 × ratio */
   --size-min-2: calc(var(--size-min-1) * var(--fluid-min-ratio));
   --size-max-2: calc(var(--size-max-1) * var(--fluid-max-ratio));
   --step-2: calc((var(--size-min-2) * 1rem) + (var(--size-max-2) - var(--size-min-2)) * var(--fluid-progress));

   /* Step 3: step 2 × ratio */
   --size-min-3: calc(var(--size-min-2) * var(--fluid-min-ratio));
   --size-max-3: calc(var(--size-max-2) * var(--fluid-max-ratio));
   --step-3: calc((var(--size-min-3) * 1rem) + (var(--size-max-3) - var(--size-min-3)) * var(--fluid-progress));

   /* Step 4: step 3 × ratio */
   --size-min-4: calc(var(--size-min-3) * var(--fluid-min-ratio));
   --size-max-4: calc(var(--size-max-3) * var(--fluid-max-ratio));
   --step-4: calc((var(--size-min-4) * 1rem) + (var(--size-max-4) - var(--size-min-4)) * var(--fluid-progress));

   /* Step 5: step 4 × ratio */
   --size-min-5: calc(var(--size-min-4) * var(--fluid-min-ratio));
   --size-max-5: calc(var(--size-max-4) * var(--fluid-max-ratio));
   --step-5: calc((var(--size-min-5) * 1rem) + (var(--size-max-5) - var(--size-min-5)) * var(--fluid-progress));

   /* Step 6: step 5 × ratio */
   --size-min-6: calc(var(--size-min-5) * var(--fluid-min-ratio));
   --size-max-6: calc(var(--size-max-5) * var(--fluid-max-ratio));
   --step-6: calc((var(--size-min-6) * 1rem) + (var(--size-max-6) - var(--size-min-6)) * var(--fluid-progress));
}


/* ────────────────────────────────────────────────────────────
   3. SPACING
   All spacing derived from a single fluid base unit.
   Change --sp-min and --sp-max to tighten or loosen
   the entire spatial rhythm proportionally.

   EDIT THESE to change spatial density:
   ──────────────────────────────────────────────────────────── */

:root {
   --sp-min: 1;
   /* Base spacing unit at min viewport (rem, unitless) */
   --sp-max: 2;
   /* Base spacing unit at max viewport (rem, unitless) */

   --base-sp: calc(var(--sp-min) * 1rem + (var(--sp-max) - var(--sp-min)) * var(--fluid-progress));
}

/* ── Spacing Scale — no need to edit below ────────────────── */

:root {
   /* At min viewport (360px):  base = 16px
     At max viewport (1120px): base = 32px */
   --space-xs: calc(var(--base-sp) * 0.25);
   /*   4px →   8px */
   --space-sm: calc(var(--base-sp) * 0.5);
   /*   8px →  16px */
   --space-md: var(--base-sp);
   /*  16px →  32px */
   --space-lg: calc(var(--base-sp) * 2);
   /*  32px →  64px */
   --space-xl: calc(var(--base-sp) * 3);
   /*  48px →  96px */
   --space-2xl: calc(var(--base-sp) * 4.5);
   /*  72px → 144px */
}


/* ────────────────────────────────────────────────────────────
   4. COLORS
   Two-layer system:
     Layer 1 — Brand primitives (swap these per project)
     Layer 2 — Semantic roles (stable across projects)

   This root file keeps the older shared semantic API alive so
   existing projects can continue importing it safely.

   On a new project: update Layer 1 values only.
   ──────────────────────────────────────────────────────────── */

:root {
   /* Layer 1: Brand primitives — COLOMBO GROUP
     Sky is the interactive accent; navy is the dominant brand. */
   --brand-primary: #A7E8FA;
   /* Anguilla Sky — accent  */
   --brand-primary-dark: #44C8EA;
   /* Sky deep — hover/press */
   --brand-secondary: #09233F;
   /* Colombo Navy — primary */
   --brand-secondary-deep: #061B31;
   /* Deep navy — footers    */
   --brand-accent: #E8F9FE;
   /* Sky soft — tints       */
   --brand-dark: #09233F;
   /* Navy (alias)           */
   --brand-neutral-dark: #09233F;
   /* Headings on light      */
   --brand-neutral-mid: #4D5A63;
   /* Body text grey         */
   --brand-neutral-light: #CFE8F1;
   /* Rule / hairline        */
   --brand-surface: #FFFFFF;
   /* Page background        */
   --brand-surface-raised: #FFFFFF;
   /* White                  */
   --brand-border: rgba(207, 232, 241, 0.6);
   /* Hairline rule       */
   --brand-accent-subtle: rgba(167, 232, 250, 0.24);
   /* Transparent sky    */
   --brand-overlay: rgba(9, 35, 63, 0.5);
   /* Navy overlay           */
}

:root {
   /* Layer 2: Semantic roles
     Reference these in all stylesheets, never Layer 1 directly. */
   --color-primary: var(--brand-primary);
   --color-primary-hover: var(--brand-primary-dark);
   --color-primary-dark: var(--brand-primary-dark);
   --color-primary-light: var(--brand-accent);
   --color-secondary: var(--brand-secondary);
   --color-secondary-deep: var(--brand-secondary-deep);
   --color-accent: var(--brand-accent);
   --color-dark: var(--brand-dark);

   --color-text: var(--brand-neutral-dark);
   --color-text-muted: var(--brand-neutral-mid);
   --color-text-subtle: var(--brand-neutral-light);
   --color-heading: var(--brand-neutral-dark);

   /* Compatibility: existing projects expect --color-surface to be
     the raised/white surface and --color-surface-alt to be the
     tinted page surface. */
   --color-surface: var(--brand-surface-raised);
   --color-surface-base: var(--brand-surface);
   --color-surface-alt: var(--brand-surface);
   --color-surface-raised: var(--brand-surface-raised);
   --color-border: var(--brand-border);
   --color-accent-subtle: var(--brand-accent-subtle);
   --color-overlay: var(--brand-overlay);

   /* Shadow color — feeds --shadow-* tokens in Section 7.
     Format: hue, saturation, lightness (no hsl() wrapper). */
   --shadow-color: 192deg, 65%, 55%;
   /* Derived from --brand-primary */
}


/* ────────────────────────────────────────────────────────────
   5. TYPOGRAPHY
   Two namespaces: --heading-* and --body-*.
   --step-* tokens remain available for one-off needs.
   ──────────────────────────────────────────────────────────── */

:root {
   /* Headings — each maps directly to a scale step */
   --heading-display: var(--step-5);
   /* Hero / display heading   */
   --heading-1: var(--step-4);
   /* Primary page heading     */
   --heading-2: var(--step-3);
   /* Section heading          */
   --heading-3: var(--step-2);
   /* Sub-section heading      */
   --heading-4: var(--step-1);
   /* Card / component heading */
   --heading-5: var(--step-0);
   /* Minor heading / label    */

   /* Body and UI text */
   --body-xl: var(--step-1);
   /* Lead / intro copy   */
   --body-lg: calc(var(--step-0) * 1.125);
   /* Large body          */
   --body-base: var(--step-0);
   /* Default body        */
   --body-sm: var(--step--1);
   /* Secondary / support */
   --body-xs: var(--step--2);
   /* Labels, captions    */
   --body-2xs: calc(var(--step--2) * 0.85);
   /* Legal, footnotes    */
}

body {
   font-size: var(--body-base);
}


/* ────────────────────────────────────────────────────────────
   6. BORDER RADIUS
   Derived from --space-sm so corners scale with spatial density.
   ──────────────────────────────────────────────────────────── */

:root {
   --radius-xs: calc(var(--space-sm) * 0.5);
   --radius-sm: calc(var(--space-sm) * 0.85);
   --radius-md: calc(var(--space-sm) * 1.325);
   --radius-lg: calc(var(--space-sm) * 2);
   --radius-xl: calc(var(--space-sm) * 3);
   --radius-full: 9999px;
}


/* ────────────────────────────────────────────────────────────
   7. SHADOWS
   --shadow-color is set per project in Section 4.
   Tinted shadows automatically reflect the brand palette.
   ──────────────────────────────────────────────────────────── */

:root {
   --shadow-xs: 0 1px 2px 0 hsl(var(--shadow-color) / 0.05);
   --shadow-sm: 0 1px 3px 0 hsl(var(--shadow-color) / 0.1),
      0 1px 2px -1px hsl(var(--shadow-color) / 0.1);
   --shadow-md: 0 4px 6px -1px hsl(var(--shadow-color) / 0.1),
      0 2px 4px -2px hsl(var(--shadow-color) / 0.1);
   --shadow-lg: 0 10px 15px -3px hsl(var(--shadow-color) / 0.1),
      0 4px 6px -4px hsl(var(--shadow-color) / 0.1);
   --shadow-xl: 0 20px 25px -5px hsl(var(--shadow-color) / 0.1),
      0 8px 10px -6px hsl(var(--shadow-color) / 0.1);
   --shadow-inner: inset 0 2px 4px 0 hsl(var(--shadow-color) / 0.05);
}


/* ────────────────────────────────────────────────────────────
   8. TRANSITIONS & ANIMATION
   Use --transition-* shorthand in most cases.
   Compose from --duration-* and --ease-* for custom needs.
   ──────────────────────────────────────────────────────────── */

:root {
   /* Easing curves */
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

   /* Durations */
   --duration-fast: 100ms;
   --duration-base: 200ms;
   --duration-slow: 300ms;
   --duration-slower: 500ms;

   /* Shorthand: duration + ease-out (most common pairing) */
   --transition-fast: var(--duration-fast) var(--ease-out);
   --transition-base: var(--duration-base) var(--ease-out);
   --transition-slow: var(--duration-slow) var(--ease-out);
   --transition-spring: var(--duration-slow) var(--ease-spring);
}


/* ────────────────────────────────────────────────────────────
   9. Z-INDEX
   Named layers rather than raw numbers.
   Avoid integers outside this scale.
   ──────────────────────────────────────────────────────────── */

:root {
   --z-below: -1;
   /* Behind page content           */
   --z-base: 0;
   /* Default document flow         */
   --z-raised: 10;
   /* Slightly elevated elements    */
   --z-dropdown: 100;
   /* Menus, poppers, tooltips      */
   --z-sticky: 200;
   /* Sticky headers / sidebars     */
   --z-overlay: 300;
   /* Background overlays/backdrops */
   --z-modal: 400;
   /* Dialogs and drawers           */
   --z-toast: 500;
   /* Notifications, alerts         */
}


/* ────────────────────────────────────────────────────────────
   10. LAYOUT
   Two groups:
     Containers  — max-width values for content regions
     Structural  — section and hero sizing, kept separate
                   from the spacing scale intentionally
   ──────────────────────────────────────────────────────────── */

:root {
   /* Containers — generic scale */
   --container-xs: 30rem;
   /* 480px  — narrow text, prose columns */
   --container-sm: 40rem;
   /* 640px  — narrow content, prose      */
   --container-md: 48rem;
   /* 768px  — small page layouts         */
   --container-lg: 64rem;
   /* 1024px — standard page width        */
   --container-xl: 80rem;
   /* 1280px — wide layouts               */
   --container-2xl: 90rem;
   /* 1440px — full-width / edge-to-edge  */

   /* Containers — semantic (Colombo Group)
     Use these instead of the generic scale when the role is fixed. */
   --container-inner: 87.5rem;
   /* 1400px — main content column      */
   --container-outer: 137.5rem;
   /* 2200px — ultra-wide outer cap     */

   /* Structural layout tokens
     Layout decisions, not spacing increments.
     Edit freely per project without affecting the spacing scale. */
   --section-gap: calc(var(--base-sp) * 4.5);
   /* Standard section padding  */
   --section-gap-lg: calc(var(--base-sp) * 7);
   /* Generous section padding  */
   --hero-min-height: calc(var(--base-sp) * 16);
   /* Minimum hero block height */
   --hero-offset: calc(var(--base-sp) * 10);
   /* Hero content offset       */
}