/* ── WP Career Board — Design Tokens ───────────────────────────────────── */

:root {

	/* ── Spacing ──────────────────────────────────────────────────────── */
	--wcb-space-xs:  4px;
	--wcb-space-sm:  8px;
	--wcb-space-md:  12px;
	--wcb-space-lg:  16px;
	--wcb-space-xl:  20px;
	--wcb-space-2xl: 24px;
	--wcb-space-3xl: 32px;
	--wcb-space-4xl: 48px;

	/* ── Typography — font-size ───────────────────────────────────────── */
	--wcb-text-xs:   0.75rem;
	--wcb-text-sm:   0.8125rem;
	--wcb-text-base: 0.875rem;
	--wcb-text-md:   0.9375rem;
	--wcb-text-lg:   1.125rem;
	--wcb-text-xl:   1.25rem;
	--wcb-text-2xl:  1.5rem;
	--wcb-text-3xl:  2rem;

	/* ── Typography — font-weight ─────────────────────────────────────── */
	--wcb-font-normal:   400;
	--wcb-font-medium:   500;
	--wcb-font-semibold: 600;
	--wcb-font-bold:     700;

	/* ── Typography — line-height ─────────────────────────────────────── */
	--wcb-leading-tight:   1.25;
	--wcb-leading-normal:  1.5;
	--wcb-leading-relaxed: 1.625;

	/* ── Border Radius ────────────────────────────────────────────────── */
	--wcb-radius-sm:   6px;
	--wcb-radius-md:   8px;
	--wcb-radius-lg:   10px;
	--wcb-radius-xl:   12px;
	--wcb-radius-2xl:  16px;
	--wcb-radius-full: 9999px;

	/* ── Shadows ──────────────────────────────────────────────────────── */
	--wcb-shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.04);
	--wcb-shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.08);
	--wcb-shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08);
	--wcb-shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.12);
	--wcb-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.12);

	/* ── Primary tints (theme-aware via color-mix) ──────────────────────
	   Useful for hover backgrounds and focus rings that should track
	   any theme override of --wcb-primary. Older browsers without
	   color-mix() support fall back to the static rgba below. */
	--wcb-primary-soft: rgba(37, 99, 235, 0.08);
	--wcb-primary-ring: rgba(37, 99, 235, 0.16);
	--wcb-primary-soft: color-mix(in srgb, var(--wcb-primary, #2563eb) 8%, transparent);
	--wcb-primary-ring: color-mix(in srgb, var(--wcb-primary, #2563eb) 16%, transparent);

	/* ── Semantic Colors (supplementary — core palette is in frontend.css) ── */
	--wcb-text-secondary: #6b7280;
	--wcb-text-tertiary:  #9ca3af;
	--wcb-bg-subtle:      #f8fafc;
	--wcb-bg-hover:       #f1f5f9;

	/* Foreground color for elements painted with --wcb-primary as
	 * background (filled buttons, badges, banners). Always-white in
	 * standard light/dark modes; themes that override --wcb-primary
	 * with a light accent should override --wcb-on-primary to match
	 * (e.g. a yellow primary needs a dark on-primary). */
	--wcb-on-primary: #ffffff;

	/* Status colors come in three layers:
	 *   --wcb-{status}        — solid, used as text on light backgrounds
	 *   --wcb-{status}-fg     — darker text used on the soft-bg variants
	 *   --wcb-{status}-bg     — primary tinted background (e.g. badges, banners)
	 *   --wcb-{status}-bg-soft — lighter tinted background (used for full-section panels)
	 *   --wcb-{status}-border — mid-tone, used on banners + outlined chips
	 */
	--wcb-success:         #16a34a;
	--wcb-success-fg:      #166534;
	--wcb-success-bg:      #dcfce7;
	--wcb-success-bg-soft: #f0fdf4;
	--wcb-success-border:  #bbf7d0;

	--wcb-warning:         #d97706;
	--wcb-warning-fg:      #92400e;
	--wcb-warning-bg:      #fef3c7;
	--wcb-warning-bg-soft: #fffbeb;
	--wcb-warning-border:  #fde68a;

	--wcb-danger:          #dc2626;
	--wcb-danger-fg:       #991b1b;
	--wcb-danger-bg:       #fee2e2;
	--wcb-danger-bg-soft:  #fef2f2;
	--wcb-danger-border:   #fecaca;

	--wcb-info:            #2563eb;
	--wcb-info-fg:         #1d4ed8;
	--wcb-info-bg:         #dbeafe;
	--wcb-info-bg-soft:    #eff6ff;
	--wcb-info-border:     #bfdbfe;

	/* Verified/trust accent (teal) — used on Verified company badges,
	   open-to-work pills, and resume-completeness meters. */
	--wcb-teal:            #0d9488;
	--wcb-teal-fg:         #0f766e;
	--wcb-teal-bg:         #ccfbf1;
	--wcb-teal-bg-soft:    #f0fdfa;

	/* ── Transitions ─────────────────────────────────────────────────── */
	--wcb-transition-fast:   0.12s ease;
	--wcb-transition-snappy: 0.15s ease;
	--wcb-transition-normal: 0.2s ease;
	--wcb-transition-slow:   0.3s ease;

	/* ── Avatar sizes ────────────────────────────────────────────────
	   Used by company avatars, candidate avatars, employer cards. The
	   size scale keeps card / list / hero layouts visually consistent. */
	--wcb-avatar-sm:  44px;
	--wcb-avatar-md:  52px;
	--wcb-avatar-lg:  56px;
	--wcb-avatar-xl:  64px;
	--wcb-avatar-2xl: 80px;

	/* Default fallback for the avatar background (overridden per-theme). */
	--wcb-avatar-bg: #1e293b;

	/* ── Lucide Icon Sizing ──────────────────────────────────────────── */
	--wcb-icon-xs:     14px;
	--wcb-icon-sm:     16px;
	--wcb-icon-md:     18px;
	--wcb-icon-lg:     24px;
	--wcb-icon-xl:     32px;
	--wcb-icon-2xl:    48px;
	--wcb-icon-stroke: 1.75;
}