/* Digitalinnov design tokens: LATEST (currently Brand Bible v4, 28 Oct 2026).
   Site pages link this file so they follow the newest Brand Bible automatically.
   A Brand Bible version page links its own frozen snapshot (v4.css) instead.
   To release a new version, read Digitalinnov-Brand-Bible/tokens/README.md first.
   Standard: WCAG 2.2 Level AA, which includes every WCAG 2.0 and 2.1 AA criterion. */

@layer di-tokens, di-base;

@layer di-tokens {
:root {
  --di-tokens-version: "v4";

  /* Brand palette */
  --ink: #221E1F;  --teal: #19B2B8;  --cyan: #51E3FC;  --blue: #329AC1;
  --purple: #A347CE;  --amber: #FFB547;  --cloud: #F5F9FA;  --white: #FFFFFF;

  /* Service pillars, always in this order */
  --pillar-technology: var(--blue);
  --pillar-brand: var(--purple);
  --pillar-growth: var(--amber);
  --pillar-intelligence: var(--teal);

  /* Semantic, dark default */
  --bg: #101516;  --fg: #F5F9FA;  --muted: #BAC8CA;  --surface: #192124;
  --line: rgba(220,250,250,.17);  --accent: #51E3FC;  --focus: #51E3FC;
  --glass: rgba(16,21,22,.93);  --on-accent: #071719;  --on-primary: #071719;
  color-scheme: dark;

  /* Always-dark stages (same in both themes) */
  --stage: #060d15;
  --band-intel: #0d272a;  --band-intel-fg: #f0fbfc;  --band-intel-body: #c5dde0;  --band-intel-accent: #73e2e6;
  --band-contact: #112a2d;  --band-contact-fg: #f3fdfe;  --band-contact-body: #c1dbdd;  --band-contact-accent: #81f1f1;
  --panel-1: #0b1a25;  --panel-2: #102732;  --panel-3: #0c1b28;
  --panel-fg: #eafcff;  --panel-body: #a7c2cb;  --panel-placeholder: #8aa3ad;
  --panel-field: rgba(2,13,21,.76);  --panel-edge: rgba(81,227,252,.62);
  --panel-error: var(--amber); /* form errors on dark panels, always with an icon and a message */

  /* Primary call to action (owner decision, 3 Nov 2026): brand amber with Ink text, 9.39:1 */
  --cta: var(--amber);  --on-cta: var(--ink);  --cta-edge: var(--amber);
  --cta-halo: 0 0 0 1px rgba(255,181,71,.35), 0 0 18px rgba(255,181,71,.5), 0 0 38px rgba(255,181,71,.24);
  --focus-on-stage: #51E3FC; /* focus ring inside an always-dark stage or panel */
  --mint-stop: #35d5c5; /* gradient stop only */

  /* Type */
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-min: 11px;
  --tracking-heading: -.06em;  --tracking-eyebrow: .17em;  --tracking-button: .055em;

  /* Shape */
  --r-control: 4px;  --r-card: 5px;  --r-pill: 100px;

  /* Accessibility */
  --focus-width: 3px;  --focus-offset: 4px;  --target-min: 24px;

  /* Depth and motion */
  --halo: 0 0 0 1px rgba(81,227,252,.25), 0 0 16px rgba(25,178,184,.46), 0 0 35px rgba(25,178,184,.22);
  --lift-shadow: 0 18px 50px #0003;
  --card-glow: rgba(81,227,252,.2);
  --lift-control: -2px;  --lift-pill: -3px;  --lift-card: -6px;
  --dur-control: .2s;  --dur-card: .25s;  --dur-reveal: .65s;

  /* Layout */
  --container: 1180px;  --gutter: 24px;  --section-y: clamp(76px, 9vw, 124px);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F5F9FA;  --fg: #221E1F;  --muted: #4E6064;  --surface: #FFFFFF;
    --line: rgba(22,51,53,.19);  --accent: #087980;  --focus: #006E73;
    --glass: rgba(245,249,250,.94);  --on-accent: #FFFFFF;  --lift-shadow: 0 18px 50px #0002;
    --cta-edge: var(--ink); /* amber on Cloud is 1.66:1, so the button gets an Ink edge in light mode */
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F5F9FA;  --fg: #221E1F;  --muted: #4E6064;  --surface: #FFFFFF;
  --line: rgba(22,51,53,.19);  --accent: #087980;  --focus: #006E73;
  --glass: rgba(245,249,250,.94);  --on-accent: #FFFFFF;  --lift-shadow: 0 18px 50px #0002;
  --cta-edge: var(--ink); /* amber on Cloud is 1.66:1, so the button gets an Ink edge in light mode */
  color-scheme: light;
}
}

/* Accessibility base. Layered, so any page rule without a layer still wins. */
@layer di-base {
  :focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; }
  }
}