/* ── 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 ──────────────────────────────────────────────────
	   Host-theme adoption: read the active in-house theme's radius token
	   first (BuddyX / BuddyX Pro --bx-radius-*, Reign --reign-global-*-radius),
	   then a uniform px fallback so the plugin matches the theme's corner style
	   where the theme defines one and stays consistent everywhere else. */
	--wcb-radius-sm:   var( --bx-radius-button, var( --reign-global-button-radius, 6px ) );
	--wcb-radius-md:   var( --bx-radius-global, var( --reign-global-border-radius, var( --r-md, 8px ) ) );
	--wcb-radius-lg:   10px;
	--wcb-radius-xl:   var( --bx-radius-card,   12px );
	--wcb-radius-2xl:  16px;
	--wcb-radius-full: var( --bx-radius-pill,   9999px );

	/* ── Shadows ──────────────────────────────────────────────────────────
	   Community-OS alignment: read BuddyNext's soft layered --bn-shadow-* first,
	   with a matching standalone fallback, so card elevation is uniform suite-wide. */
	--wcb-shadow-xs:    var(--bn-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.04));
	--wcb-shadow-sm:    var(--bn-shadow-sm, 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 4px rgba(16, 24, 40, 0.04));
	--wcb-shadow-md:    var(--bn-shadow-md, 0 2px 4px rgba(16, 24, 40, 0.04), 0 8px 16px rgba(16, 24, 40, 0.06));
	--wcb-shadow-lg:    var(--bn-shadow-lg, 0 8px 16px rgba(16, 24, 40, 0.06), 0 24px 48px rgba(16, 24, 40, 0.08));
	/* ── 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);

	/* One focus ring for every filled control (buttons across every block +
	   theme compat layer). Was a hardcoded blue shared by nothing else on the
	   page; now tracks the same accent the fill itself uses, so a control's
	   ring, fill and hover shade all read as one system on any theme. */
	--wcb-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.12);
	--wcb-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--wcb-primary, #2563eb) 40%, transparent);

	/* Primary tinted banner (info-style callouts, onboarding banner). Defined
	   here so consumers stop falling back to a hardcoded light blue that never
	   flips in dark mode; the dark override lives in frontend.css. */
	--wcb-primary-bg:     #eff6ff;
	--wcb-primary-border: #bfdbfe;

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

	/* A 1px border for a control that needs to read against the page
	   without relying on fill alone (WCAG 1.4.11, 3:1 non-text contrast) —
	   --wcb-border alone is a subtle hairline (~1.2:1) meant for dividers,
	   not this. Mixed from --wcb-contrast (the primary text tone, not
	   secondary): --wcb-text-secondary is itself too light on some themes
	   (BuddyX/BuddyX Pro/TT25) for any mix of it to reach 3:1
	   (Basecamp 10348178594). 68% of --wcb-contrast clears 3:1 on every
	   theme we ship (BuddyX's grey text tone only reached 2.6:1 at 55%) while
	   staying below --wcb-success-border's 72% (todo stays lighter than done). */
	--wcb-border-strong: color-mix(in srgb, var(--wcb-contrast) 68%, transparent);

	/* 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). Fills use --wcb-primary-strong
	 * below, so the label stays white on every theme. */
	--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;
	/* Mid-tone, not the pale #bbf7d0 this used to be (~1.1-1.2:1 against
	 * the page, failing WCAG 1.4.11's 3:1) - a 72% mix of --wcb-success-fg
	 * measures ~3.7-5.2:1 (light/dark) and tracks that token's own
	 * dark-mode value automatically, same pattern as --wcb-danger-border.
	 * Kept a shade stronger than --wcb-border-strong's 68% so "done" still
	 * reads heavier than "todo" (Basecamp 10348178594). */
	--wcb-success-border:  color-mix(in srgb, var(--wcb-success-fg) 72%, transparent);

	--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;

	/* Purple accent — shortlisted applications + private job status. */
	--wcb-purple:          #7c3aed;
	--wcb-purple-fg:       #5b21b6;
	--wcb-purple-bg:       #ede9fe;

	/* 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;
}

/* Filled controls (buttons, active chips, step pills) always carry a white label.
   Where the theme's accent is too light for white (BuddyX #ef5455 is 3.46:1, Reign
   dark #97c0ee is 1.89:1), the FILL is darkened, not the text: the accent's own hue
   with its lightness capped at 0.54, where white reaches about 5:1. Browsers without
   relative colour syntax keep the plain accent. Text, borders and links keep the
   brand accent. */
:root {
	--wcb-primary-strong: var(--wcb-primary);
	--wcb-success-strong: var(--wcb-success);
}

@supports (color: oklch(from red l c h)) {
	:root {
		--wcb-primary-strong: oklch(from var(--wcb-primary) min(l, 0.54) c h);
		/* Same cap for a filled success badge (the done-step check) — a
		   theme's own mapped --wcb-success (Reign's scheme green measured
		   1.84:1) is exactly the same "too light for white" case as an
		   uncapped --wcb-primary. --wcb-success-border/-fg have no dark-mode
		   values of their own (never needed a solid fill before), so this
		   avoids relying on that pairing where mode makes the fg and a
		   would-be badge fill nearly the same tone. */
		--wcb-success-strong: oklch(from var(--wcb-success) min(l, 0.54) c h);
	}
}
/* One height for every listing search, filter and map control (was 37 to 50px). */
:root {
	--wcb-control-h: 44px; /* px, not rem: every theme renders the same field height */
}