/* ============================================================
   ReputationRadar — colors_and_type.css
   Foundational CSS variables for color, type, spacing,
   shadows, and semantic text styles.
   Sourced from website-global.css + dashboard-globals.css +
   Hero.astro / DashboardMockup.astro brand-magic palette.
   ============================================================ */

:root {
  /* ----------- Primary (blue) — links, focus rings, dashboard CTAs ----- */
  --color-primary-50:  #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary-950: #172554;

  /* ----------- Accent (green) — success, active badges --------------- */
  --color-accent-50:  #f0fdf4;
  --color-accent-100: #dcfce7;
  --color-accent-200: #bbf7d0;
  --color-accent-300: #86efac;
  --color-accent-400: #4ade80;
  --color-accent-500: #22c55e;
  --color-accent-600: #16a34a;
  --color-accent-700: #15803d;

  /* ----------- Danger (red) — errors, destructive ------------------- */
  --color-danger-500: #ef4444;
  --color-danger-600: #dc2626;

  /* ----------- Warning (amber) — used in dashboard mockup gauge ----- */
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;

  /* ----------- Neutral (slate) — workhorse grays -------------------- */
  --color-neutral-50:  #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-neutral-950: #020617;

  /* ----------- Brand-magic palette (Hero / CTA only) ----------------
     Lives outside the Tailwind theme — these are the "memorable"
     identity colors that define the marketing visual signature. */
  --brand-indigo-300: #a5b4fc;   /* hero eyebrow text */
  --brand-indigo-500: #6366f1;   /* CTA gradient start */
  --brand-indigo-600: #4f46e5;   /* CTA gradient end */
  --brand-indigo-700: #4338ca;   /* CTA hover text */
  --brand-purple-500: #a855f7;   /* hero glow accent */

  --brand-navy-900: #0b1120;     /* hero bg top */
  --brand-navy-800: #111a33;     /* hero bg bottom */
  --brand-cta-end-deep: #312e81; /* CTA section gradient end */
  --brand-cta-mid:     #1e1b4b;  /* CTA section gradient mid */

  /* The signature CTA gradient — used everywhere on marketing */
  --brand-cta-gradient: linear-gradient(135deg, #6366f1, #4f46e5);
  --brand-cta-shadow:        0 8px 20px rgba(99, 102, 241, 0.35);
  --brand-cta-shadow-hover:  0 12px 28px rgba(99, 102, 241, 0.45);

  /* Hero background gradient + glow tints */
  --brand-hero-gradient: linear-gradient(180deg, #0b1120 0%, #111a33 100%);
  --brand-glow-indigo:   rgba(99, 102, 241, 0.35);
  --brand-glow-blue:     rgba(59, 130, 246, 0.28);
  --brand-glow-purple:   rgba(168, 85, 247, 0.20);

  /* ----------- Semantic foreground / background -------------------- */
  --fg-1: var(--color-neutral-900);  /* headings on light */
  --fg-2: var(--color-neutral-800);  /* body on light */
  --fg-3: var(--color-neutral-600);  /* secondary text */
  --fg-4: var(--color-neutral-500);  /* tertiary, fine print */
  --fg-on-dark-1: #f8fafc;           /* heading on navy */
  --fg-on-dark-2: #e2e8f0;           /* body on navy */
  --fg-on-dark-3: #cbd5e1;           /* secondary on navy */
  --fg-on-dark-4: #94a3b8;           /* tertiary on navy */

  --bg-page:    #ffffff;
  --bg-subtle:  var(--color-neutral-50);
  --bg-muted:   var(--color-neutral-100);
  --bg-card:    #ffffff;
  --bg-dark:    var(--color-neutral-900);
  --bg-darker:  var(--color-neutral-950);
  --bg-hero:    var(--brand-hero-gradient);

  /* ----------- Borders --------------------------------------------- */
  --border-subtle:  var(--color-neutral-100);   /* header bottom */
  --border-default: var(--color-neutral-200);   /* card borders */
  --border-strong:  var(--color-neutral-300);   /* form resting */
  --border-hover:   var(--color-neutral-400);   /* form hover */
  --border-focus:   var(--color-primary-500);

  /* ----------- Typography ------------------------------------------ */
  --font-sans:    'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: var(--font-sans);
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Monaco, Consolas,
                  'Liberation Mono', 'Courier New', monospace;

  /* Type scale (Tailwind defaults — what the codebase actually uses) */
  --text-xs:   12px;   /* eyebrows, badges, fine print */
  --text-sm:   14px;   /* dashboard body, UI text */
  --text-base: 16px;   /* marketing body, prose */
  --text-lg:   18px;   /* lead paragraphs */
  --text-xl:   20px;   /* card titles, result-brand */
  --text-2xl:  24px;   /* dashboard H1 */
  --text-3xl:  30px;   /* section H2 (small) */
  --text-4xl:  36px;   /* section H2 (large), result-score */
  --hero-title-size: clamp(36px, 5.2vw, 64px);

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;

  /* Line height */
  --leading-tight:    1.05;
  --leading-snug:     1.3;
  --leading-normal:   1.5;
  --leading-relaxed:  1.6;
  --leading-body:     1.7;  /* prose */

  /* Letter spacing */
  --tracking-tight:    -0.03em;   /* hero title */
  --tracking-snug:     -0.02em;   /* H2 */
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-eyebrow:  0.14em;    /* uppercase eyebrow */

  /* ----------- Spacing scale (Tailwind 4-pt) ----------------------- */
  --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-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Section vertical rhythm (responsive) */
  --section-pad-y-sm: 48px;
  --section-pad-y-md: 64px;
  --section-pad-y-lg: 80px;

  /* ----------- Radii ----------------------------------------------- */
  --radius-sm:    4px;
  --radius-md:    6px;    /* small chips */
  --radius-lg:    8px;    /* inputs, buttons */
  --radius-xl:    12px;   /* cards */
  --radius-2xl:   16px;   /* result-card, dashboard mockup card */
  --radius-3xl:   24px;
  --radius-island: 36px;  /* CTA island */
  --radius-full:  9999px; /* eyebrows, avatars, chips */

  /* ----------- Shadows --------------------------------------------- */
  --shadow-sm:        0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-default:   0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-lg:        0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:        0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl:       0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-cta:       0 8px 20px rgba(99, 102, 241, 0.35);
  --shadow-cta-hover: 0 12px 28px rgba(99, 102, 241, 0.45);
  --shadow-mockup:    0 20px 60px rgba(0, 0, 0, 0.45);
  --shadow-island:    0 24px 60px rgba(15, 23, 42, 0.15);

  /* ----------- Motion ---------------------------------------------- */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard:   ease;
  --duration-instant: 100ms;  /* transform on hover */
  --duration-fast:    150ms;  /* color/bg/shadow */
  --duration-base:    200ms;
  --duration-slow:    300ms;

  /* ----------- Layout ---------------------------------------------- */
  --container-max:    1280px;
  --container-pad-x:  16px;
  --container-pad-x-md: 24px;
  --container-pad-x-lg: 32px;
}

/* ============================================================
   Semantic element styles
   Use these as defaults; override with utilities as needed.
   ============================================================ */

html { font-family: var(--font-sans); }

body {
  font-family: var(--font-sans);
  color: var(--fg-2);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--fg-1);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-tight);
  margin: 0;
  font-weight: var(--weight-bold);
}

h1 {
  /* Marketing hero H1 (use --hero-title-size for fluid hero title) */
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
  line-height: 1.1;
}

h2 {
  /* Section H2 */
  font-size: clamp(28px, 4vw, 44px);
  font-weight: var(--weight-extrabold);
  line-height: 1.1;
  letter-spacing: var(--tracking-snug);
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

p {
  margin: 0 0 var(--space-4);
  line-height: var(--leading-relaxed);
}

.prose       { font-size: var(--text-base); line-height: 1.75; }
.prose-sm    { font-size: var(--text-sm);   line-height: 1.6; }
.prose-lg    { font-size: var(--text-lg);   line-height: 1.78; }

/* Eyebrow — small uppercase pill above section titles */
.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--brand-indigo-600);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  padding: 6px 14px;
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: var(--radius-full);
}
.eyebrow.is-dark {
  color: var(--brand-indigo-300);
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.3);
}

a {
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--color-primary-700); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--bg-muted);
  padding: 2px 6px;
  border-radius: var(--radius-md);
  color: var(--color-neutral-800);
}

small, .fine-print {
  font-size: 13px;
  color: var(--fg-4);
}

hr {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: var(--space-8) 0;
}

::selection {
  background: rgba(99, 102, 241, 0.2);
  color: var(--color-neutral-900);
}