/* ============================================================
   Z PLUS ENTERPRISES — DESIGN TOKENS
   tokens.css
   ============================================================ */

:root {

  /* ── COLORS ─────────────────────────────────────────────── */

  /* Base */
  --c-bg:           #F5F4F0;   /* warm off-white — page base */
  --c-surface:      #FFFFFF;   /* pure white — cards/surfaces */
  --c-bg-alt:       #EEECEA;   /* slightly deeper — alternate sections */

  /* Text */
  --c-ink:          #0D0D0C;   /* near black — primary headings */
  --c-body:         #3A3A37;   /* dark grey — body copy */
  --c-muted:        #7A7A75;   /* medium grey — captions / meta */
  --c-subtle:       #B0AFA9;   /* light grey — dividers / placeholders */

  /* Brand */
  --c-primary:      #162B52;   /* deep navy — Z Plus brand primary */
  --c-primary-dark: #0E1C38;   /* darker navy — hover states */
  --c-primary-lt:   #EEF2FA;   /* light navy tint — backgrounds */
  --c-accent:       #B8840A;   /* warm gold — accent */
  --c-accent-lt:    #FBF4E3;   /* light gold tint */

  /* Verticals */
  --c-thinklane:    #EF3239;   /* Thinklane exact red from logo */
  --c-thinklane-dk: #D32930;   /* darker Thinklane — hover */
  --c-security:     #0F2234;   /* Security deep navy */
  --c-security-dk:  #081620;   /* darker security — hover */

  /* Borders */
  --c-border:       #E0DFDA;   /* subtle border — default */
  --c-border-strong:#C8C7C0;   /* stronger border */

  /* State */
  --c-success:      #1E6B3C;
  --c-error:        #C0392B;
  --c-focus:        #1A3BAF;

  /* Dark section backgrounds */
  --c-dark-bg:      #0C0C0B;   /* hero / CTA dark background */
  --c-dark-surface: #141413;

  /* ── TYPOGRAPHY ─────────────────────────────────────────── */

  /* Font families */
  --f-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* Fluid type scale — clamp(min, preferred, max) */
  --fs-xs:      clamp(0.6875rem, 1.2vw, 0.75rem);     /* 11–12px */
  --fs-sm:      clamp(0.8125rem, 1.4vw, 0.875rem);    /* 13–14px */
  --fs-base:    clamp(0.9375rem, 1.8vw, 1rem);        /* 15–16px */
  --fs-md:      clamp(1rem, 2vw, 1.125rem);            /* 16–18px */
  --fs-lg:      clamp(1.125rem, 2.2vw, 1.25rem);      /* 18–20px */
  --fs-xl:      clamp(1.25rem, 2.5vw, 1.5rem);        /* 20–24px */
  --fs-2xl:     clamp(1.5rem, 3vw, 2rem);              /* 24–32px */
  --fs-3xl:     clamp(1.75rem, 3.5vw, 2.25rem);       /* 28–36px */
  --fs-4xl:     clamp(2rem, 4vw, 2.75rem);            /* 32–44px */
  --fs-5xl:     clamp(2.5rem, 5vw, 3.5rem);           /* 40–56px */
  --fs-6xl:     clamp(3rem, 6vw, 4.5rem);             /* 48–72px */
  --fs-display: clamp(3.5rem, 8vw, 5.5rem);           /* 56–88px */

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --lh-loose:   1.8;

  /* Letter spacings */
  --ls-tight:   -0.03em;
  --ls-snug:    -0.02em;
  --ls-normal:  -0.01em;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;
  --ls-widest:   0.14em;

  /* ── SPACING ─────────────────────────────────────────────── */

  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-14:  56px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-28:  112px;
  --sp-32:  128px;
  --sp-40:  160px;
  --sp-48:  192px;

  /* Section padding (fluid) */
  --section-py:     clamp(64px, 9vw, 120px);
  --section-py-sm:  clamp(48px, 6vw, 80px);
  --section-py-lg:  clamp(96px, 12vw, 160px);

  /* ── LAYOUT ──────────────────────────────────────────────── */

  --container-max:  1320px;
  --container-px:   clamp(20px, 5.5vw, 80px);

  /* ── RADII ──────────────────────────────────────────────── */

  --radius-xs:  3px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* ── SHADOWS ─────────────────────────────────────────────── */

  --shadow-xs:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.12);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.16);

  /* ── TRANSITIONS ─────────────────────────────────────────── */

  --t-fast:   150ms ease;
  --t-base:   250ms ease;
  --t-slow:   400ms ease;
  --t-slower: 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── Z-INDEX ─────────────────────────────────────────────── */

  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  500;
  --z-modal:    1000;
}