/* ─────────────────────────────────────────────────────────────────────────
   A3PO Design System — Colors & Typography
   ─────────────────────────────────────────────────────────────────────────
   Single source of truth for tokens. Imported by every UI kit, preview card,
   and slide template in the system.

   Brand pillar: refined metallic gold + blue-shifted near-black. Reads as
   enterprise / cybersecurity rather than retail-fintech. Mono is reserved
   for numbers (scores, IDs, %), sans for prose.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Fonts ──────────────────────────────────────────────────────────────
   Primary: IBM Plex Sans (display + body)
   Mono:    IBM Plex Mono   (numbers, IDs, code, citations)
   We load from Google Fonts to keep dependencies thin. If you ship to
   production, vendor these locally and reference via /fonts.
*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ── Brand · gold ────────────────────────────────────────────────── */
  --color-gold:           #D4A24C;  /* solid CTA, links, accents               */
  --color-gold-active:    #B9892F;  /* pressed / active                        */
  --color-gold-disabled:  #3F341C;  /* disabled gold buttons                   */
  --grad-gold:            linear-gradient(180deg, #F0CB7A 0%, #D4A24C 48%, #9C7B2E 100%);
  --grad-gold-h:          linear-gradient(90deg,  #F4C76A 0%, #D4A24C 48%, #A86B21 100%);

  /* ── Surfaces · dark mode (marketing default) ────────────────────── */
  --color-canvas-deep:        #060C16;  /* outermost backdrop / footer-of-dark */
  --color-canvas-dark:        #0B1424;  /* primary dark canvas                 */
  --color-surface-card-dark:  #122036;  /* card / elevated panel on dark       */
  --color-surface-elev-dark:  #1B2C46;  /* nested card, hover, chart panels    */

  /* ── Surfaces · light mode (in-app default) ──────────────────────── */
  --color-canvas-light:       #FFFFFF;  /* primary light canvas                */
  --color-surface-soft:       #FAFAFA;  /* page background behind cards        */
  --color-surface-strong:     #F5F5F5;  /* progress tracks, table headers      */

  /* ── Ink / text ─────────────────────────────────────────────────── */
  --color-ink:               #181A20;   /* primary text on light                */
  --color-on-dark:           #FFFFFF;   /* primary text on dark                 */
  --color-on-gold:           #181A20;   /* text on gold fills                   */
  --color-body-on-dark:      #EAECEF;   /* body copy on dark                    */
  --color-body-on-light:     #181A20;   /* body copy on light                   */
  --color-muted-strong:      #929AA5;   /* secondary body / muted prose         */
  --color-muted:             #707A8A;   /* captions, meta, eyebrows             */

  /* ── Borders / hairlines ────────────────────────────────────────── */
  --color-hairline-on-light: #EAECEF;
  --color-hairline-on-dark:  #2B3139;
  --color-border-strong:     #CDD1D6;   /* disabled secondary outlines only     */

  /* ── Semantic compliance ────────────────────────────────────────── */
  --color-compliance-pass:     #0ECB81;  /* PASS                                */
  --color-compliance-gap:      #F6465D;  /* GAP / finding                       */
  --color-compliance-progress: #FFAC2F;  /* IN PROGRESS / PARTIAL               */
  --color-info:                #3B82F6;  /* focus / informational               */
  --color-focus-ring:          rgba(59,130,246,0.30);

  /* ── Typography ─────────────────────────────────────────────────── */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ── Spacing scale · 4px base ───────────────────────────────────── */
  --space-xxs:     4px;
  --space-xs:      8px;
  --space-sm:     12px;
  --space-md:     16px;
  --space-lg:     24px;
  --space-xl:     32px;
  --space-xxl:    48px;
  --space-section: 80px;

  /* ── Radii ─────────────────────────────────────────────────────── */
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    6px;   /* CTA buttons                                       */
  --radius-lg:    8px;
  --radius-xl:   12px;   /* cards                                             */
  --radius-pill: 9999px;

  /* ── Motion ────────────────────────────────────────────────────── */
  --duration-fast:    160ms;
  --duration-medium:  240ms;
  --duration-slow:    400ms;
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Elevation ──────────────────────────────────────────────────
     A3PO is flat-first; color-contrast does the work of elevation.
     Shadows appear only when a card floats over photography or a hero.
  */
  --shadow-over-image: 0 8px 24px rgba(0,0,0,0.24);
  --shadow-over-light: 0 12px 32px rgba(11,20,36,0.08);

  /* ── Numbers · tabular figures by default ──────────────────────── */
  --num-figures: tabular-nums;
}

/* ─── Theme switches ──────────────────────────────────────────────── */
body.theme-dark  { background: var(--color-canvas-dark);  color: var(--color-body-on-dark); }
body.theme-light { background: var(--color-canvas-light); color: var(--color-body-on-light); }

/* ─────────────────────────────────────────────────────────────────────
   Semantic type classes (use directly, OR mirror in your own CSS)
   Always set font-family explicitly so the class works even outside
   a Plex-rooted parent.
   ───────────────────────────────────────────────────────────────── */

/* Display — hero stage, marketing top-of-page */
.t-hero-display {
  font-family: var(--font-sans);
  font-size: 64px; font-weight: 700; line-height: 1.08;
  letter-spacing: -1px;
}
.t-display-lg {
  font-family: var(--font-sans);
  font-size: 48px; font-weight: 700; line-height: 1.10;
  letter-spacing: -0.5px;
}
.t-display-md {
  font-family: var(--font-sans);
  font-size: 40px; font-weight: 600; line-height: 1.15;
  letter-spacing: -0.3px;
}
.t-display-sm {
  font-family: var(--font-sans);
  font-size: 32px; font-weight: 600; line-height: 1.20;
  letter-spacing: -0.2px;
}

/* Titles — section heads, card titles */
.t-title-lg {
  font-family: var(--font-sans);
  font-size: 24px; font-weight: 600; line-height: 1.30;
}
.t-title-md {
  font-family: var(--font-sans);
  font-size: 20px; font-weight: 600; line-height: 1.35;
}
.t-title-sm {
  font-family: var(--font-sans);
  font-size: 16px; font-weight: 600; line-height: 1.40;
}

/* Body & utility */
.t-body-md {
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 400; line-height: 1.50;
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 400; line-height: 1.50;
}
.t-caption {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 500; line-height: 1.40;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.t-button {
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 600; line-height: 1.0;
}

/* Numbers — always mono, always tabular */
.t-num-display {
  font-family: var(--font-mono);
  font-variant-numeric: var(--num-figures);
  font-size: 40px; font-weight: 700; line-height: 1.0;
  letter-spacing: -0.5px;
}
.t-num-md {
  font-family: var(--font-mono);
  font-variant-numeric: var(--num-figures);
  font-size: 16px; font-weight: 500; line-height: 1.30;
}
.t-num-sm {
  font-family: var(--font-mono);
  font-variant-numeric: var(--num-figures);
  font-size: 14px; font-weight: 500; line-height: 1.40;
}

/* Convenience HTML-element semantic mapping (opt-in via <body class="a3-typography">) */
.a3-typography h1 { font: 700 48px/1.10 var(--font-sans); letter-spacing: -0.5px; margin: 0 0 16px; }
.a3-typography h2 { font: 700 32px/1.20 var(--font-sans); letter-spacing: -0.2px; margin: 0 0 12px; }
.a3-typography h3 { font: 600 24px/1.30 var(--font-sans); margin: 0 0 10px; }
.a3-typography h4 { font: 600 20px/1.35 var(--font-sans); margin: 0 0 8px; }
.a3-typography p  { font: 400 14px/1.50 var(--font-sans); margin: 0 0 12px; }
.a3-typography code,
.a3-typography .num { font: 500 13px/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }