/* ==========================================================================
   Design tokens — Merchant Trade Guarantee Corporation
   Central source of truth for colour, type, spacing, motion and layout.
   ========================================================================== */

:root {
  /* ---- Brand colour: deep fintech navy + cyan/violet accent system ---- */
  --color-ink-950: #050914;
  --color-ink-900: #0a1128;
  --color-ink-850: #0d1730;
  --color-ink-800: #101d3d;
  --color-ink-700: #16264d;
  --color-ink-600: #203468;
  --color-ink-500: #34478a;

  --color-mist-50:  #f6f8fc;
  --color-mist-100: #eef1f9;
  --color-mist-200: #dfe5f2;
  --color-mist-300: #c7d0e6;
  --color-mist-400: #9aa8c9;
  /* Verified at 4.52:1 against white — used for small helper/meta text
     (form hints, tracker captions), not only large muted labels. */
  --color-mist-500: #67769c;
  --color-mist-600: #4c5a80;

  --color-cyan-300: #7fe6f2;
  --color-cyan-400: #45d3e8;
  --color-cyan-500: #17b9d6;
  /* cyan-600 doubles as accent-primary-strong — the colour used for
     eyebrow labels, links and icon accents set directly on a light
     surface. Verified at 4.56:1 against white (WCAG AA for normal text). */
  --color-cyan-600: #0c8197;

  --color-violet-300: #b6a8ff;
  --color-violet-400: #9682f2;
  --color-violet-500: #7c5cf0;
  --color-violet-600: #6842d6;

  --color-teal-400: #3fd6b0;
  /* Verified at 4.51:1 against white — used as readable text (success
     states, badges), not only as a decorative accent. */
  --color-teal-500: #16866c;

  --color-lime-400: #c8f24d;
  --color-lime-500: #a9e01f;

  --color-amber-400: #ffb648;
  /* Verified at 4.54:1 against white — used as readable text (warning
     badges), not only as a decorative accent. */
  --color-amber-500: #a7680c;

  --color-coral-400: #ff8b7a;
  /* Verified at 4.55:1 against white — used as readable text (error
     states, required-field marks), not only as a decorative accent. */
  --color-coral-500: #c74f3d;

  --color-white: #ffffff;
  --color-black: #000000;

  /* ---- Semantic roles (light surface, the dominant "clean" mode) ---- */
  --surface-page: var(--color-white);
  --surface-alt: var(--color-mist-50);
  --surface-raised: var(--color-white);
  --surface-sunken: var(--color-mist-100);
  --surface-dark: var(--color-ink-900);
  --surface-dark-alt: var(--color-ink-850);

  --text-primary: var(--color-ink-900);
  --text-secondary: var(--color-mist-600);
  --text-muted: var(--color-mist-500);
  --text-on-dark: var(--color-mist-100);
  --text-on-dark-muted: var(--color-mist-400);
  --text-link: var(--color-cyan-600);

  --border-subtle: var(--color-mist-200);
  --border-strong: var(--color-mist-300);
  --border-on-dark: rgba(255, 255, 255, 0.14);

  --accent-primary: var(--color-cyan-500);
  --accent-primary-strong: var(--color-cyan-600);
  --accent-secondary: var(--color-violet-500);
  --accent-tertiary: var(--color-teal-500);
  --accent-highlight: var(--color-lime-500);
  --accent-warning: var(--color-amber-500);
  --accent-danger: var(--color-coral-500);

  --focus-ring: 0 0 0 3px rgba(23, 185, 214, 0.45);

  /* ---- Gradients ---- */
  --gradient-hero: radial-gradient(120% 140% at 15% 10%, #14224a 0%, #0a1128 45%, #050914 100%);
  --gradient-panel: linear-gradient(155deg, rgba(23, 185, 214, 0.16) 0%, rgba(124, 92, 240, 0.12) 55%, rgba(5, 9, 20, 0) 100%);
  /* Uses a dedicated darker cyan (not --color-cyan-500) so white button
     text clears 4.5:1 at every point along the gradient — the brighter
     cyan-500 token stays reserved for decorative, non-text use. */
  --gradient-cta: linear-gradient(120deg, #108195 0%, var(--color-violet-500) 100%);
  --gradient-line: linear-gradient(90deg, rgba(23, 185, 214, 0) 0%, rgba(23, 185, 214, 0.9) 50%, rgba(124, 92, 240, 0) 100%);

  /* ---- Typography ---- */
  --font-sans: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-xs:   0.78rem;
  --fs-sm:   0.9rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.35rem;
  --fs-xl:   1.65rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.55rem;
  --fs-4xl:  3.3rem;

  --lh-tight: 1.12;
  --lh-snug: 1.32;
  --lh-normal: 1.55;
  --lh-loose: 1.75;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --ls-tight: 0;
  --ls-normal: 0;
  --ls-wide: 0;
  --ls-wider: 0;

  /* ---- Spacing scale (fluid) — increased for better rhythm ---- */
  --space-3xs: clamp(0.3rem, 0.28rem + 0.08vw, 0.375rem);
  --space-2xs: clamp(0.6rem, 0.55rem + 0.2vw, 0.75rem);
  --space-xs:  clamp(0.875rem, 0.8rem + 0.3vw, 1.1rem);
  --space-sm:  clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  --space-md:  clamp(1.45rem, 1.3rem + 0.65vw, 1.9rem);
  --space-lg:  clamp(2.1rem, 1.8rem + 1vw, 2.9rem);
  --space-xl:  clamp(3rem, 2.55rem + 1.7vw, 4.25rem);
  --space-2xl: clamp(4rem, 3.35rem + 2.2vw, 5.75rem);
  --space-3xl: clamp(5.25rem, 4.3rem + 3.4vw, 7.5rem);

  /* ---- Radius ---- */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(10, 17, 40, 0.06), 0 1px 1px rgba(10, 17, 40, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(10, 17, 40, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(10, 17, 40, 0.28);
  --shadow-glow-cyan: 0 0 0 1px rgba(23, 185, 214, 0.25), 0 20px 50px -18px rgba(23, 185, 214, 0.35);
  --shadow-glow-violet: 0 0 0 1px rgba(124, 92, 240, 0.25), 0 20px 50px -18px rgba(124, 92, 240, 0.35);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 480ms;
  --duration-loader: 900ms;

  /* ---- Layout ---- */
  --width-content: 76rem;
  --width-wide: 92rem;
  --width-prose: 44rem;
  --gutter: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  --header-height: 76px;
  --z-header: 100;
  --z-mega: 110;
  --z-overlay: 200;
  --z-loader: 300;
  --z-skiplink: 400;
}

@media (max-width: 46rem) {
  :root {
    --fs-xs: 0.75rem;
    --fs-sm: 0.86rem;
    --fs-base: 0.96rem;
    --fs-md: 1.05rem;
    --fs-lg: 1.2rem;
    --fs-xl: 1.42rem;
    --fs-2xl: 1.72rem;
    --fs-3xl: 2.05rem;
    --fs-4xl: 2.35rem;
    --header-height: 68px;
  }
}