/* ============================================================
   AdLoops — Colors & Type
   The canonical token sheet. Import this in every artifact.
   ============================================================ */

/* Fonts — all self-hosted from /fonts so the CSP `font-src 'self'` passes.
   - Readex Pro: primary brand sans (variable, 100-900 wght)
   - Geist Mono: numerics, IDs, code
   - Instrument Serif: editorial accent (italic only used in copy) */
@font-face {
  font-family: "Readex Pro";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/ReadexPro-VariableFont.ttf") format("truetype-variations"),
       url("/fonts/ReadexPro-VariableFont.ttf") format("truetype");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/GeistMono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/InstrumentSerif-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/InstrumentSerif-Regular.woff2") format("woff2");
}

:root {
  /* -------- Neutrals (warm-cool balanced, zinc-ish) -------- */
  --ink-0:  #fafafa;   /* canvas-light */
  --ink-50: #f4f4f5;
  --ink-100:#e4e4e7;
  --ink-200:#d4d4d8;
  --ink-300:#a1a1aa;
  --ink-400:#71717a;
  --ink-500:#52525b;
  --ink-600:#3f3f46;
  --ink-700:#27272a;
  --ink-800:#18181b;
  --ink-900:#09090b;
  --ink-1000:#000000;

  /* -------- Primary: Electric Indigo -------- */
  --indigo-50:  #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;   /* brand primary */
  --indigo-600: #4f46e5;   /* pressed / hover-dark */
  --indigo-700: #4338ca;
  --indigo-800: #3730a3;
  --indigo-900: #312e81;

  /* -------- Signal colors (semantic) -------- */
  --success-500:#10b981;
  --success-100:#d1fae5;
  --warn-500:   #f59e0b;
  --warn-100:   #fef3c7;
  --danger-500: #ef4444;
  --danger-100: #fee2e2;
  --info-500:   #3b82f6;
  --info-100:   #dbeafe;

  /* -------- Data viz series (charts) -------- */
  --viz-1: #6366f1;  /* indigo */
  --viz-2: #14b8a6;  /* teal */
  --viz-3: #a3e635;  /* lime */
  --viz-4: #f59e0b;  /* amber */
  --viz-5: #ec4899;  /* pink */
  --viz-6: #8b5cf6;  /* violet */

  /* -------- Platform brand colors (for integration chips) -------- */
  --platform-google:   #4285F4;
  --platform-meta:     #1877F2;
  --platform-linkedin: #0A66C2;

  /* -------- Semantic surface aliases (light theme default) -------- */
  --bg:         var(--ink-0);
  --bg-subtle:  var(--ink-50);
  --bg-raised:  #ffffff;
  --bg-inverse: var(--ink-900);

  --fg:         var(--ink-900);    /* primary text */
  --fg-muted:   var(--ink-500);    /* secondary text */
  --fg-subtle:  var(--ink-400);    /* tertiary, caption */
  --fg-inverse: var(--ink-0);

  --border:        var(--ink-100);
  --border-strong: var(--ink-200);

  --accent:        var(--indigo-500);
  --accent-hover:  var(--indigo-600);
  --accent-fg:     #ffffff;
  --accent-tint:   var(--indigo-50);

  /* -------- Typography -------- */
  --font-sans: "Readex Pro", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-serif:"Instrument Serif", ui-serif, Georgia, serif;

  /* Type scale — spacious, modern */
  --fs-display-1: 72px;
  --fs-display-2: 56px;
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body: 15px;
  --fs-body-sm: 13px;
  --fs-label: 12px;
  --fs-caption: 11px;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --tracking-tight: -0.025em;
  --tracking-snug:  -0.012em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.08em;

  /* -------- Spacing scale (4px base) -------- */
  --space-0: 0;
  --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-20:80px;
  --space-24:96px;
  --space-32:128px;

  /* -------- Radii -------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;   /* default for inputs, chips */
  --radius-lg: 14px;   /* default for cards */
  --radius-xl: 20px;
  --radius-2xl:28px;
  --radius-pill: 999px;

  /* -------- Shadows (soft, low-contrast) -------- */
  --shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.04);
  --shadow-sm: 0 1px 3px rgba(9, 9, 11, 0.06), 0 1px 2px rgba(9, 9, 11, 0.04);
  --shadow-md: 0 4px 12px rgba(9, 9, 11, 0.06), 0 2px 4px rgba(9, 9, 11, 0.04);
  --shadow-lg: 0 12px 32px rgba(9, 9, 11, 0.08), 0 4px 8px rgba(9, 9, 11, 0.04);
  --shadow-xl: 0 24px 56px rgba(9, 9, 11, 0.12);
  --shadow-glow: 0 0 0 4px rgba(99, 102, 241, 0.18);     /* focus ring */
  --shadow-glow-strong: 0 0 0 6px rgba(99, 102, 241, 0.25);

  /* Inner shadow used on inputs */
  --shadow-inset: inset 0 1px 2px rgba(9, 9, 11, 0.04);

  /* -------- Motion -------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* Dark theme — applied via [data-theme="dark"] on a parent */
[data-theme="dark"] {
  --bg:         var(--ink-900);
  --bg-subtle:  var(--ink-800);
  --bg-raised:  var(--ink-800);
  --bg-inverse: var(--ink-0);

  --fg:         var(--ink-0);
  --fg-muted:   var(--ink-300);
  --fg-subtle:  var(--ink-400);
  --fg-inverse: var(--ink-900);

  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  --accent-tint:   rgba(99, 102, 241, 0.14);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   Semantic element styles — use these directly via class.
   Class-based, not bare tag selectors, so a page can opt-in.
   ============================================================ */

.al-display-1 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-display-1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg); }
.al-display-2 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-display-2); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg); }
.al-h1        { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h1);        line-height: var(--lh-tight); letter-spacing: var(--tracking-snug); color: var(--fg); }
.al-h2        { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h2);        line-height: var(--lh-snug);  letter-spacing: var(--tracking-snug); color: var(--fg); }
.al-h3        { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h3);        line-height: var(--lh-snug);  letter-spacing: var(--tracking-snug); color: var(--fg); }
.al-h4        { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-h4);        line-height: var(--lh-snug);  color: var(--fg); }

.al-body-lg   { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body-lg); line-height: var(--lh-base); color: var(--fg); }
.al-body      { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body);    line-height: var(--lh-base); color: var(--fg); }
.al-body-sm   { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body-sm); line-height: var(--lh-base); color: var(--fg-muted); }

.al-label     { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-label); line-height: 1.4; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-muted); }
.al-caption   { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-caption); line-height: 1.4; color: var(--fg-subtle); }

.al-mono      { font-family: var(--font-mono); font-weight: 400; font-variant-numeric: tabular-nums; }
.al-num       { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-feature-settings: "ss01", "cv11"; }
.al-editorial { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: var(--tracking-snug); }