/* ─────────────────────────────────────────────────────────────────────────
   AeroSpark Design Tokens
   Single source of truth for color, type, spacing, radii, shadows.
   Mirrors the production CSS variables in app/src/web + marketing/index.html.
   ───────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&display=swap');

:root {
  /* ── Brand ────────────────────────────────────────────────────────────── */
  --as-navy:    #151f3c;   /* Primary brand. Headings, buttons, hero, footer chrome */
  --as-navy-2:  #0f1a30;   /* Deeper navy. Footer base, hover state on navy buttons */
  --as-gold:    #fec810;   /* Accent — only ever the lightning bolt + emphasis pops */
  --as-gold-hi: #ffd84a;   /* Brighter gold for tinted backgrounds on navy */

  /* ── Risk semantic (traffic-light) ────────────────────────────────────── */
  --as-green:   #16a34a;   /* Auto-approved */
  --as-yellow:  #ca8a04;   /* Soft violation — needs legal review */
  --as-red:     #dc2626;   /* Hard violation — blocks the deal */

  --as-green-bg:  #dcfce7;
  --as-yellow-bg: #fef9c3;
  --as-red-bg:    #fee2e2;

  /* ── Neutrals ─────────────────────────────────────────────────────────── */
  --as-ink:     #1e293b;   /* Body text on white */
  --as-gray:    #6b7280;   /* Secondary text, meta */
  --as-gray-2:  #94a3b8;   /* Tertiary on dark navy */
  --as-gray-3:  #475569;   /* Separators on dark navy */
  --as-border:  #e5e7eb;   /* Hairlines, card borders */
  --as-bg:      #f5f5f7;   /* App / section background */
  --as-bg-2:    #f9fafb;   /* Subtle row tint, identity rows */

  /* ── Action colors (web dashboard auth context) ───────────────────────── */
  --as-indigo:    #4f46e5;   /* Form focus, links inside auth/dashboard */
  --as-indigo-hi: #4338ca;   /* Indigo hover */
  --as-link:      #4f6ef7;   /* In-content link blue used in blog/marketing copy */
  --as-slack:     #4a154b;   /* Slack purple — Slack auth button only */
  --as-slack-hi:  #611f69;
  --as-ms:        #2f2f2f;   /* Microsoft sign-in button */
  --as-ms-hi:     #404040;

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --as-font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --as-font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --as-font-mono:    'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Type scale — 4 sizes for display, 4 for body */
  --as-size-d1: clamp(40px, 6vw, 72px);  /* Hero h1 */
  --as-size-d2: clamp(32px, 4vw, 48px);  /* Page h1 */
  --as-size-d3: clamp(26px, 3vw, 36px);  /* Section h2 */
  --as-size-d4: 22px;                    /* Card h3 */

  --as-size-lead:  18px;
  --as-size-body:  16px;
  --as-size-small: 14px;
  --as-size-meta:  13px;
  --as-size-micro: 12px;
  --as-size-eyebrow: 11px;               /* All-caps eyebrow / tags */

  /* ── Spacing — 4px base ───────────────────────────────────────────────── */
  --as-sp-1:  4px;
  --as-sp-2:  8px;
  --as-sp-3:  12px;
  --as-sp-4:  16px;
  --as-sp-5:  20px;
  --as-sp-6:  24px;
  --as-sp-8:  32px;
  --as-sp-10: 40px;
  --as-sp-12: 48px;
  --as-sp-16: 64px;
  --as-sp-24: 96px;

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --as-r-xs:  4px;   /* code chip */
  --as-r-sm:  6px;   /* form inputs, alerts */
  --as-r-md:  8px;   /* buttons, nav-cta */
  --as-r-lg:  10px;  /* primary CTAs, content cards */
  --as-r-xl:  12px;  /* feature cards, post-nav */
  --as-r-2xl: 14px;  /* hero card, sidebar widgets */
  --as-r-3xl: 16px;  /* post cards, pricing */
  --as-pill:  99px;  /* badges, pagination */

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --as-shadow-card:  0 4px 20px rgba(0,0,0,0.08);   /* card hover */
  --as-shadow-hero:  0 32px 80px rgba(0,0,0,0.40);  /* hero floating Slack card */
  --as-shadow-img:   0 24px 60px rgba(0,0,0,0.15);  /* featured image on single post */
  --as-shadow-menu:  0 8px 24px rgba(0,0,0,0.08);   /* mobile nav, popovers */
  --as-focus:        0 0 0 2px rgba(79,70,229,0.15); /* form focus ring */

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --as-container:    1100px;  /* marketing + dashboard wide */
  --as-container-rd: 720px;   /* reading column (single post, content) */
  --as-container-md: 780px;   /* reading column +featured image overlap */
  --as-nav-height:   60px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Defaults applied to design-system preview pages
   (Real surfaces opt-in via class names — see docs.css)
   ───────────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--as-font-body);
  font-size: var(--as-size-body);
  line-height: 1.6;
  color: var(--as-navy);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }