/* ========================================================================
   AiGuardlines — Foundations
   Color + Type tokens. Import into every product surface.
   ------------------------------------------------------------------------
   Two layers (see BRAND-LAYER.md):
     • Brand layer  — cinematic, rare, hero moments. Adds Prism Violet,
                      Spectrum Magenta, Studio Mist. Never appears in UI.
     • Operating layer — schematic, ambient, in-product. Uses the core
                      palette only. Flat surfaces, hairline strokes,
                      generous white space.
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Core palette (shared across both layers) ---------- */
  --ag-vault-navy:      #0A1628;   /* primary text, wordmark, deep accents */
  --ag-vault-navy-80:   rgba(10, 22, 40, 0.80);
  --ag-vault-navy-70:   rgba(10, 22, 40, 0.70);
  --ag-vault-navy-40:   rgba(10, 22, 40, 0.40);
  --ag-vault-navy-12:   rgba(10, 22, 40, 0.12);
  --ag-vault-navy-06:   rgba(10, 22, 40, 0.06);

  --ag-shield-teal:     #00D4A1;   /* the "after" — clean signal, safe state, primary CTA */
  --ag-shield-teal-dk:  #00A87F;   /* hover/pressed for teal CTAs */
  --ag-shield-teal-12:  rgba(0, 212, 161, 0.12);
  --ag-shield-teal-24:  rgba(0, 212, 161, 0.24);

  --ag-token-blue:      #7DB8F0;   /* secondary accent — used for [TOKEN] placeholders */

  --ag-clean-white:     #F5F7FA;   /* page background — never pure white */
  --ag-pure-white:      #FFFFFF;   /* card surfaces, modals */

  --ag-muted-slate:     #5B6B82;   /* secondary text, captions */
  --ag-fog:             #8E9BAE;   /* tertiary text, disabled */
  --ag-hairline:        #E1E6EE;   /* borders, dividers (1px) */
  --ag-hairline-strong: #C9D2DF;   /* emphasized borders, input outlines */

  /* Semantic — operating layer only */
  --ag-success:         #00A87F;   /* matches shield-teal-dk for consistency */
  --ag-warning:         #E8A33E;   /* amber, NOT spectrum magenta */
  --ag-danger:          #D14848;   /* leak detected, blocked */
  --ag-info:            #2E78D8;   /* informational badge */

  /* ---------- Brand-layer additions (cinematic only — do NOT use in UI) ---------- */
  --ag-prism-violet:    #7C6AE8;   /* the "before" — unfiltered data, storytelling */
  --ag-spectrum-magenta:#D946A8;   /* spectrum accent */
  --ag-studio-mist:     #EDEFF2;   /* cinematic background plate */

  /* ---------- Foreground / background semantic ---------- */
  --ag-fg-1:            var(--ag-vault-navy);
  --ag-fg-2:            var(--ag-muted-slate);
  --ag-fg-3:            var(--ag-fog);
  --ag-fg-on-teal:      var(--ag-vault-navy);
  --ag-fg-on-navy:      var(--ag-clean-white);

  --ag-bg-page:         var(--ag-clean-white);
  --ag-bg-surface:      var(--ag-pure-white);
  --ag-bg-sunken:       #EBEFF4;
  --ag-bg-inverse:      var(--ag-vault-navy);

  /* ---------- Type families ---------- */
  --ag-font-display:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ag-font-sans:       'IBM Plex Sans', 'Inter', system-ui, sans-serif;
  --ag-font-mono:       'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale (operating layer) ---------- */
  --ag-text-xs:         12px;
  --ag-text-sm:         14px;
  --ag-text-base:       16px;
  --ag-text-md:         18px;
  --ag-text-lg:         20px;
  --ag-text-xl:         24px;
  --ag-text-2xl:        32px;
  --ag-text-3xl:        40px;
  --ag-text-4xl:        56px;   /* hero floor */
  --ag-text-5xl:        72px;   /* hero ceiling */

  --ag-leading-tight:   1.1;
  --ag-leading-snug:    1.25;
  --ag-leading-normal:  1.5;
  --ag-leading-relaxed: 1.65;

  --ag-tracking-tight:  -0.02em;
  --ag-tracking-snug:   -0.01em;
  --ag-tracking-normal: 0;
  --ag-tracking-mono:   0.01em;
  --ag-tracking-caps:   0.12em;   /* eyebrows, label caps */

  /* ---------- Spacing scale (4px base) ---------- */
  --ag-space-0:   0;
  --ag-space-1:   4px;
  --ag-space-2:   8px;
  --ag-space-3:   12px;
  --ag-space-4:   16px;
  --ag-space-5:   20px;
  --ag-space-6:   24px;
  --ag-space-8:   32px;
  --ag-space-10:  40px;
  --ag-space-12:  48px;
  --ag-space-16:  64px;
  --ag-space-20:  80px;
  --ag-space-24:  96px;
  --ag-space-32:  128px;

  /* ---------- Radius ---------- */
  --ag-radius-xs:  4px;
  --ag-radius-sm:  6px;
  --ag-radius-md:  10px;
  --ag-radius-lg:  14px;
  --ag-radius-xl:  20px;
  --ag-radius-pill: 999px;

  /* ---------- Elevation ---------- */
  /* The operating layer prefers hairline borders over shadow.
     Shadow is used sparingly and always feels like studio light. */
  --ag-shadow-0:   none;
  --ag-shadow-1:   0 1px 2px rgba(10, 22, 40, 0.04), 0 0 0 1px var(--ag-hairline);
  --ag-shadow-2:   0 4px 16px -4px rgba(10, 22, 40, 0.08), 0 0 0 1px var(--ag-hairline);
  --ag-shadow-3:   0 16px 40px -12px rgba(10, 22, 40, 0.12), 0 0 0 1px var(--ag-hairline);
  --ag-shadow-teal-glow: 0 0 0 4px var(--ag-shield-teal-24);   /* focus ring */

  /* ---------- Motion ---------- */
  --ag-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);     /* default — confident decel */
  --ag-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ag-dur-fast:     120ms;
  --ag-dur-base:     200ms;
  --ag-dur-slow:     360ms;

  /* ---------- Layout ---------- */
  --ag-container:    1200px;
  --ag-container-wide: 1320px;
  --ag-gutter:       24px;
}

/* ========================================================================
   Base resets + body type
   ======================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ag-bg-page);
  color: var(--ag-fg-1);
  font-family: var(--ag-font-sans);
  font-size: var(--ag-text-base);
  line-height: var(--ag-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ========================================================================
   Semantic type roles — use these classes when you don't want to restyle
   ======================================================================== */

.ag-eyebrow {
  font-family: var(--ag-font-mono);
  font-size: var(--ag-text-xs);
  font-weight: 500;
  letter-spacing: var(--ag-tracking-caps);
  text-transform: uppercase;
  color: var(--ag-muted-slate);
}

.ag-h1, h1.ag {
  font-family: var(--ag-font-display);
  font-weight: 500;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: var(--ag-leading-tight);
  letter-spacing: var(--ag-tracking-tight);
  color: var(--ag-fg-1);
  margin: 0;
  text-wrap: balance;
}

.ag-h2, h2.ag {
  font-family: var(--ag-font-display);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: var(--ag-leading-snug);
  letter-spacing: var(--ag-tracking-tight);
  color: var(--ag-fg-1);
  margin: 0;
  text-wrap: balance;
}

.ag-h3, h3.ag {
  font-family: var(--ag-font-display);
  font-weight: 600;
  font-size: var(--ag-text-xl);
  line-height: var(--ag-leading-snug);
  letter-spacing: var(--ag-tracking-snug);
  color: var(--ag-fg-1);
  margin: 0;
}

.ag-h4, h4.ag {
  font-family: var(--ag-font-display);
  font-weight: 600;
  font-size: var(--ag-text-md);
  line-height: var(--ag-leading-snug);
  color: var(--ag-fg-1);
  margin: 0;
}

.ag-body {
  font-family: var(--ag-font-sans);
  font-weight: 400;
  font-size: var(--ag-text-base);
  line-height: var(--ag-leading-relaxed);
  color: var(--ag-fg-1);
  text-wrap: pretty;
}

.ag-body-lg {
  font-family: var(--ag-font-sans);
  font-weight: 400;
  font-size: var(--ag-text-md);
  line-height: var(--ag-leading-relaxed);
  color: var(--ag-fg-2);
  text-wrap: pretty;
}

.ag-caption {
  font-family: var(--ag-font-sans);
  font-size: var(--ag-text-sm);
  line-height: var(--ag-leading-normal);
  color: var(--ag-fg-2);
}

.ag-mono, code.ag, .ag-token {
  font-family: var(--ag-font-mono);
  font-size: 0.92em;
  letter-spacing: var(--ag-tracking-mono);
}

/* Tokenized data — appears in masking demos, audit logs, examples */
.ag-token {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--ag-radius-xs);
  background: rgba(125, 184, 240, 0.12);
  color: #1F5BA8;
  border: 1px solid rgba(125, 184, 240, 0.32);
  font-weight: 500;
}

.ag-token--pii {
  background: rgba(217, 70, 168, 0.10);
  color: #A8266F;
  border-color: rgba(217, 70, 168, 0.28);
}

/* Focus ring — accessible, brand-correct */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ag-shadow-teal-glow);
  border-radius: var(--ag-radius-sm);
}