/* ChartAI — Design Tokens
 * Source of truth for brand colors, type, spacing, radii, shadows.
 * Import with: <link rel="stylesheet" href="colors_and_type.css">
 */

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

:root {
  /* ---------- Brand palette ---------- */
  --chartai-navy-900: #061A2E;       /* darkest, app chrome edges */
  --chartai-navy-800: #0D2B45;       /* PRIMARY — dark navy */
  --chartai-navy-700: #153A5B;
  --chartai-navy-600: #1F4E72;
  --chartai-navy-500: #2B6489;       /* mid navy for borders on navy surfaces */
  --chartai-teal-700: #1F7A70;
  --chartai-teal-600: #2A9D8F;       /* SECONDARY — action teal */
  --chartai-teal-500: #3EB8A8;
  --chartai-teal-400: #6ED1C4;
  --chartai-teal-100: #E6F6F3;

  /* ---------- Neutrals ---------- */
  --chartai-ink-900: #0A1825;        /* body text on light */
  --chartai-ink-700: #334155;
  --chartai-ink-500: #64748B;
  --chartai-ink-400: #94A3B8;
  --chartai-ink-300: #CBD5E1;
  --chartai-ink-200: #E2E8F0;
  --chartai-ink-100: #F1F5F9;
  --chartai-ink-50:  #F7FAFC;
  --chartai-white:   #FFFFFF;

  /* ---------- Semantic ---------- */
  --chartai-success: #2F855A;
  --chartai-success-bg: #E6F4EA;
  --chartai-warning: #B7791F;
  --chartai-warning-bg: #FEF3C7;
  --chartai-danger:  #B91C1C;
  --chartai-danger-bg: #FDECEC;
  --chartai-info:    #2B6CB0;
  --chartai-info-bg: #E6F0FA;

  /* ---------- Surfaces (light) ---------- */
  --bg-1: var(--chartai-white);
  --bg-2: var(--chartai-ink-50);
  --bg-3: var(--chartai-ink-100);
  --fg-1: var(--chartai-ink-900);
  --fg-2: var(--chartai-ink-700);
  --fg-3: var(--chartai-ink-500);
  --border-1: var(--chartai-ink-200);
  --border-2: var(--chartai-ink-300);
  --accent: var(--chartai-teal-600);
  --accent-ink: var(--chartai-navy-800);

  /* ---------- Surfaces (dark / chrome) ---------- */
  --chrome-bg: var(--chartai-navy-800);
  --chrome-bg-2: var(--chartai-navy-700);
  --chrome-fg: #FFFFFF;
  --chrome-fg-2: rgba(255,255,255,0.72);
  --chrome-fg-3: rgba(255,255,255,0.48);
  --chrome-border: rgba(255,255,255,0.12);

  /* ---------- Type families ---------- */
  --font-serif: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale ---------- */
  --fs-display: 56px;
  --fs-h1: 40px;
  --fs-h2: 30px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-micro: 11px;

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-body:  1.55;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Spacing (4-pt grid) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-0: 0 1px 0 rgba(13, 43, 69, 0.04);
  --shadow-1: 0 1px 3px rgba(13, 43, 69, 0.08), 0 1px 2px rgba(13, 43, 69, 0.04);
  --shadow-2: 0 4px 12px rgba(13, 43, 69, 0.08), 0 2px 4px rgba(13, 43, 69, 0.04);
  --shadow-3: 0 12px 32px rgba(13, 43, 69, 0.12), 0 4px 8px rgba(13, 43, 69, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.08);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
}

/* ---------- Semantic element styles ---------- */
.ca-display {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.ca-h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
.ca-h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.ca-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.ca-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.ca-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.ca-small {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-3);
}
.ca-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chartai-teal-700);
}
.ca-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--fg-2);
}

/* Reset-ish baseline for design kits */
.ca-reset, .ca-reset * { box-sizing: border-box; }
.ca-reset { font-family: var(--font-sans); color: var(--fg-1); }