/* =====================================================================
   INTELLIGENT GROUP -- THEME TOKENS (light / dark)           v1, 2026-10-28
   ---------------------------------------------------------------------
   ONE small, dependency-free file. Safe to copy or link from any
   Intelligent Group app (website, CRM, ...). Only COLOR + SHADOW tokens
   that change between themes live here; type/spacing/radius stay in
   brand-tokens.css.

   CONTRACT (names are stable -- add, never rename):
   - The theme is the `data-theme` attribute on <html>: "dark" | "light".
     The default (no attribute) is DARK, so unthemed pages never change.
   - Any element may set data-theme="dark" or "light" on itself to pin a
     "island" (e.g. the site footer is a dark island on both themes).
     Every token below is re-declared per [data-theme] so islands resolve
     their OWN values (computed custom properties do not re-resolve
     through inheritance, so never alias a token into :root only).
   - Choice is stored in localStorage key `iit-theme` ("light" | "dark") AND mirrored to the
     cross-subdomain cookie `iit-theme` (Domain=.intelligentit.io, 1 year) so the CRM can share it;
     the pre-paint script reads localStorage, then the cookie ("system" = no choice), then
     follows prefers-color-scheme.
     Pre-paint snippet (put in <head>, before the stylesheets):
       <script>(function(){var d=document.documentElement,t,v=function(x){return x==='light'||x==='dark'||x==='system'?x:null};try{t=v(localStorage.getItem('iit-theme'))}catch(e){}
       if(!t){var m=document.cookie.match(/(?:^|; )iit-theme=([a-z]+)(?:;|$)/);t=m?v(m[1]):null}
       if(t!=='light'&&t!=='dark'){try{t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark'}catch(e){t='dark'}}
       d.setAttribute('data-theme',t);d.className=t;d.style.colorScheme=t})()</script>
   - Print is always light on white regardless of theme (bottom of file).
   - Use semantic tokens only (--iit-text-*, --iit-surface-*, --iit-accent,
     --iit-line-*). Never put raw hex in component CSS. Text on a solid
     accent fill = --iit-on-accent. Text over photos or fixed-colour
     bands = the constant --iit-on-photo* tokens in brand-tokens.css.
   - WCAG AA is verified for every text/UI pair in both themes by
     scripts/check-theme-contrast.mjs (npm run test:contrast).
   ===================================================================== */

/* ---------------------------------------------------------------------
   DARK (default; the live blue-dark look, values unchanged since 2026-10-09)
--------------------------------------------------------------------- */
:root,
[data-theme="dark"],
.iit-on-dark,
.ds-band,
.solution-card,
.wpa-cover,
.wp-card__cover,
.ds-people__chip,
.ds-chip {
  color-scheme: dark;

  --iit-ink-bg:  #070b10;
  --iit-ink-900: #070b10;
  --iit-ink-800: #0e141b;
  --iit-ink-700: #151d26;

  --iit-surface-0: #070b10;   /* page */
  --iit-surface-1: #0b1119;   /* alternate band */
  --iit-surface-2: #0e141b;   /* card */
  --iit-surface-3: #151d26;   /* elevated */
  --iit-surface-deep: #0b0e18;   /* legacy-page deep card */
  --iit-surface-grad-a: #0a0f1a;  /* legacy-page section gradient */
  --iit-surface-grad-b: #0d1629;
  --iit-surface-neutral:   #141414;   /* legacy neutral-gray panels */
  --iit-surface-neutral-2: #1a1a1a;
  --iit-surface-navy: #111820;
  --iit-code-bg:      #0c1117;   /* code / console panels */
  --iit-code-bg-deep: #080d13;
  --iit-nav-glass: rgba(7, 11, 16, 0.82);
  --iit-surface-page: #070b10;
  --iit-surface-alt:  #0b1119;
  --iit-surface-card: #0e141b;

  --iit-text-primary:   #ffffff;
  --iit-text-body:      #edeff7;
  --iit-text-secondary: #dde1ed;
  --iit-text-muted:     #bcbfcc;
  --iit-text-quote:     #cfdffe;
  --iit-text-display:   #f8f4eb;
  --iit-text-soft:      #b4becd;   /* between secondary and muted */
  --iit-text-subtle:    #8a8f9e;   /* tertiary / meta */

  --iit-line-soft:   rgba(255, 255, 255, 0.06);
  --iit-line-medium: rgba(255, 255, 255, 0.1);
  --iit-line-strong: rgba(255, 255, 255, 0.15);
  --iit-glass-04: rgba(255, 255, 255, 0.04);
  --iit-glass-06: rgba(255, 255, 255, 0.06);
  --iit-glass-10: rgba(255, 255, 255, 0.10);

  /* Accent: blue is primary, teal-green secondary (brand kit). */
  --iit-blue-500: #4385ff;
  --iit-blue-400: #57a5ff;
  --iit-blue-glass: rgba(67, 133, 255, 0.10);
  --iit-blue-glow:  rgba(67, 133, 255, 0.30);
  --iit-teal-300: #79e5d0;
  --iit-teal-400: #20d3b1;
  --iit-teal-500: #1cba9c;
  --iit-teal-glass: rgba(32, 211, 177, 0.10);
  --iit-teal-glow:  rgba(32, 211, 177, 0.30);

  --iit-accent:          #4385ff;
  --iit-accent-hover:    #57a5ff;
  --iit-accent-soft:     rgba(67, 133, 255, 0.10);
  --iit-on-accent:       #070b10;
  --iit-on-accent-muted: #0e141b;
  --iit-focus-ring:      #4385ff;

  /* Decorative category hues (badges, code syntax, tier labels). */
  --iit-hue-blue:   #60a5fa;
  --iit-hue-cyan:   #00d4ff;
  --iit-hue-violet: #a78bfa;
  --iit-hue-pink:   #f472b6;
  --iit-hue-green:  #86efac;
  --iit-hue-bronze: #cd7f32;
  --iit-hue-silver: #c0c0c0;

  --iit-status-ok:   #20d3b1;
  --iit-status-warn: #f4c430;
  --iit-status-risk: #ff6b6b;
  --iit-status-info: #57a5ff;

  --iit-tint-blue:   rgba(67, 133, 255, 0.10);
  --iit-tint-green:  rgba(32, 211, 177, 0.10);
  --iit-tint-orange: rgba(219, 187, 89, 0.12);

  --iit-gradient-hero: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(67,133,255,0.14) 0%, rgba(32,211,177,0.06) 40%, transparent 70%), #070b10;
  --iit-gradient-iv:   linear-gradient(135deg, rgba(67,133,255,0.16) 0%, rgba(32,211,177,0.08) 100%), #070b10;
  --iit-gradient-card: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  --iit-gradient-text: linear-gradient(90deg, #4385ff 0%, #20d3b1 100%);

  --iit-shadow-sm:   0 4px 12px rgba(0, 0, 0, 0.20);
  --iit-shadow-md:   0 8px 24px rgba(0, 0, 0, 0.25);
  --iit-shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.35);
  --iit-shadow-glow: 0 0 32px rgba(67, 133, 255, 0.15);
  --iit-shadow-media: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  --iit-inset:      rgba(0, 0, 0, 0.30);   /* recessed panel (code, mockups) */
  --iit-inset-soft: rgba(0, 0, 0, 0.20);
}

/* Constant-dark surfaces (photo bands, fixed teal/navy cards, the footer) opt in with
   class="iit-on-dark" (or data-theme="dark"): they get the dark tokens and light text in BOTH
   themes. Add new fixed-colour surfaces to the selector list above or use the class. */
.iit-on-dark,
.ds-band,
.solution-card,
.wpa-cover,
.wp-card__cover,
.ds-people__chip,
.ds-chip {
  color: var(--iit-text-primary);
}

/* Constant-cobalt surfaces (CTA bands over --iit-band-cobalt): white text + white accents in BOTH
   themes. Light-theme accents (royal blue) would vanish on cobalt. */
.iit-on-cobalt,
.ds-section--cobalt,
.lk-content .page-cta,
.lk-content .article-cta {
  --iit-text-primary: #ffffff;
  --iit-text-body: #ffffff;
  --iit-text-secondary: #d6e2ff;
  --iit-text-muted: #d6e2ff;
  --iit-accent: #ffffff;
  --iit-accent-hover: #d6e2ff;
  --iit-blue-500: #ffffff;
  --iit-teal-400: #ffffff;
  --iit-on-accent: #2457c9;
  --iit-line-soft: rgba(255, 255, 255, 0.16);
  --iit-line-medium: rgba(255, 255, 255, 0.24);
  --iit-line-strong: rgba(255, 255, 255, 0.4);
  --iit-glass-10: rgba(255, 255, 255, 0.12);
  --iit-focus-ring: #ffffff;
  color: #ffffff;
}

/* ---------------------------------------------------------------------
   LIGHT (cream + white surfaces, navy ink, royal-blue accent, deep teal)
--------------------------------------------------------------------- */
[data-theme="light"] {
  color-scheme: light;

  --iit-ink-bg:  #f7f5f0;
  --iit-ink-900: #f7f5f0;
  --iit-ink-800: #ffffff;
  --iit-ink-700: #efebe2;

  --iit-surface-0: #f7f5f0;
  --iit-surface-1: #efebe2;
  --iit-surface-2: #ffffff;
  --iit-surface-3: #e8e3d8;
  --iit-surface-deep: #efebe2;
  --iit-surface-grad-a: #f7f5f0;
  --iit-surface-grad-b: #efebe2;
  --iit-surface-neutral:   #efebe2;
  --iit-surface-neutral-2: #e8e3d8;
  --iit-surface-navy: #ffffff;
  --iit-code-bg:      #efebe2;
  --iit-code-bg-deep: #e8e3d8;
  --iit-nav-glass: rgba(247, 245, 240, 0.86);
  --iit-surface-page: #f7f5f0;
  --iit-surface-alt:  #efebe2;
  --iit-surface-card: #ffffff;

  --iit-text-primary:   #14161a;
  --iit-text-body:      #2a2e35;
  --iit-text-secondary: #4a4f57;
  --iit-text-muted:     #5c616a;
  --iit-text-quote:     #1a43bf;
  --iit-text-display:   #14161a;
  --iit-text-soft:      #50555d;
  --iit-text-subtle:    #5c616a;

  --iit-line-soft:   rgba(20, 22, 26, 0.08);
  --iit-line-medium: rgba(20, 22, 26, 0.12);
  --iit-line-strong: rgba(20, 22, 26, 0.22);
  --iit-glass-04: rgba(20, 22, 26, 0.03);
  --iit-glass-06: rgba(20, 22, 26, 0.04);
  --iit-glass-10: rgba(20, 22, 26, 0.06);

  /* Raw #4385ff / #20d3b1 fail AA on cream (3.2:1 / 1.7:1): darker equivalents. */
  --iit-blue-500: #1a43bf;
  --iit-blue-400: #14359a;
  --iit-blue-glass: rgba(26, 67, 191, 0.08);
  --iit-blue-glow:  rgba(26, 67, 191, 0.24);
  --iit-teal-300: #0a6f5f;
  --iit-teal-400: #0a6f5f;
  --iit-teal-500: #085a4d;
  --iit-teal-glass: rgba(10, 111, 95, 0.08);
  --iit-teal-glow:  rgba(10, 111, 95, 0.24);

  --iit-accent:          #1a43bf;
  --iit-accent-hover:    #14359a;
  --iit-accent-soft:     #e6ecfa;
  --iit-on-accent:       #ffffff;
  --iit-on-accent-muted: #d1d9f2;
  --iit-focus-ring:      #1a43bf;

  --iit-hue-blue:   #1d4ed8;
  --iit-hue-cyan:   #036a8f;
  --iit-hue-violet: #6d28d9;
  --iit-hue-pink:   #be185d;
  --iit-hue-green:  #166534;
  --iit-hue-bronze: #8a4b10;
  --iit-hue-silver: #4a4f57;

  --iit-status-ok:   #0a6f5f;
  --iit-status-warn: #8a5a00;
  --iit-status-risk: #b42318;
  --iit-status-info: #1a43bf;

  --iit-tint-blue:   #e6ecfa;
  --iit-tint-green:  #e3f1ea;
  --iit-tint-orange: #fbebdd;

  --iit-gradient-hero: #f7f5f0;
  --iit-gradient-iv:   #efebe2;
  --iit-gradient-card: #ffffff;
  --iit-gradient-text: none;

  --iit-shadow-sm:   0 1px 2px rgba(20, 22, 26, 0.04), 0 2px 8px rgba(20, 22, 26, 0.04);
  --iit-shadow-md:   0 8px 24px rgba(20, 22, 26, 0.06);
  --iit-shadow-lg:   0 24px 48px -12px rgba(20, 22, 26, 0.12);
  --iit-shadow-glow: none;
  --iit-shadow-media: 0 1px 2px rgba(20, 22, 26, 0.06), 0 24px 48px -24px rgba(20, 22, 26, 0.25);
  --iit-inset:      rgba(20, 22, 26, 0.05);
  --iit-inset-soft: rgba(20, 22, 26, 0.04);
}

/* background-clip:text needs a gradient; in light the gradient is `none`, so
   paint the phrase in the accent colour instead of leaving it invisible. */
[data-theme="light"] .text-gradient {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--iit-accent);
}

/* ---------------------------------------------------------------------
   PRINT -- always light on white, whichever theme is active on screen.
   (Same values as the light block; custom properties cannot be aliased
   across an at-rule boundary.)
--------------------------------------------------------------------- */
@media print {
  :root,
  [data-theme] {
    color-scheme: light;
    --iit-ink-bg: #ffffff;   --iit-ink-900: #ffffff;   --iit-ink-800: #ffffff;   --iit-ink-700: #f3f3f3;
    --iit-surface-0: #ffffff; --iit-surface-1: #ffffff; --iit-surface-2: #ffffff; --iit-surface-3: #f3f3f3;
    --iit-surface-page: #ffffff; --iit-surface-alt: #ffffff; --iit-surface-card: #ffffff;
    --iit-surface-deep: #ffffff; --iit-surface-grad-a: #ffffff; --iit-surface-grad-b: #ffffff; --iit-nav-glass: #ffffff;
    --iit-surface-neutral: #ffffff; --iit-surface-neutral-2: #ffffff; --iit-surface-navy: #ffffff; --iit-code-bg: #f3f3f3; --iit-code-bg-deep: #f3f3f3;
    --iit-text-soft: #333333; --iit-text-subtle: #444444; --iit-teal-300: #0a6f5f;
    --iit-hue-blue: #1d4ed8; --iit-hue-cyan: #036a8f; --iit-hue-violet: #6d28d9; --iit-hue-pink: #be185d; --iit-hue-green: #166534; --iit-hue-bronze: #8a4b10; --iit-hue-silver: #4a4f57;
    --iit-status-ok: #0a6f5f; --iit-status-warn: #8a5a00; --iit-status-risk: #b42318; --iit-status-info: #1a43bf;
    --iit-text-primary: #000000; --iit-text-body: #1a1a1a; --iit-text-secondary: #333333;
    --iit-text-muted: #444444; --iit-text-quote: #1a43bf; --iit-text-display: #000000;
    --iit-line-soft: rgba(0,0,0,0.15); --iit-line-medium: rgba(0,0,0,0.2); --iit-line-strong: rgba(0,0,0,0.3);
    --iit-glass-04: transparent; --iit-glass-06: transparent; --iit-glass-10: transparent;
    --iit-blue-500: #1a43bf; --iit-blue-400: #14359a; --iit-blue-glass: transparent; --iit-blue-glow: transparent;
    --iit-teal-400: #0a6f5f; --iit-teal-500: #085a4d; --iit-teal-glass: transparent; --iit-teal-glow: transparent;
    --iit-accent: #1a43bf; --iit-accent-hover: #14359a; --iit-accent-soft: #e6ecfa;
    --iit-on-accent: #ffffff; --iit-on-accent-muted: #d1d9f2; --iit-focus-ring: #1a43bf;
    --iit-gradient-hero: #ffffff; --iit-gradient-iv: #ffffff; --iit-gradient-card: #ffffff; --iit-gradient-text: none;
    --iit-shadow-sm: none; --iit-shadow-md: none; --iit-shadow-lg: none; --iit-shadow-glow: none; --iit-shadow-media: none; --iit-inset: transparent; --iit-inset-soft: transparent;
  }
}