/* ABOUTME: Design token mapping layer for the YCV Design System. */
/* ABOUTME: Maps --ycvds-* tokens to --yak-* theme tokens with fallbacks for portability. */

:root {
	/*
	 * You Can Vote brand (design guide) — use for admin pills, strategy UI, and accents.
	 * Distinct from Yak/theme tokens below.
	 */
	--ycv-brand-blue: #20409a;
	--ycv-brand-orange: #f26522;
	--ycv-brand-light-blue: #7aaff2;
	--ycv-brand-dark-blue: #121842;

	/* Colors — mapped from Yak theme tokens */
	--ycvds-color-primary: var(--yak-color-primary, #1a1a2e);
	/* Hero split panel — defaults to Yak accent; optional --yak-color-hero-panel wins first */
	--ycvds-hero-panel-bg: var(--yak-color-hero-panel, var(--yak-color-accent, #f26522));
	--ycvds-color-accent: var(--yak-color-accent, #f26522);
	--ycvds-color-surface: var(--yak-color-surface, #ffffff);
	--ycvds-color-muted: var(--yak-color-muted, #DCE3EA);
	--ycvds-color-text: var(--yak-color-text, #1a1a2e);
	--ycvds-color-text-light: var(--yak-color-text-light, #6b7280);

	/* Semantic status colors */
	--ycvds-color-info: #2563eb;
	--ycvds-color-warning: #d97706;
	--ycvds-color-urgent: #dc2626;
	--ycvds-color-success: #16a34a;

	/*
	 * Editor affordances — inspector URL warnings + canvas “no URL” badges.
	 * Used by src/shared/editor-affordances.scss (global editor + same tokens in block CSS).
	 */
	--ycvds-editor-affordance-warning-fg: #92400e;
	--ycvds-editor-affordance-warning-bg: #fef3c7;
	--ycvds-editor-affordance-warning-border: #f59e0b;
	--ycvds-editor-affordance-badge-radius: 2px;

	/* Typography — font families mapped from Yak theme tokens */
	--ycvds-font-base: var(--yak-primary-font, system-ui, -apple-system, sans-serif);
	--ycvds-font-heading: var(--yak-secondary-font, var(--ycvds-font-base));
	--ycvds-font-mono: var(--yak-font-mono, ui-monospace, monospace);

	/* Typography — font size scale (component-level, complements Yak theme scale) */
	--ycvds-font-size-xs:      0.6875rem;
	--ycvds-font-size-sm:      0.875rem;
	--ycvds-font-size-base:    1rem;
	--ycvds-font-size-md:      var(--yak-font-md, 1.125rem);
	--ycvds-font-size-lg:      clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
	--ycvds-font-size-xl:      clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
	--ycvds-font-size-2xl:     clamp(1.5rem, 1.3rem + 0.8vw, 2.25rem);
	--ycvds-font-size-3xl:     clamp(1.625rem, 1.3rem + 1.5vw, 2.5rem);
	--ycvds-font-size-display: clamp(1.875rem, 1.4rem + 2.2vw, 3.25rem);

	/* Typography — font weights */
	--ycvds-weight-regular:    400;
	--ycvds-weight-medium:     500;
	--ycvds-weight-semibold:   600;
	--ycvds-weight-bold:       700;
	--ycvds-weight-extrabold:  800;

	/* Typography — line heights */
	--ycvds-leading-none:      1;
	--ycvds-leading-tight:     1.15;
	--ycvds-leading-snug:      1.3;
	--ycvds-leading-normal:    1.5;
	--ycvds-leading-relaxed:   1.65;

	/* Typography — letter spacing */
	--ycvds-tracking-tight:    -0.02em;
	--ycvds-tracking-normal:   0.01em;
	--ycvds-tracking-wide:     0.04em;
	--ycvds-tracking-caps:     0.08em;

	/* Spacing scale */
	--ycvds-spacing-xs: 0.25rem;
	--ycvds-spacing-sm: 0.5rem;
	--ycvds-spacing-md: 1rem;
	--ycvds-spacing-lg: 1.5rem;
	--ycvds-spacing-xl: 2rem;
	--ycvds-spacing-2xl: 3rem;
	--ycvds-spacing-3xl: 4rem;

	/* Layout */
	--ycvds-content-width: var(--wp--style--global--content-size, 75ch);
	--ycvds-wide-width: var(--wp--style--global--wide-size, 90rem);
	--ycvds-radius: var(--yak-radius, 0.375rem);
	--ycvds-radius-sm: calc(var(--ycvds-radius) / 1.5);
	--ycvds-radius-lg: calc(var(--ycvds-radius) * 2);

	/*
	 * Shared “YCV button” look — core `core/button` (see css/core-button-ycvds.css) + Quick Links.
	 * Tight radius (not core’s 9999px pill); em padding matches wp-includes/blocks/button.
	 */
	--ycvds-ui-button-padding-y: calc(0.667em + 2px);
	--ycvds-ui-button-padding-x: calc(1.333em + 2px);
	--ycvds-ui-button-border-radius: var(--ycvds-radius, 0.375rem);
	--ycvds-ui-button-box-shadow: none;
	/* Text on solid fills — block themes often pair base with primary/accent */
	--ycvds-ui-button-text-on-fill: var(
		--wp--preset--color--base,
		var(--ycvds-color-surface)
	);
}