/*
  ETECHTICS SOFTWARE SOLUTIONS — Design Tokens
  ---------------------------------------------
  Single source of truth for color, spacing, type, radius, shadow and
  breakpoints. Nothing else in this codebase should hard-code a color
  or spacing value — reference these custom properties instead, so a
  brand update (e.g. once the real logo file is verified) happens here
  and only here.

  STATUS: colors below are PROVISIONAL per the approved decision log —
  swap the three brand hex values in one place once the logo asset is
  confirmed. Nothing else needs to change.
*/

:root {
  /* ---------------------------------------------------------------
     Color — brand (provisional, pending logo verification)
  --------------------------------------------------------------- */
  --color-navy: #003266;
  --color-navy-600: #01447F; /* hover/active tint of navy */
  --color-navy-deep: #001B3D; /* darker end of the navy gradient bands */
  --color-orange: #FF9600;
  --color-orange-600: #E68600; /* hover/active tint of orange */
  --color-blue: #1F7BD9;
  --color-blue-600: #1868BA;
  --gradient-navy: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);

  /* Card accent palette — cycled across content-card grids (services,
     categories, models, "why us", AI clusters) so the site reads as
     colorful and varied rather than a single-tone SaaS template,
     matching the reference site's multi-color icon treatment. Purely
     decorative; carries no meaning per color. */
  --accent-1: #4CAF6D; /* green */
  --accent-2: #4C6FFF; /* blue-violet */
  --accent-3: #E8734A; /* orange-red */
  --accent-4: #9B59B6; /* purple */
  --accent-5: #2FB8AC; /* teal */

  /* Color — neutrals */
  --color-ink: #101828;
  --color-body-text: #344054;
  --color-muted: #667085;
  --color-border: #E4E7EC;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F7F9FC;
  --color-bg: #FFFFFF;
  --color-footer-bg: var(--color-navy);
  --color-footer-text: #E7EEF7;
  --color-footer-text-muted: #9FB6D0;

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

  /* ---------------------------------------------------------------
     Type
  --------------------------------------------------------------- */
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --font-size-xs: 0.8125rem;   /* 13px */
  --font-size-sm: 0.9375rem;   /* 15px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md: 1.125rem;    /* 18px */
  --font-size-lg: 1.375rem;    /* 22px */
  --font-size-xl: 1.75rem;     /* 28px */
  --font-size-2xl: 2.75rem;    /* 44px — measured against the reference site's 50px H1;
                                   44px keeps headline wrapping safe at 320px while closing
                                   most of the scale gap (Phase 12 visual-accuracy audit) */
  --line-height-base: 1.6;
  --line-height-tight: 1.25;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 800;

  /* ---------------------------------------------------------------
     Radius / shadow
  --------------------------------------------------------------- */
  --radius-sm: 5px; /* measured reference buttons at 4px; kept a hair softer for legibility */
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.16);

  /* ---------------------------------------------------------------
     Layout
  --------------------------------------------------------------- */
  --container-max: 1200px;
  --container-gutter: 24px;
  --navbar-height: 76px;

  /* ---------------------------------------------------------------
     Motion
  --------------------------------------------------------------- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  /* ---------------------------------------------------------------
     Z-index scale
  --------------------------------------------------------------- */
  --z-navbar: 100;
  --z-mega-menu: 110;
  --z-mobile-drawer: 120;
}

/*
  Breakpoints (documented here for consistency; plain CSS has no
  custom-media support without a build step, so @media queries
  elsewhere in this codebase use these values directly):

    --bp-sm:  360px   phone
    --bp-md:  768px   tablet
    --bp-lg:  1024px  small desktop / nav breakpoint
    --bp-xl:  1440px  wide desktop
*/

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