/* RFID Smart Cabinet — design tokens. Navy = the cabinet and every action;
 * teal = the RF read, never a CTA. Text tokens pass AA
 * where used; *-decor = graphics only (hero SVG hardcodes #0C2A3E, #5CC8BD,
 * #009688). */

:root {
  /* Navy: 8.72:1 on white */
  --color-primary: #1B4F72;
  --color-primary-dark: #0F344D;
  --color-primary-tint: #EAF0F5;
  --color-primary-tint-strong: #DCE7F0;
  --color-ink: #0C2A3E;

  /* Signal teal */
  --color-accent: #00796B;
  --color-accent-dark: #00695C;
  --color-accent-decor: #009688;
  --color-accent-tint: #E6F4F2;

  /* Semantic */
  --color-success: var(--color-accent-dark);
  --color-error: #B42318;
  --color-error-tint: #FDEEEE;

  /* Slate neutrals */
  --color-white: #FFFFFF;
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F1F5F8;
  --color-bg-tertiary: #E7ECF1;
  --color-border: #DCE3E9;
  --color-border-input: #7A8794;
  --color-text-primary: #17242F;
  --color-text-secondary: #4A5A68;
  --color-text-muted: #5A6B79;
  --color-heading: var(--color-ink);
  --color-on-primary: #FFFFFF;
  --color-on-dark: #C8D5E0;
  --color-border-dark: #2B475C;

  /* Type: self-hosted Inter (css/fonts.css); fluid rem+vw steps */
  --font-sans: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* min(): a steeper ramp below ~360px keeps the FR headings in two lines at 320 */
  --text-display: clamp(1.9375rem, min(1.5rem + 3.2vw, 12.5vw - 0.5625rem), 3.25rem); /* 31 → 36 (375) → 52px */
  --text-h1: clamp(1.625rem, min(1.3rem + 2.25vw, 7.5vw + 0.125rem), 2.5rem);        /* 26 → 29 (375) → 40px */
  --text-h2: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);      /* 22 → 28px */
  --text-h3: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);     /* 18 → 20px */
  --text-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);   /* 17 → 19px */
  --text-body: 1rem;       /* 16px */
  --text-small: 0.875rem;  /* 14px */
  --text-micro: 0.75rem;   /* 12px — uppercase labels only */
  --text-metric: clamp(2rem, 1.6rem + 2vw, 2.75rem);        /* 32 → 44px */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-display: 1.08;
  --leading-tight: 1.18;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.65;

  --tracking-display: -0.015em;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.05em;

  /* Spacing — 8px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --section-space: var(--space-7); /* 48 / 64 / 96 / 120px */

  /* Controls 8px, surfaces 12px, pills full */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --shadow-button: 0 1px 2px rgba(12, 42, 62, 0.16);
  --shadow-card: 0 1px 2px rgba(12, 42, 62, 0.05), 0 2px 8px -2px rgba(12, 42, 62, 0.06);
  --shadow-raised: 0 1px 2px rgba(12, 42, 62, 0.06), 0 12px 24px -8px rgba(12, 42, 62, 0.14);
  --shadow-lg: 0 10px 15px -3px rgba(12, 42, 62, 0.1), 0 4px 6px -2px rgba(12, 42, 62, 0.05);
  --focus-ring: 3px solid var(--color-primary);

  --container-narrow: 640px;
  --container-standard: 960px;
  --container-wide: 1200px;

  --nav-height: 64px;
  --z-sticky: 200;
  --z-toast: 500;

  --ease-fast: 150ms ease-out;
  --ease-normal: 200ms ease-out;
}

/* Breakpoints: 640, 1024, 1280, 1440px — mobile first. */

@media (min-width: 640px) {
  :root {
    --section-space: var(--space-8);
  }
}

@media (min-width: 1024px) {
  :root {
    --section-space: var(--space-9);
  }
}

@media (min-width: 1440px) {
  :root {
    --section-space: calc(var(--space-9) + var(--space-5));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --color-border: #5A6B79;
    --color-text-secondary: #2E3B47;
  }
}