/* JobMatcha — Design Tokens
   Bright, warm-encouraging, accessible. Light + Dark + High-Contrast.
   Color: teal-700 primary; greens/ambers/reds traffic-light safe pairs. */

:root {
  /* Type — base 17, scales 1.25 modular */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --fs-root: 17px;
  --fs-xs: 0.75rem;   /* 12.75 */
  --fs-sm: 0.875rem;  /* 14.875 */
  --fs-md: 1rem;      /* 17 */
  --fs-lg: 1.25rem;   /* 21.25 */
  --fs-xl: 1.5rem;    /* 25.5 */
  --fs-2xl: 1.875rem; /* 31.875 */
  --fs-3xl: 2.5rem;   /* 42.5 */
  --fs-4xl: 3.25rem;  /* 55 */
  --lh-body: 1.55;
  --lh-tight: 1.2;

  /* Spacing — 4px grid */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 72px;

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

  /* Shadow — soft, warm */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.05);

  /* Tap targets */
  --tap-min: 48px;
  --tap-cta: 56px;
}

/* ── Light theme (default) ─────────────────────────────────────── */
.theme-light {
  --bg: #FAFAF9;
  --bg-tinted: #F5F4EE;     /* warm off-white */
  --surface: #FFFFFF;
  --surface-2: #FBFAF6;
  --border: #E7E5E0;
  --border-strong: #D4D1CA;
  --text: #0F172A;
  --text-2: #475569;
  --text-3: #64748B;

  --primary: #4D7C0F;       /* matcha — lime-700 (AA on white) */
  --primary-hover: #3F6A0A;
  --primary-pressed: #335607;
  --primary-soft: #F2FBE3;
  --primary-soft-2: #E2F4C5;
  --on-primary: #FFFFFF;

  --success: #15803D;       /* green-700 */
  --success-soft: #DCFCE7;
  --warning: #B45309;       /* amber-700 (AA on white) */
  --warning-soft: #FEF3C7;
  --danger: #B91C1C;        /* red-700 */
  --danger-soft: #FEE2E2;

  --focus: #4D7C0F;
  --link: #3F6A0A;
}

/* ── Dark theme ────────────────────────────────────────────────── */
.theme-dark {
  --bg: #0F1411;
  --bg-tinted: #131915;
  --surface: #161D19;
  --surface-2: #1B231F;
  --border: #2A3530;
  --border-strong: #3B4842;
  --text: #F1F5F4;
  --text-2: #B6C0BB;
  --text-3: #8A958F;

  --primary: #BEF264;       /* matcha — lime-300, AA on dark surfaces */
  --primary-hover: #A3E635;
  --primary-pressed: #84CC16;
  --primary-soft: #1A2E05;
  --primary-soft-2: #2D4A0B;
  --on-primary: #1A2E05;

  --success: #4ADE80;
  --success-soft: #052E16;
  --warning: #FBBF24;
  --warning-soft: #3A2A06;
  --danger: #F87171;
  --danger-soft: #3F1414;

  --focus: #BEF264;
  --link: #BEF264;
}

/* ── High-Contrast theme — near-black on white, thicker borders ── */
.theme-hc {
  --bg: #FFFFFF;
  --bg-tinted: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F4F4F4;
  --border: #000000;
  --border-strong: #000000;
  --text: #000000;
  --text-2: #1A1A1A;
  --text-3: #2A2A2A;

  --primary: #2F5208;        /* deep matcha, AAA on white */
  --primary-hover: #243F06;
  --primary-pressed: #182B04;
  --primary-soft: #EEF7DA;
  --primary-soft-2: #DCEBB6;
  --on-primary: #FFFFFF;

  --success: #0B5E2A;
  --success-soft: #DDF3E2;
  --warning: #7A3F00;
  --warning-soft: #FBE7C6;
  --danger: #8B0F0F;
  --danger-soft: #FBD9D9;

  --focus: #000000;
  --link: #2F5208;
}

.theme-hc * {
  border-color: var(--border) !important;
}
.theme-hc a { text-decoration: underline; }

/* Density */
.density-compact {
  --pad-card: 18px;
  --pad-row: 10px 14px;
}
.density-comfy {
  --pad-card: 28px;
  --pad-row: 14px 20px;
}

/* Text-size scale */
.text-size-standard { font-size: 17px; }
.text-size-large    { font-size: 19px; }
.text-size-xl       { font-size: 22px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}