/* ═══════════════════════════════════════════════════════════════
   BlueWhale Cloud — Design Tokens
   Derived from BlueWhale Stack Design & Collateral Guidelines v1.0
   (August 2026). Section references below point at that document.
   Version 2.0 — brand-aligned
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── §1 Brand colour tokens ─────────────────────────────────
     Verified against the official logo artwork: the lockup samples
     #022CA2, which is #002CA0 plus JPEG noise. */
  --bw-blue:  #002CA0;   /* Primary brand */
  --bw-dark:  #0D2270;   /* Signature chips, premium cards, architecture bands */
  --bw-mid:   #3355C0;   /* Secondary blue for gradients and tiers */
  --bw-gold:  #C9962E;   /* THE ONLY ACCENT. Kickers, labels, borders, key nodes.
                            Never large fills. */
  --bw-ink:   #101828;   /* Titles and primary text on light */
  --bw-grey:  #475467;   /* Body text */
  --bw-lgrey: #98A2B3;   /* Footers, disclaimers, muted labels */
  --bw-panel: #F4F7FC;   /* Light panel fill */
  --bw-line:  #E4E9F2;   /* Hairline borders */
  --bw-lblu:  #DCE7F6;   /* Large light-blue container bands */
  --bw-lgry:  #EEF1F5;   /* Light grey alternative surface */

  /* Legacy aliases kept so existing selectors keep resolving */
  --brand-deep:  var(--bw-blue);
  --brand-blue:  var(--bw-blue);
  --brand-sky:   var(--bw-lblu);
  --brand-ink:   var(--bw-ink);
  --brand-white: #FFFFFF;

  /* ── Backgrounds (light) ────────────────────────────────────
     §1 rule: content pages are white-dominant; whites are protected. */
  --bg-canvas:   #FBFCFE;
  --bg-surface:  #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-sunken:   var(--bw-panel);
  --bg-hover:    var(--bw-lgry);
  --bg-active:   var(--bw-lblu);
  --bg-band:     var(--bw-lblu);

  /* ── Text (light) ───────────────────────────────────────────── */
  --text-primary:   var(--bw-ink);
  --text-secondary: var(--bw-grey);
  --text-tertiary:  var(--bw-lgrey);
  --text-inverse:   #FFFFFF;
  --text-accent:    var(--bw-blue);
  --text-gold:      var(--bw-gold);
  --text-disabled:  #B6BECC;

  /* ── Borders ────────────────────────────────────────────────── */
  --border-default: var(--bw-line);
  --border-strong:  #CBD4E4;
  --border-accent:  var(--bw-blue);
  --border-gold:    var(--bw-gold);

  /* ── Primary action ─────────────────────────────────────────── */
  --primary-bg:     var(--bw-blue);
  --primary-hover:  #00248A;
  --primary-active: #001C6E;
  --primary-fg:     #FFFFFF;

  /* ── Status ─────────────────────────────────────────────────
     Semantic colour is separate from the brand accent: gold is never
     used to mean "warning". */
  --success-bg: #E7F4EC;  --success-fg: #17663C;  --success-border: #A8D8BC;
  --warning-bg: #FDF3E2;  --warning-fg: #8A5A00;  --warning-border: #EFCE90;
  --danger-bg:  #FCECEC;  --danger-fg:  #A32020;  --danger-border: #EFA9A9;
  --info-bg:    var(--bw-lblu); --info-fg: var(--bw-blue); --info-border: #BACFEC;

  /* Severity */
  --sev-critical: #A32020;
  --sev-high:     #C6483F;
  --sev-medium:   #B37A16;
  --sev-low:      var(--bw-grey);
  --sev-info:     var(--bw-blue);

  /* ── Data visualisation ─────────────────────────────────────
     Brand blues lead; gold appears once, as the emphasis series. */
  --viz-1: #002CA0;  --viz-2: #3355C0;  --viz-3: #6E8FDA;
  --viz-4: #C9962E;  --viz-5: #17663C;  --viz-6: #A32020;
  --viz-7: #5B6B8C;  --viz-8: #9AA9C4;

  /* Cloud vendor marks — §3: always in white tiles with hairline borders */
  --cloud-aws: #FF9900;    --cloud-azure: #0078D4;  --cloud-gcp: #4285F4;
  --cloud-oci: #F80000;    --cloud-ibm: #054ADA;    --cloud-alibaba: #FF6A00;
  --cloud-huawei: #C7000B; --cloud-vmware: #607D8B; --cloud-nutanix: #024DA1;

  /* ── §2 Typography ──────────────────────────────────────────
     House face is Calibri. Carlito is metric-compatible and is what
     non-Office machines get, so line breaks match the decks and PDFs. */
  --font-sans: Calibri, Carlito, 'Segoe UI', system-ui, -apple-system,
               BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: Consolas, 'Cascadia Mono', 'JetBrains Mono', ui-monospace,
               Menlo, Monaco, 'Courier New', monospace;

  --text-xs: 12px;   --text-sm: 13.5px;  --text-base: 15px;
  --text-lg: 17px;   --text-xl: 20px;    --text-2xl: 24px;
  --text-3xl: 29px;  --text-4xl: 36px;   --text-5xl: 46px;

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

  /* §2: kickers are letterspaced gold, format "01 · SECTION NAME" */
  --tracking-kicker: 0.14em;
  --tracking-label:  0.08em;

  /* ── Spacing ────────────────────────────────────────────────── */
  --space-0: 0;      --space-0_5: 2px;  --space-1: 4px;   --space-2: 8px;
  --space-3: 12px;   --space-4: 16px;   --space-5: 20px;  --space-6: 24px;
  --space-8: 32px;   --space-10: 40px;  --space-12: 48px; --space-16: 64px;
  --space-24: 96px;

  /* ── Radius ─────────────────────────────────────────────────
     The house system is rectilinear — the mark itself is squares.
     Radii stay tight so cards read as tiles, not pills. */
  --radius-none: 0;   --radius-sm: 2px;  --radius-md: 4px;
  --radius-lg: 6px;   --radius-xl: 8px;  --radius-2xl: 12px;
  --radius-full: 9999px;

  /* ── §5 Elevation — cards are white with a soft blue-grey shadow ── */
  --shadow-card: 0 2px 5px rgba(213, 222, 236, 0.5);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 2px 5px rgba(213, 222, 236, 0.55), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 8px 18px -4px rgba(16, 24, 40, 0.10), 0 3px 6px -3px rgba(16, 24, 40, 0.06);
  --shadow-xl: 0 18px 32px -8px rgba(16, 24, 40, 0.14), 0 6px 12px -6px rgba(16, 24, 40, 0.08);
  --shadow-focus: 0 0 0 3px rgba(0, 44, 160, 0.18);

  /* ── Motion ─────────────────────────────────────────────────── */
  --duration-fast: 120ms;  --duration-normal: 200ms;
  --duration-slow: 300ms;  --duration-deliberate: 500ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ─────────────────────────────────────────────────── */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;
  --topbar-height: 56px;
  --content-max-width: 1440px;
  --accent-bar: 3.2mm;   /* §4: BLUE accent bar at the top of every page */
}

/* ── Dark theme ───────────────────────────────────────────────
   The house system is light-dominant, so dark is a derived surface set:
   neutrals biased toward INK, and BLUE and GOLD both lifted enough to
   hold contrast on a dark ground. */
[data-theme='dark'] {
  --bg-canvas:   #0A101E;
  --bg-surface:  #121A2B;
  --bg-elevated: #172032;
  --bg-sunken:   #070C17;
  --bg-hover:    #1B2437;
  --bg-active:   #16264F;
  --bg-band:     #14203C;

  --text-primary:   #F1F4FA;
  --text-secondary: #A9B4C7;
  --text-tertiary:  #7A8699;
  --text-accent:    #7FA5F0;
  --text-gold:      #E0B35A;
  --text-disabled:  #5A6579;

  --border-default: #232D44;
  --border-strong:  #33405C;
  --border-accent:  #7FA5F0;
  --border-gold:    #E0B35A;

  --primary-bg:     #2E5BD0;
  --primary-hover:  #3C6AE0;
  --primary-active: #24499F;
  --primary-fg:     #FFFFFF;

  --success-bg: #0D2A1A;  --success-fg: #74CF9C;  --success-border: #17663C;
  --warning-bg: #2A1E08;  --warning-fg: #E8BE72;  --warning-border: #8A5A00;
  --danger-bg:  #2C1213;  --danger-fg:  #EE8B8B;  --danger-border: #A32020;
  --info-bg:    #14213F;  --info-fg:    #9CC0F5;  --info-border: #2E5BD0;

  --viz-1: #6E8FDA;  --viz-2: #3355C0;  --viz-3: #9CC0F5;
  --viz-4: #E0B35A;  --viz-5: #74CF9C;  --viz-6: #EE8B8B;
  --viz-7: #9AA9C4;  --viz-8: #5B6B8C;

  --shadow-card: 0 2px 5px rgba(0, 0, 0, 0.34);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 10px 20px -4px rgba(0, 0, 0, 0.48);
  --shadow-xl: 0 20px 34px -8px rgba(0, 0, 0, 0.56);
  --shadow-focus: 0 0 0 3px rgba(127, 165, 240, 0.28);
}

/* Follow the OS unless the viewer has chosen a theme explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg-canvas:   #0A101E;
    --bg-surface:  #121A2B;
    --bg-elevated: #172032;
    --bg-sunken:   #070C17;
    --bg-hover:    #1B2437;
    --bg-active:   #16264F;
    --bg-band:     #14203C;

    --text-primary:   #F1F4FA;
    --text-secondary: #A9B4C7;
    --text-tertiary:  #7A8699;
    --text-accent:    #7FA5F0;
    --text-gold:      #E0B35A;
    --text-disabled:  #5A6579;

    --border-default: #232D44;
    --border-strong:  #33405C;
    --border-accent:  #7FA5F0;
    --border-gold:    #E0B35A;

    --primary-bg:     #2E5BD0;
    --primary-hover:  #3C6AE0;
    --primary-active: #24499F;
    --primary-fg:     #FFFFFF;

    --success-bg: #0D2A1A;  --success-fg: #74CF9C;  --success-border: #17663C;
    --warning-bg: #2A1E08;  --warning-fg: #E8BE72;  --warning-border: #8A5A00;
    --danger-bg:  #2C1213;  --danger-fg:  #EE8B8B;  --danger-border: #A32020;
    --info-bg:    #14213F;  --info-fg:    #9CC0F5;  --info-border: #2E5BD0;

    --shadow-card: 0 2px 5px rgba(0, 0, 0, 0.34);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.38);
    --shadow-lg: 0 10px 20px -4px rgba(0, 0, 0, 0.48);
    --shadow-focus: 0 0 0 3px rgba(127, 165, 240, 0.28);
  }
}

/* ── Reset / base ─────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code, pre, kbd { font-family: var(--font-mono); }

.num, .tabular { font-variant-numeric: tabular-nums; }

/* §2: section kicker — "01 · SECTION NAME", gold, letterspaced */
.kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-gold);
}

/* §5: signature chip — DARK fill, 1pt GOLD border, white bold text */
.chip-signature {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  background: var(--bw-dark);
  border: 1px solid var(--bw-gold);
  border-radius: var(--radius-md);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* §4: gold-left callout */
.callout-gold {
  border-left: 3px solid var(--bw-gold);
  background: var(--bg-sunken);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}