/* =============================================================
   CaptionJet — Design Tokens
   Drop this file into your project and import once at the root.
   All tokens are also documented in CLAUDE.md.
   ============================================================= */

:root {
  /* ───────────────────────── Brand ───────────────────────── */
  --cj-midnight:        #0B1E3F; /* Primary deep — text, dark surfaces */
  --cj-midnight-soft:   #142A52; /* Hover state on midnight surfaces */
  --cj-jet-blue:        #2563EB; /* Primary bright — CTAs, links */
  --cj-jet-blue-hover:  #1D4ED8; /* Hover state on jet blue */
  --cj-sky-trail:       #60A5FA; /* Accent — illustrations, highlights */
  --cj-caption-cyan:    #22D3EE; /* Spark — gradient endpoint, micro highlights */
  --cj-aurora:          #8B5CF6; /* Special — Pro tier ONLY */

  /* ─────────────────────── Neutrals ──────────────────────── */
  --cj-ink:    #0F172A; /* Primary text */
  --cj-smoke:  #475569; /* Secondary text */
  --cj-fog:    #94A3B8; /* Muted text, placeholders */
  --cj-cloud:  #E2E8F0; /* Borders, dividers */
  --cj-mist:   #F1F5F9; /* Alt surface */
  --cj-snow:   #F8FAFC; /* Page background */
  --cj-paper:  #FFFFFF; /* Cards, elevated surfaces */

  /* ────────────────── Semantic (functional) ──────────────── */
  --cj-success: #10B981; /* Translation complete, payment OK */
  --cj-warning: #F59E0B; /* In queue, retry, soft alert */
  --cj-error:   #EF4444; /* Failed, blocked, hard stop */

  /* ─────────────────────── Gradients ─────────────────────── */
  --cj-liftoff:        linear-gradient(135deg, #0B1E3F 0%, #1D4ED8 55%, #60A5FA 100%);
  --cj-liftoff-soft:   linear-gradient(135deg, #0B1E3F 0%, #1D4ED8 100%);
  --cj-jet-bright:     linear-gradient(135deg, #2563EB 0%, #22D3EE 100%);
  --cj-text-gradient:  linear-gradient(180deg, #0B1E3F 30%, #2563EB 100%);

  /* ───────────────────────── Type ────────────────────────── */
  --cj-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --cj-font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --cj-font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Type scale (font-size / line-height) */
  --cj-fs-display-1: 64px;   --cj-lh-display-1: 67px;
  --cj-fs-display-2: 48px;   --cj-lh-display-2: 53px;
  --cj-fs-heading-1: 32px;   --cj-lh-heading-1: 38px;
  --cj-fs-heading-2: 24px;   --cj-lh-heading-2: 31px;
  --cj-fs-body-lg:   18px;   --cj-lh-body-lg:   28px;
  --cj-fs-body-md:   16px;   --cj-lh-body-md:   26px;
  --cj-fs-body-sm:   14px;   --cj-lh-body-sm:   22px;
  --cj-fs-mono:      14px;   --cj-lh-mono:      22px;
  --cj-fs-eyebrow:   12px;   --cj-lh-eyebrow:   16px;

  /* ──────────────────── Spacing rhythm (4px) ─────────────── */
  --cj-s-1: 4px;   --cj-s-2: 8px;   --cj-s-3: 12px;  --cj-s-4: 16px;
  --cj-s-5: 24px;  --cj-s-6: 32px;  --cj-s-7: 48px;  --cj-s-8: 64px;
  --cj-s-9: 96px;

  /* ──────────────────────── Radius ───────────────────────── */
  --cj-r-sm:   6px;     /* badges, small inputs */
  --cj-r-md:   10px;    /* buttons, inputs */
  --cj-r-lg:   16px;    /* cards, panels */
  --cj-r-xl:   24px;    /* hero, large sections */
  --cj-r-full: 9999px;  /* pills, avatars */

  /* ──────────────────────── Shadows ──────────────────────── */
  --cj-shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05);
  --cj-shadow-md:   0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --cj-shadow-lg:   0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.06);
  --cj-shadow-xl:   0 24px 60px rgba(11, 30, 63, 0.18);
  --cj-shadow-glow: 0 0 0 8px rgba(37, 99, 235, 0.10); /* focus ring */

  /* ────────────── Container widths & breakpoints ─────────── */
  --cj-container:        1200px;
  --cj-container-narrow: 720px;
  --cj-container-wide:   1440px;

  /* Motion */
  --cj-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --cj-fast:     0.15s var(--cj-ease);
  --cj-base:     0.2s  var(--cj-ease);
  --cj-slow:     0.3s  var(--cj-ease);
}

/* ============================================================
   Optional baseline element styles
   Remove or override if your design system already handles these.
   ============================================================ */

html { scroll-behavior: smooth; }
body {
  font-family: var(--cj-font-body);
  font-size: var(--cj-fs-body-md);
  line-height: var(--cj-lh-body-md);
  color: var(--cj-ink);
  background: var(--cj-snow);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cj-font-display);
  letter-spacing: -0.02em;
  color: var(--cj-ink);
}

h1 { font-size: var(--cj-fs-display-1); line-height: var(--cj-lh-display-1); font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: var(--cj-fs-display-2); line-height: var(--cj-lh-display-2); font-weight: 700; }
h3 { font-size: var(--cj-fs-heading-1); line-height: var(--cj-lh-heading-1); font-weight: 700; }
h4 { font-size: var(--cj-fs-heading-2); line-height: var(--cj-lh-heading-2); font-weight: 600; }

p { color: var(--cj-smoke); }

code, .mono {
  font-family: var(--cj-font-mono);
  font-size: var(--cj-fs-mono);
  background: var(--cj-mist);
  color: var(--cj-jet-blue);
  padding: 2px 8px;
  border-radius: var(--cj-r-sm);
}

a {
  color: var(--cj-jet-blue);
  text-decoration: none;
  transition: color var(--cj-fast);
}
a:hover { color: var(--cj-jet-blue-hover); text-decoration: underline; }

::selection {
  background: var(--cj-jet-blue);
  color: white;
}

/* ============================================================
   Utility classes (handy primitives)
   ============================================================ */

.cj-container        { max-width: var(--cj-container);        margin: 0 auto; padding: 0 var(--cj-s-5); }
.cj-container-narrow { max-width: var(--cj-container-narrow); margin: 0 auto; padding: 0 var(--cj-s-5); }
.cj-container-wide   { max-width: var(--cj-container-wide);   margin: 0 auto; padding: 0 var(--cj-s-5); }

.cj-eyebrow {
  font-family: var(--cj-font-mono);
  font-size: var(--cj-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--cj-jet-blue);
  font-weight: 500;
}

.cj-gradient-text {
  background: var(--cj-text-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cj-section { padding: var(--cj-s-9) 0; }
@media (max-width: 768px) {
  .cj-section { padding: var(--cj-s-8) 0; }
  h1 { font-size: 40px; line-height: 44px; }
  h2 { font-size: 32px; line-height: 38px; }
}