/**
 * Sintesi Atlantic Design Language — Canonical Design Tokens
 *
 * Single source of truth for the entire Sintesi Platform.
 * All plugins should import this file rather than redefining tokens.
 *
 * @version 1.0.0
 * @see     SintesiBrandPlaybook.html
 *
 * Usage in PHP:
 *   wp_enqueue_style( 'sintesi-design-tokens', PLUGIN_URL . 'vendor/sintesi-design-tokens.css' );
 *   — or —
 *   The Sintesi core plugin enqueues this globally in admin.
 */

/* ==========================================================================
   1. COLOUR PALETTE — Atlantic + Carta
   ========================================================================== */

:root {

	/* ── Boreal (Dark / Night Forest) ───────────────────────────────────── */
	--boreal-0: #0F1A22;
	--boreal-1: #1A2832;
	--boreal-2: #243440;
	--boreal-3: #2E4050;

	--boreal-0-rgb: 15, 26, 34;
	--boreal-1-rgb: 26, 40, 50;
	--boreal-2-rgb: 36, 52, 64;
	--boreal-3-rgb: 46, 64, 80;

	/* ── Shore (Light / Paper) ──────────────────────────────────────────── */
	--shore-0: #FDFBF7;
	--shore-1: #F8F6F2;
	--shore-2: #F0EBE5;
	--shore-3: #E0D8D0;

	--shore-0-rgb: 253, 251, 247;
	--shore-1-rgb: 248, 246, 242;
	--shore-2-rgb: 240, 235, 229;
	--shore-3-rgb: 224, 216, 208;

	/* ── Atlantic (Primary Blues) ────────────────────────────────────────── */
	--atlantic-0: #1A3548;
	--atlantic-1: #2B577D;
	--atlantic-2: #4A7A9C;
	--atlantic-3: #6A9ABC;

	--atlantic-0-rgb: 26, 53, 72;
	--atlantic-1-rgb: 43, 87, 125;
	--atlantic-2-rgb: 74, 122, 156;
	--atlantic-3-rgb: 106, 154, 188;

	/* ── Warmth (Accent / CTA — Ginger) ─────────────────────────────────── */
	--warmth-0: #C97B4A;
	--warmth-1: #D4885C;
	--warmth-2: #E49A6E;
	--warmth-3: #EAA853;
	--warmth-deep: #9C5228;

	--warmth-1-rgb: 212, 136, 92;

	/* ── Warmth CTA (Terracotta CTA) ────────────────────────────────────── */
	--warmth-cta: #B85A2E;
	--warmth-cta-hover: #9C5228;

	/* ── Granite (Neutrals) ─────────────────────────────────────────────── *
	 * Ramp goes dark-to-light; granite-3 is the lightest "dark" shade that
	 * works as muted text on LIGHT surfaces (5.8:1 vs shore-1 — passes
	 * WCAG AA). granite-4 extends the ramp into LIGHTER territory for use
	 * on DARK surfaces (5.15:1 vs boreal-2, 6.07:1 vs boreal-0, 6.95:1 vs
	 * boreal-0 — all pass WCAG 2.2 AA for normal text). Added session 61
	 * after 3 farmer reports of illegible grey-on-black muted text;
	 * remapped into `--text-muted` in both the @media (prefers-color-
	 * scheme: dark) and .dark-mode blocks below. */
	--granite-0: #2A3640;
	--granite-1: #3C4A56;
	--granite-2: #4E5C68;
	--granite-3: #5C6A76;
	--granite-4: #9AA8B5;  /* AODA/WCAG AA muted text on dark surfaces */

	--granite-0-rgb: 42, 54, 64;
	--granite-1-rgb: 60, 74, 86;
	--granite-2-rgb: 78, 92, 104;
	--granite-3-rgb: 92, 106, 118;

	/* ── Carta Ink (E-Paper Inspired) ───────────────────────────────────── */
	--ink-black: #1A1A1A;
	--ink-ghost: #6F6F6F;
	--ink-pencil: #5C6B8F;
	--ink-alert: #A64E4E;
	--ink-highlight: #E8D880;
	--ink-brick: #B35454;
	--ink-sage: #547068;
	--ink-sketch: #9B8B7A;
	--ink-warm: #D4885C;
	--ink-amber: #C4956A;

	/* ── Forest (Growth / Vitality Greens) ──────────────────────────────── */
	--forest-1: #2E6B47;
	--forest-2: #3D8060;
	--forest-3: #5BA37E;
	--forest-4: #B8DCC9;

	/* ── Status ──────────────────────────────────────────────────────────── */
	--status-success: #4A8B6E;
	--status-warning: #D4885C;
	--status-error: #C75B5B;
	--status-info: #4A7A9C;
	--status-success-foreground: #0F1A22;
	--status-warning-foreground: #0F1A22;
	--status-error-foreground: #0F1A22;
	--status-info-foreground: #FFF;
	--accent-primary-foreground: #0F1A22;

	--status-success-rgb: 74, 139, 110;
	--status-error-rgb: 199, 91, 91;
	--status-warning-rgb: 212, 136, 92;
	--status-info-rgb: 74, 122, 156;

	--status-success-light: rgba(var(--status-success-rgb), 0.12);
	--status-warning-light: rgba(var(--status-warning-rgb), 0.12);
	--status-error-light: rgba(var(--status-error-rgb), 0.10);
	--status-info-light: rgba(var(--status-info-rgb), 0.10);

	--status-error-text: #8B3A3A;
	--status-error-hover: #B34A4A;
	--status-success-text: #2D6B4E;

	/* ── Status Surface Pairs (bg + text for badges / pills) ────────────── */
	--status-success-bg: #E4F1EA;
	--status-warning-bg: #F7E9DC;
	--status-warning-text: #9E5123;
	--status-error-bg: #F7DFDF;
	--status-info-bg: #E1ECF3;
	--status-info-text: #2B577D;

	/* ── Status short-hand aliases (prefer --status-* above in components) ── */
	--error:        var(--status-error);
	--success:      var(--status-success);
	--warning:      var(--status-warning);
	--info:         var(--status-info);
	--error-subtle: var(--status-error-light);
	--error-border: rgba(var(--status-error-rgb), 0.35);

	/* ── Tier Metals (Supplier / Buyer / Pricing Tiers) ─────────────────── */
	--tier-gold-bg: #F5EDDB;
	--tier-gold-text: #7A5D1F;
	--tier-silver-bg: #EBEDF0;
	--tier-silver-text: #4A4F59;
	--tier-bronze-bg: #F0E6DC;
	--tier-bronze-text: #7A5538;

	/* =======================================================================
	   2. SEMANTIC TOKENS (Light Mode)
	   ======================================================================= */

	/* ── Backgrounds ─────────────────────────────────────────────────────── */
	--bg-primary: var(--shore-1);
	--bg-secondary: var(--shore-0);
	--bg-tertiary: var(--shore-2);
	--bg-elevated: var(--shore-0);

	/* ── Text ────────────────────────────────────────────────────────────── */
	--text-primary: var(--atlantic-0);
	--text-secondary: var(--granite-1);
	--text-muted: var(--granite-3);
	--text-inverse: var(--shore-0);

	/* ── Borders ─────────────────────────────────────────────────────────── */
	--border-default: var(--shore-3);
	--border-subtle: var(--shore-2);
	--border-strong: var(--granite-3);

	/* ── Accent / Interactive ────────────────────────────────────────────── */
	--accent-primary: var(--warmth-1);
	--accent-secondary: var(--atlantic-2);
	--annotation-foreground: var(--warmth-deep);

	--interactive-default: var(--atlantic-1);
	--interactive-hover: var(--atlantic-0);
	--interactive-active: var(--atlantic-2);
	--interactive-subtle: rgba(var(--atlantic-1-rgb), 0.08);

	/* ── Focus ───────────────────────────────────────────────────────────── */
	--focus-ring: 0 0 0 3px rgba(var(--atlantic-1-rgb), 0.35);

	/* =======================================================================
	   3. TYPOGRAPHY
	   ======================================================================= */

	--font-display: 'Nunito', system-ui, -apple-system, sans-serif;
	--font-ui: 'Outfit', system-ui, -apple-system, sans-serif;
	--font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
	--font-reading: 'Lora', georgia, 'Times New Roman', serif;
	--font-handwriting: 'Caveat', 'Kalam', cursive;
	--font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

	/* ── Prefixed aliases (used by theme.json and plugin stylesheets) ──── */
	--sintesi-font-display: var(--font-display);
	--sintesi-font-ui: var(--font-ui);
	--sintesi-font-body: var(--font-body);
	--sintesi-font-reading: var(--font-reading);
	--sintesi-font-handwriting: var(--font-handwriting);
	--sintesi-font-mono: var(--font-mono);
	--sintesi-font-primary: var(--font-display);

	/* ── Font Sizes ──────────────────────────────────────────────────────── */
	--text-xs: 0.75rem;     /* 12px */
	--text-sm: 0.875rem;    /* 14px */
	--text-base: 1rem;      /* 16px */
	--text-lg: 1.125rem;    /* 18px */
	--text-xl: 1.25rem;     /* 20px */
	--text-2xl: 1.75rem;    /* 28px */
	--text-3xl: 2.25rem;    /* 36px */
	--text-4xl: 3rem;       /* 48px */

	/* =======================================================================
	   4. SPACING (4px base unit)
	   ======================================================================= */

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;

	/* Semantic aliases */
	--space-xs: var(--space-1);
	--space-sm: var(--space-2);
	--space-md: var(--space-4);
	--space-lg: var(--space-6);
	--space-xl: var(--space-8);

	/* =======================================================================
	   5. BORDER RADIUS
	   ======================================================================= */

	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-full: 9999px;
	--radius-round: 9999px;           /* Alias used by shared components (UserAvatar, etc.). */
	--radius-pill: 999px;             /* Alias for fully-rounded elements like pills/chips. */
	--paper-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");

	/* ── Native admin compatibility layer ──────────────────────────────── *
	 * The React rewrites originally used these prefixed variables while the
	 * PHP screens used the semantic tokens above. Keep both surfaces on the
	 * same palette and spacing scale instead of allowing browser fallbacks
	 * (several of which were pure white or generic WordPress grey). New
	 * shared components should use the unprefixed semantic names. */
	--sintesi-color-surface: var(--bg-elevated);
	--sintesi-color-surface-alt: var(--bg-secondary);
	--sintesi-color-chip: var(--bg-tertiary);
	--sintesi-color-text: var(--text-primary);
	--sintesi-color-muted: var(--text-muted);
	--sintesi-color-border: var(--border-default);
	--sintesi-color-link: var(--interactive-default);
	--sintesi-radius: var(--radius-md);
	--sintesi-space-1: var(--space-1);
	--sintesi-space-2: var(--space-2);
	--sintesi-space-3: var(--space-3);
	--sintesi-space-4: var(--space-4);
	--sintesi-space-5: var(--space-6);
	--sintesi-space-6: var(--space-10);

	/* =======================================================================
	   6. SHADOWS (Minimal, E-Ink Inspired)
	   ======================================================================= */

	--shadow-sm: 0 1px 2px rgba(var(--boreal-0-rgb), 0.04);
	--shadow-md: 0 4px 12px rgba(var(--boreal-0-rgb), 0.06);
	--shadow-lg: 0 8px 24px rgba(var(--boreal-0-rgb), 0.08);
	--shadow-focus: 0 0 0 3px rgba(var(--atlantic-1-rgb), 0.65);

	/* =======================================================================
	   7. ANIMATION / MOTION
	   ======================================================================= */

	--duration-fast: 120ms;
	--duration-normal: 200ms;
	--duration-slow: 300ms;

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

	/* ── Transition shorthands ──────────────────────────────────────────── */
	--transition-fast: all 120ms cubic-bezier(0.16, 1, 0.3, 1);
	--transition-normal: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
	--transition-slow: all 300ms cubic-bezier(0.16, 1, 0.3, 1);

	/* =======================================================================
	   8. Z-INDEX SCALE
	   ======================================================================= */

	--z-base: 0;
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-fixed: 1030;
	--z-overlay: 1040;
	--z-modal: 1050;
	--z-popover: 1060;
	--z-tooltip: 1070;
	--z-toast: 1500;
	--z-admin-overlay: 100000; /* WP admin modal layers above core/media overlays */

	/* =======================================================================
	   9. BREAKPOINTS (reference only — CSS custom properties cannot be used
	      in @media queries; these document the canonical breakpoint values)
	   ======================================================================= */

	/*
	 * --bp-sm:  576px;  — small phones to landscape phones
	 * --bp-md:  768px;  — tablets
	 * --bp-lg:  1024px; — small desktops, landscape tablets
	 * --bp-xl:  1280px; — large desktops
	 * --bp-xxl: 1440px; — extra-wide displays
	 */
}

/* ==========================================================================
   10. DARK MODE
   ========================================================================== */

@media (prefers-color-scheme: dark) {

	:root {
		--bg-primary: var(--boreal-0);
		--bg-secondary: var(--boreal-1);
		--bg-tertiary: var(--boreal-2);
		--bg-elevated: var(--boreal-2);

		--text-primary: #E9E4DC;   /* playbook §12: text warms to parchment at night */
		--text-secondary: var(--shore-3);

		/* --text-muted remapped to granite-4 (#9AA8B5) in dark mode so
		 * muted body copy passes WCAG 2.2 AA / AODA on dark surfaces.
		 * granite-3 (#5C6A76) was failing at ~3.3:1 on boreal-0. */
		--text-muted: var(--granite-4);
		--text-inverse: var(--boreal-0);

		--border-default: var(--boreal-3);
		--border-subtle: var(--boreal-2);
		--border-strong: var(--granite-2);

		/* --ink-pencil (links, pencil-blue accents) at #5C6B8F fails
		 * ~3.6:1 on boreal-0; remap to atlantic-3 (#6A9ABC, ~6.5:1). */
		--ink-pencil: #9FB0D6;     /* playbook §12 night ink (was atlantic-3; both AA) */

		/* --ink-ghost (#787878, timestamps + secondary meta) at ~4.3:1
		 * just misses AA; remap to granite-4 for the same window. */
		--ink-ghost: var(--granite-4);

		/* playbook §12 — every ink carries a night value (all AA on boreal-0) */
		--ink-black: #E9E4DC;
		--ink-brick: #D08A8A;
		--ink-alert: #D98A8A;
		--ink-sage: #8EAAA0;

		--status-error-text: #E8A0A0;
		--status-success-text: #7BC4A0;

		/* ── Status Surface Pairs (dark) ─────────────────────────────── */
		--status-success-bg: #17301F;
		--status-warning-bg: #3A2417;
		--status-warning-text: var(--warmth-3);
		--status-error-bg: #3A1B1B;
		--status-info-bg: #16242E;
		--status-info-text: var(--atlantic-3);

		/* ── Tier Metals (dark) ──────────────────────────────────────── */
		--tier-gold-bg: #3B2F18;
		--tier-gold-text: #F1D07A;
		--tier-silver-bg: #2B3339;
		--tier-silver-text: #CCD5DC;
		--tier-bronze-bg: #3A2A20;
		--tier-bronze-text: #D9A77A;

		--accent-primary: var(--warmth-3);
		--accent-secondary: var(--atlantic-3);

		--interactive-default: var(--atlantic-3);
		--interactive-hover: var(--ink-pencil);
		--interactive-active: var(--shore-3);
		--annotation-foreground: var(--warmth-3);

		--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20);
		--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.30);
		--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.40);
	}
}

/* Class-based toggle (mirrors the media query) */
.dark-mode {
	--bg-primary: var(--boreal-0);
	--bg-secondary: var(--boreal-1);
	--bg-tertiary: var(--boreal-2);
	--bg-elevated: var(--boreal-2);

	--text-primary: #E9E4DC;             /* playbook §12 parchment */
	--text-secondary: var(--shore-3);
	--text-muted: var(--granite-4);      /* WCAG AA fix (session 61) */
	--text-inverse: var(--boreal-0);

	--border-default: var(--boreal-3);
	--border-subtle: var(--boreal-2);
	--border-strong: var(--granite-2);

	--ink-pencil: #9FB0D6;               /* playbook §12 night ink */
	--ink-ghost: var(--granite-4);        /* timestamps/meta (session 61) */
	--ink-black: #E9E4DC;                 /* playbook §12 night inks */
	--ink-brick: #D08A8A;
	--ink-alert: #D98A8A;
	--ink-sage: #8EAAA0;

	--accent-primary: var(--warmth-3);
	--accent-secondary: var(--atlantic-3);

	--interactive-default: var(--atlantic-3);
	--interactive-hover: var(--ink-pencil);
	--interactive-active: var(--shore-3);
	--annotation-foreground: var(--warmth-3);

	--status-error-text: #E8A0A0;
	--status-success-text: #7BC4A0;

	/* ── Status Surface Pairs (dark) ─────────────────────────────────── */
	--status-success-bg: #17301F;
	--status-warning-bg: #3A2417;
	--status-warning-text: var(--warmth-3);
	--status-error-bg: #3A1B1B;
	--status-info-bg: #16242E;
	--status-info-text: var(--atlantic-3);

	/* ── Tier Metals (dark) ──────────────────────────────────────────── */
	--tier-gold-bg: #3B2F18;
	--tier-gold-text: #F1D07A;
	--tier-silver-bg: #2B3339;
	--tier-silver-text: #CCD5DC;
	--tier-bronze-bg: #3A2A20;
	--tier-bronze-text: #D9A77A;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.30);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.40);
}

/* ==========================================================================
   11. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	:where(.sintesi-shell, .sintesi-admin-wrap, [class^="sintesi-"], [class*=" sintesi-"]),
	:where(.sintesi-shell, .sintesi-admin-wrap, [class^="sintesi-"], [class*=" sintesi-"]) *,
	:where(.sintesi-shell, .sintesi-admin-wrap, [class^="sintesi-"], [class*=" sintesi-"])::before,
	:where(.sintesi-shell, .sintesi-admin-wrap, [class^="sintesi-"], [class*=" sintesi-"])::after,
	:where(.sintesi-shell, .sintesi-admin-wrap, [class^="sintesi-"], [class*=" sintesi-"]) *::before,
	:where(.sintesi-shell, .sintesi-admin-wrap, [class^="sintesi-"], [class*=" sintesi-"]) *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}