/* ==========================================================================
   Semiotic — Design Tokens
   Source of truth: Default.tokens.json (Figma variables) + Figma text
   styles ("Desktop" / "Mobile" type scale) + Button component spec.
   Do not hardcode colors/type/spacing elsewhere — reference these tokens.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     Color — Primary (teal) scale
     --------------------------------------------------------------------- */
  --color-teal-950: #03191A;
  --color-teal-900: #063334;
  --color-teal-800: #094D4F;
  --color-teal-700: #0C6769;
  --color-teal-600: #108184;
  --color-teal-500: #3F9A9C;
  --color-teal-400: #6FB3B5;
  --color-teal-300: #9FCCCD;
  --color-teal-200: #CFE5E6;
  --color-teal-100: #E7F2F2;

  /* Color — Secondary (navy) scale */
  --color-navy-950: #061016;
  --color-navy-900: #0D212C;
  --color-navy-800: #133142;
  --color-navy-700: #1A4258;
  --color-navy-600: #21536F;
  --color-navy-500: #4D758B;
  --color-navy-400: #7997A8;
  --color-navy-300: #A6BAC5;
  --color-navy-200: #D2DCE2;
  --color-navy-100: #E8EDF0;

  /* Color — Typography */
  --color-text-title: #2B3240;
  --color-text-white: #FFFFFF;
  --color-text-description: #6B7079;
  --color-text-placeholder: #B5B8BC;

  /* Color — Backgrounds */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F9F9FA;
  --color-bg-red-light: #FEFBFC;

  /* Color — Borders */
  --color-border-divider: #F9F9FA;
  --color-border: #E8E9ED;

  /* Color — Semantic tag pairs (100 / 600), used for equipment tags,
     status chips and form feedback states */
  --color-magenta-100: #FEF5F7;  --color-magenta-600: #CA385D;
  --color-indigo-100:  #F3F4F6;  --color-indigo-600:  #151D42;
  --color-ultra-100:   #EAEBFA;  --color-ultra-600:   #2730B3;
  --color-green-100:   #E6F7EB;  --color-green-600:   #006924;
  --color-yellow-100:  #FFF9EA;  --color-yellow-600:  #9B791D;
  --color-orange-100:  #FFF4E9;  --color-orange-600:  #9C5717;
  --color-red-100:     #FFEAEA;  --color-red-600:     #CD1B18;
  --color-purple-100:  #EDE6FF;  --color-purple-600:  #2E0099;
  --color-blue-100:    #E9F4FD;  --color-blue-600:    #125891;
  --color-gray-100:    #ECEDEE;  --color-gray-600:    #484E59;

  /* ---------------------------------------------------------------------
     Typography
     --------------------------------------------------------------------- */
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Desktop: H1 48/64, H2 40/54, H3 32/42, H4 24/32 (Figma "Desktop" styles).
     Mobile "Heading" (24/32) === Desktop H4, so H4/Title/Body/Caption/Micro
     stay constant across breakpoints; H1–H3 interpolate fluidly. */
  --text-h1-size: clamp(2rem, 1.65rem + 1.5vw, 3rem);
  --text-h1-lh: 1.28;
  --text-h2-size: clamp(1.75rem, 1.49rem + 1.13vw, 2.5rem);
  --text-h2-lh: 1.3;
  --text-h3-size: clamp(1.5rem, 1.32rem + 0.75vw, 2rem);
  --text-h3-lh: 1.3;
  --text-h4-size: 1.5rem;   --text-h4-lh: 2rem;
  --text-title-size: 1.25rem; --text-title-lh: 1.75rem;
  --text-body-lg-size: 1.125rem; --text-body-lg-lh: 1.75rem;
  --text-body-size: 1rem;   --text-body-lh: 1.5rem;
  --text-caption-size: 1rem; --text-caption-lh: 1.25rem;
  --text-micro-size: 0.75rem; --text-micro-lh: 1rem;

  /* ---------------------------------------------------------------------
     Spacing — 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: 6rem;     /* 96 */
  --space-5xl: 8rem;     /* 128 */

  --container-max: 87.5rem;    /* 1400px */
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --section-pad-y: clamp(4rem, 3rem + 4vw, 7.5rem);

  /* ---------------------------------------------------------------------
     Radius — precise/technical, not oversized. Pills reserved for buttons
     and tags per the existing button component spec.
     --------------------------------------------------------------------- */
  --radius-sm: 0.5rem;   /* 8px  — inputs, small chips  */
  --radius-md: 0.75rem;  /* 12px — cards                */
  --radius-lg: 1.25rem;  /* 20px — large panels          */
  --radius-pill: 999px;  /* buttons, tags                */

  /* ---------------------------------------------------------------------
     Elevation — tinted with the brand navy rather than flat black
     --------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(6, 16, 22, 0.06);
  --shadow-md: 0 8px 24px -6px rgba(6, 16, 22, 0.12);
  --shadow-lg: 0 24px 48px -12px rgba(6, 16, 22, 0.20);

  /* ---------------------------------------------------------------------
     Motion
     --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 0.8, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 480ms;
}

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