/* ==========================================================================
   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 step once, at 900px.

     Two fixed steps rather than fluid interpolation. Fluid clamp() produced
     computed sizes like 45.6 / 32.25 / 30.72 / 24.045px, which is off the
     declared scale at every width in between. The desktop values below are the
     Figma "Desktop" scale exactly (H1 48, H2 40, H3 32). The mobile values are
     the old clamp() floor, so headings between ~375px and 899px are up to 20%
     smaller than the old fluid scale produced (at 899px h1 was 39.9px, now 32).
     That is the accepted trade for landing on the declared steps. Step at 900px. */
  --text-h1-size: 2rem;      /* 32px */
  --text-h1-lh: 1.28;
  --text-h2-size: 1.75rem;   /* 28px */
  --text-h2-lh: 1.3;
  --text-h3-size: 1.5rem;    /* 24px */
  --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;

  /* 14px UI labels. Not part of the Figma "Desktop" scale — tags and buttons
     both sat awkwardly between micro (12) and caption (16). Kept as two
     tokens so they can be tuned independently. Preserve these if the rest of
     the file is ever re-synced from Figma. */
  --text-tag-size: 0.875rem; --text-tag-lh: 1.25rem;
  --text-btn-size: 0.875rem;

  /* ---------------------------------------------------------------------
     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;
}

/* Desktop step of the type scale — see the note on --text-h1-size above. */
@media (min-width: 900px) {
  :root {
    --text-h1-size: 3rem;     /* 48px — Figma Desktop H1 */
    --text-h2-size: 2.5rem;   /* 40px — Figma Desktop H2 */
    --text-h3-size: 2rem;     /* 32px — Figma Desktop H3 */
  }
}

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