/* ── G1Careers Design Tokens ── */
/* Source: ui-ux-pro-max design system — Trust & Authority pattern */

:root {
  /* ── Dark surfaces ── */
  --bg-dark:          #0F172A;
  --bg-dark-2:        #1E293B;
  --bg-dark-card:     #1E293B;
  --bg-dark-hover:    #334155;

  /* ── Light surfaces ── */
  --bg-light:         #F8FAFC;
  --bg-light-2:       #F1F5F9;
  --bg-white:         #ffffff;

  /* ── Brand accent — use as BACKGROUND only, never as standalone text on light ── */
  --accent:           #78EB54;
  --accent-hover:     #65d046;
  --accent-dim:       #45A735;
  --accent-tint-8:    rgba(120, 235, 84, 0.08);
  --accent-tint-12:   rgba(120, 235, 84, 0.12);
  --accent-tint-20:   rgba(120, 235, 84, 0.20);
  --accent-tint-25:   rgba(120, 235, 84, 0.25);
  --accent-glow:      rgba(120, 235, 84, 0.35);

  /* ── Text on DARK backgrounds — all pass 4.5:1 WCAG AA ── */
  --text-on-dark:     #F8FAFC;   /* 15.4:1 on #0F172A */
  --text-on-dark-2:   #CBD5E1;   /* 8.2:1 on #0F172A */
  --text-on-dark-3:   #94A3B8;   /* 5.0:1 on #0F172A */

  /* ── Text on LIGHT backgrounds — all pass 4.5:1 WCAG AA ── */
  --text-primary:     #020617;   /* 19:1 on white */
  --text-secondary:   #334155;   /* 10.7:1 on white */
  --text-muted:       #64748B;   /* 4.7:1 on white only */
  --text-accent-dark: #0F172A;   /* for text ON accent (#78EB54) background */

  /* ── Borders ── */
  --border-dark:      rgba(120, 235, 84, 0.20);
  --border-light:     #D1FAE5;
  --border-subtle:    #E2E8F0;

  /* ── Engagement badge colors — all WCAG AA ── */
  --badge-perm-bg:    #DCFCE7;
  --badge-perm-text:  #14532D;
  --badge-contract-bg:#FEF3C7;
  --badge-contract-text: #78350F;
  --badge-cth-bg:     #EDE9FE;
  --badge-cth-text:   #3B0764;
  --badge-default-bg: #F3F4F6;
  --badge-default-text: #374151;

  /* ── Shadows ── */
  --shadow-sm:        0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:        0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:        0 10px 25px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 20px 40px rgba(15,23,42,0.12);
  --shadow-accent:    0 4px 14px rgba(120,235,84,0.25);
  --shadow-accent-lg: 0 8px 28px rgba(120,235,84,0.35);

  /* ── Spacing (16px base) ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* ── Radii ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 50px;

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   350ms ease;
  --transition-reveal: 500ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Typography — Lexend (headings) + Source Sans 3 (body) ── */
  --font-display: 'Lexend', sans-serif;
  --font-body:    'Source Sans 3', 'Source Sans Pro', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ── Type scale ── */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   40px;
  --text-4xl:   clamp(36px, 5vw, 52px);
  --text-hero:  clamp(36px, 5vw, 60px);

  /* ── Line heights ── */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* ── Container ── */
  --container-max: 1200px;
  --container-pad: clamp(20px, 5vw, 40px);
}

/* Dark section utility */
.section-dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

.section-light {
  background: var(--bg-white);
  color: var(--text-primary);
}

.section-tint {
  background: var(--bg-light);
  color: var(--text-primary);
}