/* Eagle Vision IT — Design Tokens
   Central source of truth for all design values.
   Import this file first in every stylesheet. */

:root {
  /* ── Colors ─────────────────────────────────────── */
  --color-primary:    #0A1628;   /* dark navy — headers, footer, nav */
  /* Brand red. Darkened ~8% from the original #E8342A so it clears WCAG
     AA 4.5:1 in all three places it carries text:
       white text on an accent button fill  4.87:1
       accent text on white                 4.87:1
       accent text on --color-surface       4.54:1
     #E8342A measured 4.24 / 4.24 / 3.95 and #DF3228 still failed on
     --color-surface at 4.23, which is why this is 8% and not 4%. */
  --color-accent:     #D63026;   /* brand red — primary CTAs */
  /* Accent red for text on the dark navy background (.section--dark).
     Darkening the accent for light backgrounds made it worse on dark ones:
     #D63026 on #0A1628 is 3.72:1 and fails AA for the 12px .eyebrow label.
     Lightened until it clears with headroom — 4.88:1 on navy. Light and
     dark backgrounds genuinely need different reds; one value cannot do
     both. (The brand blue needs no equivalent: #1DA1F2 is 6.42:1 on navy
     and only fails on light backgrounds.) */
  --color-accent-on-dark: #DE5951;
  --color-secondary:  #1DA1F2;   /* brand blue — graphics, icons, borders */
  /* Text-safe brand blue. --color-secondary is only 2.83:1 on white, so it
     fails AA 4.5:1 everywhere it carries small text (links, .eyebrow,
     .btn--ghost). Rather than redefine the brand colour, this is a separate
     token used ONLY for text; #1DA1F2 stays as-is for graphics and borders.
     Derived by scaling #1DA1F2 to 71% brightness — the first step that clears
     4.5:1 on all three light backgrounds the site puts text on:
       white        5.21:1
       --color-surface    4.85:1
       --color-surface-2  4.60:1
     Same approach already used for --color-accent above. */
  --color-secondary-text: #1572AC;
  --color-white:      #FFFFFF;
  --color-surface:    #F5F7FA;   /* light gray — section backgrounds */
  --color-surface-2:  #EEF1F6;   /* slightly darker surface */
  --color-text:       #172033;   /* near-black body text */
  --color-muted:      #667085;   /* secondary/supporting text */
  --color-border:     #E4E7EC;   /* card borders, dividers */
  --color-overlay:    rgba(10, 22, 40, 0.88); /* hero/card overlays */

  /* ── Typography ─────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */

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

  --leading-tight:  1.2;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose:  1.75;

  /* ── Spacing ─────────────────────────────────────── */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ── Layout ──────────────────────────────────────── */
  --container-max: 1200px;
  --container-wide: 1400px;
  --container-narrow: 800px;
  --container-padding: clamp(1rem, 5vw, 2.5rem);

  /* ── Borders & Radii ─────────────────────────────── */
  --radius-sm:   0.25rem;  /* 4px */
  --radius-md:   0.5rem;   /* 8px */
  --radius-lg:   0.75rem;  /* 12px */
  --radius-xl:   1rem;     /* 16px */
  --radius-2xl:  1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(10, 22, 40, 0.06);
  --shadow-md:  0 4px 12px rgba(10, 22, 40, 0.08);
  --shadow-lg:  0 8px 24px rgba(10, 22, 40, 0.10);
  --shadow-xl:  0 16px 40px rgba(10, 22, 40, 0.12);
  --shadow-card: 0 2px 8px rgba(10, 22, 40, 0.07), 0 8px 24px rgba(10, 22, 40, 0.06);

  /* ── Transitions ─────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Z-index ─────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-above:   10;
  --z-overlay: 50;
  --z-nav:    100;
  --z-modal:  200;

  /* ── Nav height (used for scroll-margin-top) ──────── */
  --nav-height: 72px;
}