/* ==========================================================================
   TechSerks Group — corporate site design tokens
   Rev 2.0 · 04 September 2026
   Derived from the TechSerks Master Design System (tokens.css Rev 1.0) and
   extended for the corporate homepage: fluid type roles, container widths,
   section rhythm, motion timing and a fourth (neutral) division accent.

   Every layout value in site.css references a token from this file.
   ========================================================================== */

:root {
  /* ---------- 1. Brand core: TechSerks Red ------------------------------- */
  --ts-red-050: #FBEDEC;
  --ts-red-100: #F6D8D6;
  --ts-red-200: #EBAFAC;
  --ts-red-300: #DE8079;
  --ts-red-400: #BF4C43;
  --ts-red-500: #D0342F;
  --ts-red-600: #B12120;   /* PRIMARY BRAND RED — buttons, logo, links */
  --ts-red-700: #8C1A19;
  --ts-red-800: #661312;
  --ts-red-900: #400C0B;

  /* ---------- 2. Warm neutrals (biased a half-step toward the red) --------- */
  --ts-neutral-000: #FFFFFF;
  --ts-neutral-025: #FAF8F7;
  --ts-neutral-050: #F6F5F4;
  --ts-neutral-100: #EDEAE8;
  --ts-neutral-200: #E6E4E2;
  --ts-neutral-300: #CFCBC8;
  --ts-neutral-400: #A9A5A4;
  --ts-neutral-500: #666267;   /* raised from #7C787D, which failed AA on every site surface */
  --ts-neutral-600: #5B5B61;
  --ts-neutral-700: #3A3A3F;
  --ts-neutral-800: #232327;
  --ts-neutral-900: #141416;
  --ts-neutral-950: #0A0A0B;   /* Ink */

  /* ---------- 3. Division accents (one each, used sparingly) -------------- */
  --ts-div-it:            var(--ts-red-600);   /* IT Repairs & Consultancy: red, by design */
  --ts-div-it-soft:       var(--ts-red-050);
  --ts-div-web:           #3D4FD9;             /* Web Solutions & AI Automations: indigo */
  --ts-div-web-soft:      #EAECFC;
  --ts-div-academy:       #8A5002;             /* Academy: amber. Darkened from #9C5B02, which was 4.48:1 on the warm-100 audience surface */
  --ts-div-academy-soft:  #FBF0DC;
  --ts-div-software:      var(--ts-neutral-600); /* Software: neutral until launch */
  --ts-div-software-soft: var(--ts-neutral-100);

  /* ---------- 4. Semantic status ---------------------------------------- */
  --ts-success: #1F7A4C;
  --ts-warning: #925C00;
  --ts-danger:  #B12120;
  --ts-info:    #2A6F97;

  /* ---------- 5. Surface roles (light) ---------------------------------- */
  --ts-canvas:          var(--ts-neutral-000);
  --ts-canvas-warm:     var(--ts-neutral-025);
  --ts-surface:         var(--ts-neutral-050);
  --ts-surface-sunken:  var(--ts-neutral-100);
  --ts-surface-deep:    var(--ts-neutral-200);
  --ts-hairline:        var(--ts-neutral-200);
  --ts-hairline-strong: var(--ts-neutral-300);
  --ts-border-control:  #86827A;   /* 3.8:1 on white, 3.2:1 on the deepest surface: control boundaries (WCAG 1.4.11) */
  --ts-rule:            var(--ts-neutral-950);

  --ts-text:        var(--ts-neutral-950);
  --ts-text-muted:  var(--ts-neutral-600);   /* 7.0:1 on white */
  --ts-text-faint:  var(--ts-neutral-500);   /* 5.99:1 on white, 4.72:1 on the darkest surface it sits on */
  --ts-text-invert: var(--ts-neutral-000);
  --ts-link:        var(--ts-red-700);
  --ts-link-hover:  var(--ts-red-600);

  --ts-cta-bg:        var(--ts-red-600);
  --ts-cta-bg-hover:  var(--ts-red-500);
  --ts-cta-bg-active: var(--ts-red-700);
  --ts-cta-text:      var(--ts-neutral-000);
  --ts-focus-ring:    var(--ts-red-500);
  --ts-selection-bg:  var(--ts-red-100);

  --ts-accent:      var(--ts-div-it);
  --ts-accent-soft: var(--ts-div-it-soft);

  /* ---------- 6. Typography --------------------------------------------- */
  --ts-font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ts-font-body:    "Inter", "Inter Fallback", -apple-system, "Segoe UI", Arial, sans-serif;
  --ts-font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Fluid roles. Each clamp is tuned so the display sizes peak at ~1440px
     rather than continuing to grow on ultra-wide screens. */
  --ts-size-display-xl: clamp(2.5rem, 1.25rem + 3vw, 4.25rem);     /* 40 → 68, 63 at 1440 */
  --ts-size-display-l:  clamp(2rem, 1.35rem + 2.6vw, 3.25rem);    /* 32 → 52 */
  --ts-size-h1:         clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);   /* 28 → 40 */
  --ts-size-h2:         clamp(1.5rem, 1.2rem + 1.2vw, 2rem);      /* 24 → 32 */
  --ts-size-h3:         clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);  /* 20 → 24 */
  --ts-size-h4:         1.25rem;
  --ts-size-body-l:     clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); /* 17 → 19 */
  --ts-size-body:       1rem;
  --ts-size-small:      0.875rem;
  --ts-size-caption:    0.75rem;
  --ts-size-micro:      0.6875rem;

  --ts-leading-tight:   1.02;
  --ts-leading-snug:    1.18;
  --ts-leading-heading: 1.25;
  --ts-leading-normal:  1.55;
  --ts-leading-relaxed: 1.65;

  --ts-track-display: -0.035em;
  --ts-track-heading: -0.02em;
  --ts-track-body:     0;
  --ts-track-eyebrow:  0.14em;
  --ts-track-mono:     0.02em;

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

  --ts-measure:        62ch;   /* running text */
  --ts-measure-narrow: 44ch;   /* lead copy beside a headline */

  /* ---------- 7. Space (4px base) --------------------------------------- */
  --ts-space-1:  0.25rem;
  --ts-space-2:  0.5rem;
  --ts-space-3:  0.75rem;
  --ts-space-4:  1rem;
  --ts-space-5:  1.5rem;
  --ts-space-6:  2rem;
  --ts-space-7:  3rem;
  --ts-space-8:  4rem;
  --ts-space-9:  6rem;
  --ts-space-10: 8rem;

  --ts-section-y:       clamp(3.5rem, 3rem + 4vw, 7rem);    /* standard section rhythm */
  --ts-section-y-tight: clamp(2.5rem, 2rem + 3vw, 5rem);
  --ts-section-y-hero:  clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --ts-gutter:          clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);

  --ts-container:        75rem;   /* 1200 */
  --ts-container-wide:   84rem;   /* 1344 — division panels */
  --ts-container-narrow: 47.5rem; /* 760 */

  --ts-header-h: 4.75rem;         /* 76, unchanged on scroll so layout never shifts */
  --ts-header-h-compact: 3.75rem; /* 60 on mobile */

  /* ---------- 8. Radius ---------------------------------------------------- */
  --ts-radius-xs: 3px;
  --ts-radius-sm: 6px;
  --ts-radius-md: 10px;
  --ts-radius-lg: 14px;
  --ts-radius-pill: 999px;

  /* ---------- 9. Elevation ------------------------------------------------- */
  --ts-shadow-1: 0 1px 2px rgba(10,10,11,.06), 0 1px 1px rgba(10,10,11,.04);
  --ts-shadow-2: 0 6px 16px rgba(10,10,11,.08), 0 2px 4px rgba(10,10,11,.05);
  --ts-shadow-3: 0 18px 44px rgba(10,10,11,.14), 0 3px 10px rgba(10,10,11,.06);
  --ts-shadow-cta: 0 6px 18px rgba(177,33,32,.24);
  --ts-shadow-cta-hover: 0 10px 24px rgba(177,33,32,.30);

  /* ---------- 10. Motion --------------------------------------------------- */
  --ts-ease:      cubic-bezier(.2,.8,.2,1);
  --ts-ease-out:  cubic-bezier(.16,1,.3,1);
  --ts-ease-in:   cubic-bezier(.4,0,1,1);
  --ts-dur-micro: 150ms;
  --ts-dur-base:  240ms;
  --ts-dur-slow:  420ms;
  --ts-dur-entrance: 640ms;

  /* ---------- 11. Layering ------------------------------------------------- */
  --ts-z-base: 0;
  --ts-z-raised: 10;
  --ts-z-sticky: 100;
  --ts-z-header: 200;
  --ts-z-overlay: 300;
  --ts-z-skip: 1000;

  /* ---------- 12. Motif ---------------------------------------------------- */
  --ts-lattice-ink: rgba(10,10,11,.085);
  --ts-lattice-ink-soft: rgba(10,10,11,.06);
  --ts-lattice-size-x: 96px;
  --ts-lattice-size-y: 56px;
}

/* Division scopes: swap the accent role only. CTAs stay TechSerks Red. */
[data-division="it"]       { --ts-accent: var(--ts-div-it);       --ts-accent-soft: var(--ts-div-it-soft); }
[data-division="web"]      { --ts-accent: var(--ts-div-web);      --ts-accent-soft: var(--ts-div-web-soft); }
[data-division="academy"]  { --ts-accent: var(--ts-div-academy);  --ts-accent-soft: var(--ts-div-academy-soft); }
[data-division="software"] { --ts-accent: var(--ts-div-software); --ts-accent-soft: var(--ts-div-software-soft); }

@media (prefers-reduced-motion: reduce) {
  :root {
    --ts-dur-micro: 0ms;
    --ts-dur-base: 0ms;
    --ts-dur-slow: 0ms;
    --ts-dur-entrance: 0ms;
  }
}