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

	/* AA-passing text colour for warmth-0 accent text on light warmth-tinted
	 * surfaces. --warmth-0 itself (#c97b4a) only reaches ~3.3:1 on white and
	 * is non-compliant (WCAG 1.4.3) as body/label text — use this token
	 * instead wherever warmth-toned text needs to pass AA (4.5:1 normal
	 * text). Verified contrast ratios: 6.82:1 on #FFFFFF, 5.76:1 on
	 * #F0EBE5 (shore-2), 5.63:1 on #F5E7DA, 6.24:1 on #FEF3E8
	 * (status-warning-light), 5.76:1 on #fbe9d8. Added to close a
	 * documented WCAG 1.4.3 gap — no warmth text token previously existed. */
	--warmth-0-text: #8a4a1e;

	--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`/`--status-error` were lightened by ~3-5% (session 64)
	 * — `#4A8B6E`→`#4F8E72`, `#C75B5B`→`#CA6363` — because their own
	 * `-foreground` ink (`#0F1A22`, used as `.sintesi-btn--success`/
	 * `.sintesi-btn--danger` label text: sintesi-admin-components.css /
	 * sintesi-frontend-components.css) measured 4.37:1 / 4.26:1 against them,
	 * just under WCAG AA's 4.5:1 for normal text — caught by
	 * `platform-native/tests/js/design-tokens-contrast.test.js`. Now 4.57:1 /
	 * 4.60:1. Visually indistinguishable; every other consumer (borders,
	 * chart marks, `-light` tints) is unaffected by a shift this small. */
	--status-success: #4f8e72;
	--status-warning: #d4885c;
	--status-error: #ca6363;
	--status-info: #4a7a9c;
	--status-success-foreground: #0f1a22;
	--status-warning-foreground: #0f1a22;
	--status-error-foreground: #0f1a22;
	--status-info-foreground: #fdfbf7;
	--accent-primary-foreground: #0f1a22;

	--status-success-rgb: 79, 142, 114;
	--status-error-rgb: 202, 99, 99;
	--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.1);
	--status-info-light: rgba(var(--status-info-rgb), 0.1);

	--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%20viewBox=%270%200%20200%20200%27%20xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter%20id=%27noise%27%3E%3CfeTurbulence%20type=%27fractalNoise%27%20baseFrequency=%270.9%27%20numOctaves=%274%27%20stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect%20width=%27100%25%27%20height=%27100%25%27%20filter=%27url%28%23noise%29%27/%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 remapped to granite-4 in dark mode (session 64,
		 * same fix pattern as --text-muted above) so 1.4.11 non-text UI
		 * component borders (input focus/hover) pass the 3:1 AA minimum on
		 * dark surfaces. granite-2 (#4E5C68) was failing at ~2.56:1 on
		 * boreal-0 / ~1.87:1 on boreal-2. */
		--border-strong: var(--granite-4);

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

		/* --warmth-0-text (#8a4a1e) is a light-surface ink and unreadable on
		 * dark grounds; remap to warmth-3 (#eaa853), which passes AA on the
		 * dark surfaces (8.47:1 on #1a1a1a, 6.01:1 on granite-0). Mirrors
		 * nosco_core/css/nosco-tokens.css on the Nextcloud side. */
		--warmth-0-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.2);
		--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
		--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
	}
}

/* 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-4);   /* WCAG AA fix (session 64) */

	--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);
	--warmth-0-text: var(--warmth-3);    /* AA warmth text on dark (see media block) */
	--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.2);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
}

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