/* ============================================================
   PRIVONIX TECHNOLOGIES: DESIGN TOKENS v2
   Rebuilt for agency identity. Black/white brand.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900&display=swap');

:root {

  /* ----------------------------------------------------------
     BRAND PALETTE (Monochrome & Precision Tech Slate)
     60%: Crisp white / deep obsidian backgrounds
     30%: Slate / neutral surfaces and typography
     10%: High-contrast monochrome & emerald telemetry
     ---------------------------------------------------------- */

  /* Backgrounds — refined off-white, not clinical pure-white */
  --c-bg:              #FAFBFC;
  --c-bg-subtle:       #F4F5F7;
  --c-bg-dark:         #090A0F;
  --c-bg-dark-2:       #0E1017;
  --c-bg-dark-card:    #131622;
  --c-bg-dark-border:  rgba(255,255,255,0.08);

  /* Surfaces */
  --c-surface:         #FAFBFC;
  --c-surface-subtle:  #F0F1F3;

  /* Text */
  --c-text:            #090A0F;
  --c-text-2:          #3F3F46;
  --c-text-3:          #71717A;
  --c-text-4:          #A1A1AA;
  --c-text-inv:        #FFFFFF;
  --c-text-inv-2:      rgba(255,255,255,0.78);
  --c-text-inv-3:      rgba(255,255,255,0.55);

  /* Borders */
  --c-border:          #E4E4E7;
  --c-border-2:        #D4D4D8;

  /* Accent: High-contrast monochrome & subtle tech slate - ZERO purple */
  --c-accent:          #090A0F;
  --c-accent-hover:    #27272A;
  --c-accent-subtle:   #F4F4F5;
  --c-accent-border:   #E4E4E7;

  /* Semantic */
  --c-success:         #10B981;
  --c-danger:          #EF4444;

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */
  --font:             'Inter', system-ui, -apple-system, sans-serif;

  /* Scale */
  --t-xs:              0.6875rem;   /* 11px */
  --t-sm:              0.8125rem;   /* 13px */
  --t-base:            0.9375rem;   /* 15px */
  --t-md:              1rem;        /* 16px */
  --t-lg:              1.125rem;    /* 18px */
  --t-xl:              1.25rem;     /* 20px */
  --t-2xl:             1.5rem;      /* 24px */
  --t-3xl:             1.875rem;    /* 30px */
  --t-4xl:             2.25rem;     /* 36px */
  --t-5xl:             3rem;        /* 48px */
  --t-6xl:             3.75rem;     /* 60px */
  --t-7xl:             4.5rem;      /* 72px */

  /* Weights */
  --fw-light:          300;
  --fw-regular:        400;
  --fw-medium:         500;
  --fw-semibold:       600;
  --fw-bold:           700;
  --fw-extrabold:      800;
  --fw-black:          900;

  /* Line heights */
  --lh-tight:          1.15;
  --lh-snug:           1.3;
  --lh-normal:         1.5;
  --lh-relaxed:        1.68;

  /* Letter spacing */
  --ls-tight:          -0.03em;
  --ls-snug:           -0.02em;
  --ls-normal:         0;
  --ls-wide:           0.03em;
  --ls-wider:          0.06em;
  --ls-widest:         0.12em;

  /* ----------------------------------------------------------
     SPACING
     ---------------------------------------------------------- */
  --s-1:    0.25rem;
  --s-2:    0.5rem;
  --s-3:    0.75rem;
  --s-4:    1rem;
  --s-5:    1.25rem;
  --s-6:    1.5rem;
  --s-8:    2rem;
  --s-10:   2.5rem;
  --s-12:   3rem;
  --s-14:   3.5rem;
  --s-16:   4rem;
  --s-20:   5rem;
  --s-24:   6rem;
  --s-28:   7rem;
  --s-32:   8rem;

  /* ----------------------------------------------------------
     LAYOUT
     Fluid wide layout: Prevents massive margin gaps on wide screens
     ---------------------------------------------------------- */
  --max-w:       min(1520px, 94vw);
  --max-w-wide:  min(1620px, 96vw);
  --max-w-text:  720px;
  --nav-h:       70px;
  --gutter:      clamp(1.25rem, 2.5vw, 2.5rem);

  /* ----------------------------------------------------------
     RADII
     ---------------------------------------------------------- */
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    12px;
  --r-xl:    16px;
  --r-2xl:   24px;
  --r-full:  9999px;

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */
  --sh-xs:   0 1px 2px rgba(0,0,0,0.04);
  --sh-sm:   0 2px 8px rgba(0,0,0,0.06);
  --sh-md:   0 4px 16px rgba(0,0,0,0.08);
  --sh-lg:   0 12px 32px rgba(0,0,0,0.10);
  --sh-xl:   0 24px 48px rgba(0,0,0,0.12);
  --sh-card-hover: 0 20px 40px rgba(0, 0, 0, 0.4);

  /* ----------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------- */
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --tr-fast:      120ms var(--ease);
  --tr-base:      200ms var(--ease);
  --tr-slow:      350ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --tr-fast: 0ms;
    --tr-base: 0ms;
    --tr-slow: 0ms;
  }
}