/* ====== Integrity Security — Design Tokens ======
   Palette is built directly from the Integrity Security logo:
   - Green wordmark  ➜ primary brand color
   - Blue "SECURITY" ➜ secondary / accent
   - Deep navy/charcoal text on clean off-white surfaces
   - Dark theme uses the same hues, deepened for night-mode contrast
============================================================ */
:root {
  /* Fluid type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3rem, 0.5rem + 7vw, 7rem);

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

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Content widths */
  --content-narrow: 680px;
  --content-default: 1040px;
  --content-wide: 1240px;

  /* Fonts */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Apple Garamond', Georgia, serif;
  --font-body: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ====== Light theme: clean white + brand color ====== */
:root,
[data-theme='light'] {
  /* Surfaces — clean white + soft off-white tinted toward the brand */
  --color-bg: #ffffff;
  --color-surface: #f4f8f1;        /* faintest green wash */
  --color-surface-2: #ffffff;
  --color-surface-offset: #e8f1e2;
  --color-surface-offset-2: #d7e7cf;
  --color-surface-dynamic: #c5dbb8;
  --color-divider: #e1ebd9;
  --color-border: #c8d6c0;

  /* Text — deep navy charcoal */
  --color-text: #0e1a2b;
  --color-text-muted: #50617a;
  --color-text-faint: #8a96a7;
  --color-text-inverse: #ffffff;

  /* Primary — Integrity green (logo wordmark) */
  --color-primary: #5CA000;
  --color-primary-hover: #4E8B00;
  --color-primary-active: #3F7100;
  --color-primary-soft: #e6f3d6;
  --color-primary-highlight: #d4ecbe;

  /* Secondary — Integrity blue (logo "SECURITY") */
  --color-secondary: #147FAE;
  --color-secondary-hover: #0F6A93;
  --color-secondary-active: #0B5577;
  --color-secondary-soft: #e0f1f8;
  --color-secondary-highlight: #c8e6f2;

  /* Ink — deep navy charcoal for high-contrast surfaces (industries, footer) */
  --color-ink: #0c1a2a;
  --color-ink-2: #122336;

  /* Status */
  --color-success: #2f8a3a;
  --color-warning: #b07b14;
  --color-error: #b03434;

  /* Shadows tuned for white surfaces */
  --shadow-sm: 0 1px 2px rgba(14, 26, 43, 0.06);
  --shadow-md: 0 8px 22px rgba(14, 26, 43, 0.09);
  --shadow-lg: 0 20px 44px rgba(14, 26, 43, 0.14);

  /* Brand gradient — green ➜ blue */
  --gradient-brand: linear-gradient(135deg, #5CA000 0%, #2E9DA7 55%, #147FAE 100%);
  --gradient-brand-soft: linear-gradient(135deg, #e6f3d6 0%, #e0f1f8 100%);
}

/* ====== Dark theme: deep navy night, brand accents kept bright ====== */
[data-theme='dark'] {
  --color-bg: #08131f;
  --color-surface: #0d1d2c;
  --color-surface-2: #112336;
  --color-surface-offset: #152a3f;
  --color-surface-offset-2: #1b3349;
  --color-surface-dynamic: #233f57;
  --color-divider: #1a2e44;
  --color-border: #284360;

  --color-text: #eaf2ea;
  --color-text-muted: #9bb0bf;
  --color-text-faint: #5d7287;
  --color-text-inverse: #08131f;

  --color-primary: #7DC328;
  --color-primary-hover: #8DD83A;
  --color-primary-active: #9AE54E;
  --color-primary-soft: #16321a;
  --color-primary-highlight: #1f4624;

  --color-secondary: #3FB1DC;
  --color-secondary-hover: #5BC3EB;
  --color-secondary-active: #7AD2F1;
  --color-secondary-soft: #122a3a;
  --color-secondary-highlight: #19384c;

  --color-ink: #050d16;
  --color-ink-2: #081424;

  --color-success: #6cba6f;
  --color-warning: #d8a44a;
  --color-error: #e26a6a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 20px 44px rgba(0, 0, 0, 0.65);

  --gradient-brand: linear-gradient(135deg, #7DC328 0%, #2EB0C8 55%, #3FB1DC 100%);
  --gradient-brand-soft: linear-gradient(135deg, #16321a 0%, #122a3a 100%);
}

/* Honor OS-level dark preference when no explicit theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #08131f;
    --color-surface: #0d1d2c;
    --color-surface-2: #112336;
    --color-surface-offset: #152a3f;
    --color-surface-offset-2: #1b3349;
    --color-surface-dynamic: #233f57;
    --color-divider: #1a2e44;
    --color-border: #284360;
    --color-text: #eaf2ea;
    --color-text-muted: #9bb0bf;
    --color-text-faint: #5d7287;
    --color-text-inverse: #08131f;
    --color-primary: #7DC328;
    --color-primary-hover: #8DD83A;
    --color-primary-active: #9AE54E;
    --color-primary-soft: #16321a;
    --color-primary-highlight: #1f4624;
    --color-secondary: #3FB1DC;
    --color-secondary-hover: #5BC3EB;
    --color-secondary-active: #7AD2F1;
    --color-secondary-soft: #122a3a;
    --color-secondary-highlight: #19384c;
    --color-ink: #050d16;
    --color-ink-2: #081424;
    --gradient-brand: linear-gradient(135deg, #7DC328 0%, #2EB0C8 55%, #3FB1DC 100%);
    --gradient-brand-soft: linear-gradient(135deg, #16321a 0%, #122a3a 100%);
  }
}