/* ==========================================================================
   Design Tokens — Protect Select
   Single source of truth for the brand system.
   All other stylesheets reference these tokens; no hard-coded values elsewhere.

   Load order: 1 of 5 (tokens → base → layout → components → utilities)
   ========================================================================== */

:root {
  /* -----------------------------------------------------------------------
     FOUNDATION TOKENS — Raw scales and primitives
     ----------------------------------------------------------------------- */

  /* Color: Brand cyan (derived from new logo dominant #46C8F2) */
  --color-brand-cyan-500: #46C8F2;
  --color-brand-cyan-600: #2FB6E8;
  --color-brand-cyan-400: #6FD6F5;
  --color-brand-cyan-300: #A3E5F9;

  /* Color: Brand sky (logo gradient endpoint) */
  --color-brand-sky-500: #64A5D9;
  --color-brand-sky-400: #89BBE3;

  /* Color: Navy */
  --color-navy-900: #0E2235;
  --color-navy-800: #122C42;
  --color-navy-700: #163A59;
  --color-navy-600: #1D4D73;

  /* Color: Ink (text on light backgrounds) */
  --color-ink-900: #10253A;
  --color-ink-700: #2E4A63;
  --color-ink-600: #516579;
  --color-ink-400: #8B9DAB;
  --color-ink-300: #A8B7C3;

  /* Color: Surfaces */
  --color-surface-white: #FFFFFF;
  --color-surface-ice: #F4FBFE;
  --color-surface-mist: #ECF5FA;
  --color-surface-cloud: #E3EEF4;

  /* Color: Borders */
  --color-border-soft: #CFE0EA;
  --color-border-medium: #A8C4D4;

  /* Color: Accents (use sparingly — trust ribbons, highlights, callouts) */
  --color-accent-sand-300: #E9D9A2;
  --color-accent-sand-200: #F4EDCF;
  --color-accent-rose-300: #EBC7D0;
  --color-accent-rose-200: #F5E0E5;
  --color-accent-mint-400: #7CB8A3;
  --color-accent-mint-300: #A5D4C3;

  /* Color: State */
  --color-success: #2D8B5F;
  --color-error: #C03B3B;
  --color-warning: #C08A1C;

  /* Color: Special */
  --color-text-inverse: #F8FCFF;
  --color-focus-ring: #163A59;
  --color-overlay: rgba(14, 34, 53, 0.6);

  /* Brand gradient */
  --gradient-brand: linear-gradient(135deg, #46C8F2 0%, #64A5D9 100%);

  /* -----------------------------------------------------------------------
     Typography
     ----------------------------------------------------------------------- */

  /* Font families */
  --font-heading: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Fira Code", "Consolas", monospace;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Font sizes (rem-based, 1rem = 16px browser default) */
  --text-xs: 0.75rem;       /* 12px */
  --text-sm: 0.875rem;      /* 14px */
  --text-base: 1.125rem;    /* 18px — body baseline, never below 17px on mobile */
  --text-lg: 1.25rem;       /* 20px */
  --text-xl: 1.5rem;        /* 24px */
  --text-2xl: 1.875rem;     /* 30px */
  --text-3xl: 2.25rem;      /* 36px */
  --text-4xl: 3rem;         /* 48px */
  --text-5xl: 3.75rem;      /* 60px */

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* Letter spacing */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.04em;

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

  /* -----------------------------------------------------------------------
     Border radii
     ----------------------------------------------------------------------- */
  --radius-sm: 0.5rem;      /*  8px */
  --radius-md: 0.875rem;    /* 14px */
  --radius-lg: 1.25rem;     /* 20px */
  --radius-full: 9999px;

  /* -----------------------------------------------------------------------
     Shadows
     ----------------------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(14, 34, 53, 0.06);
  --shadow-card: 0 4px 16px rgba(14, 34, 53, 0.08);
  --shadow-card-hover: 0 8px 32px rgba(14, 34, 53, 0.12);
  --shadow-lg: 0 12px 48px rgba(14, 34, 53, 0.14);
  --shadow-nav: 0 2px 8px rgba(14, 34, 53, 0.1);

  /* -----------------------------------------------------------------------
     Borders
     ----------------------------------------------------------------------- */
  --border-width: 1px;
  --border-width-thick: 2px;

  /* -----------------------------------------------------------------------
     Motion / transitions
     ----------------------------------------------------------------------- */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-out: cubic-bezier(0, 0, 0.2, 1);

  /* -----------------------------------------------------------------------
     Z-index scale
     ----------------------------------------------------------------------- */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* -----------------------------------------------------------------------
     Containers
     ----------------------------------------------------------------------- */
  --container-max: 70rem;        /* 1120px */
  --container-narrow: 48rem;     /* 768px */
  --container-wide: 80rem;       /* 1280px */
  --container-padding: var(--space-6);

  /* -----------------------------------------------------------------------
     Layout
     ----------------------------------------------------------------------- */
  --header-height: 7rem;         /* 112px */

  /* -----------------------------------------------------------------------
     SEMANTIC TOKENS — How values are used in the UI
     ----------------------------------------------------------------------- */

  /* Page */
  --page-bg: var(--color-surface-white);
  --surface-alt: var(--color-surface-ice);
  --section-bg-alt: var(--color-surface-ice);
  --section-bg-dark: var(--color-navy-900);

  /* Text */
  --text-primary: var(--color-ink-900);
  --text-secondary: var(--color-ink-600);
  --text-muted: var(--color-ink-400);
  --text-on-dark: var(--color-text-inverse);
  --text-on-cyan: var(--color-navy-900);

  /* Links */
  --link-color: var(--color-brand-cyan-600);
  --link-hover: var(--color-brand-cyan-500);

  /* Borders */
  --border-subtle: var(--color-border-soft);
  --border-default: var(--color-border-medium);

  /* Actions */
  --action-primary-bg: var(--color-brand-cyan-500);
  --action-primary-text: var(--color-navy-900);
  --action-primary-hover: var(--color-brand-cyan-600);
  --action-secondary-bg: var(--color-navy-900);
  --action-secondary-text: var(--color-text-inverse);
  --action-secondary-hover: var(--color-navy-700);

  /* Focus */
  --focus-ring-color: var(--color-focus-ring);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* Header / Footer */
  --header-bg: var(--color-navy-900);
  --header-text: var(--color-text-inverse);
  --footer-bg: var(--color-navy-900);
  --footer-text: var(--color-text-inverse);

  /* Cards */
  --card-bg: var(--color-surface-white);
  --card-border: var(--color-border-soft);
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-card);
  --card-shadow-hover: var(--shadow-card-hover);

  /* Forms */
  --input-bg: var(--color-surface-white);
  --input-border: var(--color-border-medium);
  --input-border-focus: var(--color-brand-cyan-500);
  --input-radius: var(--radius-sm);
  --input-padding: var(--space-3) var(--space-4);
}

/* ===========================================================================
   BREAKPOINTS — Documented for use in @media queries (mobile-first, min-width)

   --bp-sm:  36rem   (576px)  — Large phones / small tablets
   --bp-md:  48rem   (768px)  — Tablets
   --bp-lg:  64rem   (1024px) — Small desktops / landscape tablets
   --bp-xl:  80rem   (1280px) — Standard desktops
   --bp-2xl: 90rem   (1440px) — Wide desktops

   CSS custom properties cannot be used inside @media queries,
   so these values are documented here as the canonical reference.
   =========================================================================== */