/* Yite Environmental — design tokens
   Baseline: open-design/enterprise (structure) with client brand values.
   Roboto ships 100/300/400/500/700/900 — there is NO weight 600. */

:root {
  /* Brand / ink */
  --color-ink-900: #0E1B28;
  --color-ink-800: #16283B;
  --color-ink-700: #22384F;
  --color-ink-600: #35506B;
  --color-steel-500: #5B7085;
  --color-steel-300: #9AA9B7;

  /* Surfaces & lines */
  --color-surface: #FFFFFF;
  --color-surface-2: #F4F7F9;
  --color-surface-warm: #EEF2F5;
  --color-line-200: #D7DEE5;
  --color-line-100: #E8EDF1;

  /* Action — max two visible orange elements per viewport */
  --color-accent: #C2410C;
  --color-accent-hover: #9A330A;
  --color-accent-active: #7C2A08;
  --color-accent-on: #FFFFFF;
  --color-accent-light: #F27C3E; /* orange TEXT on slate; never as fill */
  --color-accent-soft: #FDF0E9;

  /* Status */
  --color-danger: #B91C1C;
  --color-caution: #A16207;
  --color-success: #15803D;

  /* Typography */
  --font-sans: Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
  --text-2xs: 12px;
  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 21px;
  --text-2xl: 26px;
  --text-3xl: 33px;
  --text-4xl: 42px;
  --text-5xl: 54px;
  --leading-tight: 1.10;
  --leading-snug: 1.28;
  --leading-body: 1.60;
  --leading-long: 1.72;
  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.14em;
  --measure-body: 68ch;
  --measure-lead: 54ch;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --section-y: 48px;

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* Elevation — borders first, shadow second */
  --elev-ring: 0 0 0 1px var(--color-line-200);
  --elev-card: 0 1px 2px rgba(14, 27, 40, .06), 0 8px 24px rgba(14, 27, 40, .07);
  --elev-card-hover: 0 2px 4px rgba(14, 27, 40, .08), 0 16px 40px rgba(14, 27, 40, .13);
  --elev-sticky-top: 0 1px 0 var(--color-line-200), 0 6px 20px rgba(14, 27, 40, .06);
  --elev-sticky-bottom: 0 -1px 0 var(--color-line-200), 0 -8px 24px rgba(14, 27, 40, .10);
  --elev-overlay: 0 24px 64px rgba(14, 27, 40, .28);
  --focus-ring: 0 0 0 3px rgba(194, 65, 12, .38), 0 0 0 1px var(--color-ink-800);

  /* Motion */
  --motion-fast: 140ms;
  --motion-base: 220ms;
  --motion-slow: 360ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Layout */
  --container-max: 1280px;
  --container-wide: 1440px;
  --container-narrow: 760px;
  --gutter: 20px;
  --header-h: 60px;
  --mobilebar-h: 60px;
}

@media (min-width: 640px) {
  :root {
    --gutter: 24px;
    --section-y: 68px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    --section-y: 96px;
    --header-h: 76px;
  }
}