/* ==========================================================================
   Stack Steward · Design Tokens
   --------------------------------------------------------------------------
   Shared style guide. Every colour, spacing, radius, shadow and font the two
   product themes use is declared here as a CSS custom property. Names describe
   PURPOSE, never a hue — this is deliberate: the apurva source had misleading
   hue-names (--teal resolving to blue, --teal-dark to red). "primary" and
   "secondary" are role names, so the navy theme's teal primary and the AI
   theme's red primary both map to --color-primary without a lie.

   Theme scopes
   ------------
   :root / .t-navy   — "IT Delivery" theme (dark navy body, teal + blue accent)
   .t-ai             — "AI Governance & Adoption" theme (light body, red accent,
                       with dark panels for footer/contact/control-centre)

   Any shared component references var(--color-…) and renders correctly under
   whichever scope it sits in. The landing page nests .t-navy and .t-ai side by
   side for its two hero sections.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared primitives (theme-agnostic)
   -------------------------------------------------------------------------- */
:root {
  --font-heading: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Fira Code", "Cascadia Code", Menlo, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --container: 1220px;

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --transition: 250ms ease;
  --transition-fast: 200ms ease;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   THEME — IT Delivery  (dark navy)
   Confirmed hexes from stacksteward.co.uk
   -------------------------------------------------------------------------- */
:root,
.t-navy {
  /* backgrounds */
  --color-bg: #0E1320;              /* page background            */
  --color-surface: #151C2E;         /* card surface               */
  --color-surface-elevated: #1A2338;/* elevated card surface      */
  --color-surface-soft: #101827;    /* soft / inset surface       */

  /* accents */
  --color-primary: #00D4B5;         /* primary accent — teal      */
  --color-primary-contrast: #0E1320;/* text sitting ON primary    */
  --color-primary-soft: color-mix(in srgb, #00D4B5 14%, transparent);
  --color-secondary: #4DA6FF;       /* secondary accent — blue    */
  --color-secondary-soft: color-mix(in srgb, #4DA6FF 16%, transparent);

  /* text */
  --color-heading: #F5F7FA;
  --color-body: #B8C2D1;
  --color-muted: #7F8DA3;
  --color-faint: #64748B;

  /* lines */
  --color-border: #283246;
  --color-border-soft: color-mix(in srgb, #283246 72%, transparent);

  /* footer / deepest */
  --color-footer-bg: #050814;
  --color-footer-heading: #F5F7FA;
  --color-footer-body: #7F8DA3;

  /* absolutes */
  --color-white: #FFFFFF;
  --color-black: #050814;

  /* semantic status */
  --color-success: #22C55E;
  --color-warning: #F59E0B;
  --color-danger: #F87171;

  /* dark-panel aliases (this theme is itself dark — panels reuse same tones) */
  --color-dark-bg: #0E1320;
  --color-dark-surface: #151C2E;
  --color-dark-surface-elevated: #1A2338;
  --color-dark-panel: #101827;
  --color-dark-border: color-mix(in srgb, #283246 70%, transparent);
  --color-dark-heading: #F5F7FA;
  --color-dark-body: #B8C2D1;
  --color-dark-muted: #7F8DA3;

  /* derived surfaces + shadows (navy theme) */
  --color-surface-glass: color-mix(in srgb, #151C2E 78%, transparent);
  --color-footer-bg-deep: #050814;
  --shadow-card: 0 22px 70px color-mix(in srgb, #050814 44%, transparent);
  --shadow-soft: 0 16px 48px color-mix(in srgb, #050814 28%, transparent);
  --shadow-hover: 0 20px 40px -8px color-mix(in srgb, #050814 55%, transparent);
  --card-highlight: inset 0 1px 0 color-mix(in srgb, #FFFFFF 8%, transparent);
  --color-primary-glow: color-mix(in srgb, #00D4B5 22%, transparent);
  --color-dark-border-subtle: color-mix(in srgb, #283246 40%, transparent);
}

/* --------------------------------------------------------------------------
   THEME — AI Governance & Adoption  (light body, red accent + dark panels)
   Confirmed hexes (red family) plus live values for the dark panels.
   -------------------------------------------------------------------------- */
.t-ai {
  /* backgrounds (light) */
  --color-bg: #F8FAFC;              /* page background            */
  --color-surface: #FFFFFF;         /* card surface               */
  --color-surface-elevated: #FFFFFF;
  --color-surface-soft: #F1F5F9;

  /* accents (red) */
  --color-primary: #CC0000;         /* primary accent — red       */
  --color-primary-hover: #B30000;
  --color-primary-contrast: #FFFFFF;
  --color-primary-soft: #FFF1F2;    /* red subtle background      */
  --color-primary-border: #FECDD3;  /* red tinted border          */
  --color-secondary: #CC0000;       /* no true secondary — mirror red */

  /* text */
  --color-heading: #0B0F17;         /* ink                        */
  --color-body: #1E293B;            /* ink-soft                   */
  --color-muted: #475569;
  --color-faint: #64748B;

  /* lines */
  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E1;
  --color-border-soft: #E2E8F0;

  /* footer / deepest */
  --color-footer-bg: #06090E;
  --color-footer-heading: #F1F5F9;
  --color-footer-body: #94A3B8;

  /* absolutes */
  --color-white: #FFFFFF;
  --color-black: #06090E;

  /* semantic status */
  --color-success: #00B074;
  --color-warning: #F59E0B;
  --color-danger: #CC0000;

  /* dark panels (footer, contact, control-centre, story, model sections) */
  --color-dark-bg: #0B0F19;
  --color-dark-surface: #111827;
  --color-dark-surface-elevated: #1E293B;
  --color-dark-panel: #0D131F;      /* control-centre surface     */
  --color-dark-border: rgba(255, 255, 255, 0.10);
  --color-dark-heading: #F1F5F9;
  --color-dark-body: #94A3B8;
  --color-dark-muted: #64748B;

  /* derived surfaces + shadows (AI theme) */
  --color-surface-glass: rgba(255, 255, 255, 0.06);
  --color-footer-bg-deep: #06090E;
  --shadow-card: 0 4px 20px -2px rgba(11, 15, 23, 0.06);
  --shadow-soft: 0 1px 3px 0 rgba(11, 15, 23, 0.10);
  --shadow-hover: 0 20px 40px -8px rgba(204, 0, 0, 0.12);
  --card-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --color-primary-glow: rgba(204, 0, 0, 0.22);
  --color-dark-border-subtle: rgba(255, 255, 255, 0.06);
}