/* ==========================================================================
   Green Marble AI — design tokens
   Single source of truth for colour, typography, space, radius, shadow,
   motion and layout. Nothing in this file selects an element; it only
   declares custom properties.

   Values are taken from the Figma source:
   Green Marble AI (Copy) → "Page 3 - Concept Direction (Sent to Client)"
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     1. Palette — raw brand values. Do not reference these directly in
        component CSS; use the semantic roles in section 2 instead.
     --------------------------------------------------------------------- */

  /* Greens */
  --gm-green-900: #003513; /* "Green Marble 01" — primary dark, hero + footer */
  --gm-green-800: #023d18; /* dark band variant */
  --gm-green-700: #02403c; /* deep teal — text on lime */
  --gm-green-600: #0a4a2a;
  --gm-teal-900: #063f34; /* "The solution" panel */
  --gm-green-100: #f4fcd2; /* pale lime wash band */
  --gm-green-050: #f5ffd0; /* CTA card fill */
  --gm-lime-wash: #ebfbae; /* halo behind illustrations */
  --gm-green-card: #0f4121; /* card on the dark band */

  /* Lime accent */
  --gm-lime-500: #c9f520; /* primary accent — CTAs, highlight words */
  --gm-lime-400: #d7f84f;
  --gm-lime-200: #e7fba0;
  /* The brand lime is unreadable on light bands (1.2:1). This is the same
     hue darkened until it clears AA on --gm-sand-050, for accent text that
     has to sit on a pale surface. */
  --gm-lime-700: #4e7a14;

  /* Neutrals */
  --gm-white: #ffffff;
  --gm-sand-050: #f7f6f2; /* warm off-white band */
  --gm-grey-050: #f2f2f2; /* cool light band */
  --gm-grey-100: #eaeaea; /* secondary button fill */
  --gm-grey-200: #e2e2e2;
  --gm-grey-400: #949494;
  --gm-grey-700: #494949; /* "Text Colour" — body copy on light */
  --gm-black: #000000;

  /* Alpha overlays (used over dark green) */
  --gm-alpha-white-06: rgb(255 255 255 / 0.06);
  --gm-alpha-white-10: rgb(255 255 255 / 0.1);
  --gm-alpha-white-16: rgb(255 255 255 / 0.16);
  --gm-alpha-white-70: rgb(255 255 255 / 0.7);
  --gm-alpha-grey-20: rgb(149 149 149 / 0.2); /* nav pill fill */
  --gm-alpha-teal-30: rgb(2 64 60 / 0.3); /* secondary button border */

  /* ---------------------------------------------------------------------
     2. Semantic roles — what component CSS should use.
     --------------------------------------------------------------------- */

  /* Surfaces */
  --surface-dark: var(--gm-green-900);
  --surface-dark-alt: var(--gm-teal-900);
  --surface-light: var(--gm-white);
  --surface-muted: var(--gm-sand-050);
  --surface-cool: var(--gm-grey-050);
  --surface-wash: var(--gm-green-100);
  --surface-accent: var(--gm-lime-500);
  --surface-raised: var(--gm-white);
  --surface-inset: var(--gm-alpha-white-06);

  /* Text */
  --text-on-dark: var(--gm-white);
  --text-on-dark-muted: var(--gm-alpha-white-70);
  --text-on-light: var(--gm-green-900);
  --text-body: var(--gm-grey-700);
  --text-accent: var(--gm-lime-500);
  --text-on-accent: var(--gm-green-700);
  --text-eyebrow-dark: var(--gm-grey-400);
  --text-eyebrow-light: rgb(255 255 255 / 0.55);

  /* Lines */
  --border-subtle: var(--gm-grey-200);
  --border-on-dark: var(--gm-alpha-white-16);
  --border-button: var(--gm-alpha-teal-30);

  /* Focus */
  --focus-ring: var(--gm-lime-500);
  --focus-ring-on-light: var(--gm-green-900);
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;

  /* ---------------------------------------------------------------------
     3. Typography
     Display/UI face: Neulis Sans (Adobe Fonts — see css/fonts.css).
     Body face:       DM Sans (SIL OFL, self-hosted).
     --------------------------------------------------------------------- */

  --font-display: "Neulis Sans", "DM Sans", system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type scale — px values mirror the Figma frame at 1440px.
     Fluid clamps keep the same intent down to 360px. */
  --step-display: clamp(2.25rem, 1.35rem + 3.9vw, 3.4375rem); /* 36 → 55 */
  --step-h2: clamp(2rem, 1.4rem + 2.6vw, 3rem); /* 32 → 48 */
  --step-h3: clamp(1.625rem, 1.2rem + 1.9vw, 2.1875rem); /* 26 → 35 */
  --step-h4: clamp(1.25rem, 1.05rem + 0.9vw, 1.6875rem); /* 20 → 27 */
  --step-h5: 1.125rem; /* 18 */
  --step-body-lg: 1.125rem; /* 18 */
  --step-body: 1rem; /* 16 */
  --step-body-sm: 0.875rem; /* 14 */
  --step-caption: 0.8125rem; /* 13 */
  --step-eyebrow: 0.8125rem; /* 13 */

  /* Line heights */
  --leading-display: 1.09; /* 60/55 */
  --leading-heading: 1.25; /* 60/48 */
  --leading-snug: 1.35;
  --leading-body: 1.5625; /* 25/16 — matches Figma body */
  --leading-flat: 1.25;

  /* Tracking */
  --tracking-display: -0.018em; /* −1px at 55px */
  --tracking-heading: 0;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.09em;

  /* ---------------------------------------------------------------------
     4. Space — 4px base grid
     --------------------------------------------------------------------- */
  --space-2xs: 0.25rem; /* 4  */
  --space-xs: 0.5rem; /* 8  */
  --space-sm: 0.75rem; /* 12 */
  --space-md: 1rem; /* 16 */
  --space-lg: 1.5rem; /* 24 */
  --space-xl: 2rem; /* 32 */
  --space-2xl: 3rem; /* 48 */
  --space-3xl: 4rem; /* 64 */
  --space-4xl: 5.5rem; /* 88 */
  --space-5xl: 7.5rem; /* 120 */

  /* Vertical rhythm between page sections */
  --section-pad-y: clamp(4rem, 2.5rem + 6.5vw, 7.5rem);
  --section-pad-y-tight: clamp(3rem, 2rem + 4.5vw, 5rem);

  /* ---------------------------------------------------------------------
     5. Radius
     --------------------------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 40px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
     6. Elevation
     --------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgb(0 53 19 / 0.06), 0 1px 3px rgb(0 53 19 / 0.04);
  --shadow-md: 0 4px 16px rgb(0 53 19 / 0.08);
  --shadow-lg: 0 12px 40px rgb(0 53 19 / 0.1);
  --shadow-float: 0 8px 28px rgb(0 53 19 / 0.12);

  /* ---------------------------------------------------------------------
     7. Layout
     --------------------------------------------------------------------- */
  --layout-max: 1110px; /* Figma content width: 1440 − 2 × 165 */
  --layout-wide: 1396px; /* nav pill width: 1440 − 2 × 22 */
  --layout-gutter: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  --header-height: 69px;
  --header-inset: 22px;

  /* ---------------------------------------------------------------------
     8. Motion
     --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;

  /* Z layers */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 500;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
  }
}