/*
 * Personex Design Tokens
 * ----------------------------------------------------------------------------
 * Source of truth: DESIGN_SYSTEM.md (+ index.html showcase).
 * Switch modes with <html data-theme="bright|slate|dark">. Default: bright.
 * Only tokens live here. Jannah mapping lives in ../../style.css.
 */

:root,
[data-theme="bright"] {
	/* Brand foundations */
	--px-brand-ink: #0b132b;
	--px-brand-blue: #2563ff;
	--px-brand-cyan: #00d4ff;
	--px-brand-purple: #7c3aed;

	--px-neutral-light: #f2f4f8;
	--px-neutral-blue-tint: #dde6ff;
	--px-neutral-purple-tint: #e9e0ff;

	/* Surfaces */
	--px-bg-page: #ffffff;
	--px-bg-surface: #ffffff;
	--px-bg-surface-elevated: #ffffff;
	--px-bg-surface-sunken: #f2f4f8;
	--px-bg-surface-hover: #f3f6ff;
	--px-bg-inverse: #0b132b;
	--px-bg-inverse-deep: #070d20;

	/* Text */
	--px-text-primary: #0b132b;
	--px-text-secondary: #2c3552;
	--px-text-muted: #55607f;
	--px-text-on-inverse: #f2f4f8;
	--px-text-on-inverse-muted: #b8c2dc;

	/* Action */
	--px-accent-primary: #2563ff;
	--px-accent-text: #1d4ed8;      /* AA-safe blue for small text/links on white */
	--px-action: #1d4ed8;           /* primary button fill (white text, AAA-ish) */
	--px-action-hover: #1e40af;
	--px-on-action: #ffffff;
	--px-tag-bg: #dde6ff;
	--px-tag-text: #1e3a8a;
	--px-focus-ring: rgba(37, 99, 255, 0.35);
	--px-selection: #dde6ff;

	/* Borders & elevation */
	--px-border-light: rgba(11, 19, 43, 0.08);
	--px-border-strong: rgba(11, 19, 43, 0.16);
	--px-shadow-sm: 0 2px 10px rgba(37, 99, 255, 0.06);
	--px-shadow-md: 0 8px 24px rgba(37, 99, 255, 0.08);
	--px-shadow-lg: 0 16px 38px rgba(37, 99, 255, 0.14);
	--px-shadow-bloom: 0 16px 38px rgba(37, 99, 255, 0.32);
	--px-bevel: inset -2px -2px 6px rgba(37, 99, 255, 0.06), inset 2px 2px 6px rgba(255, 255, 255, 0.95);

	/* Signature gradients */
	--px-gradient-bloom: linear-gradient(135deg, #00d4ff 0%, #2563ff 48%, #7c3aed 100%);
	--px-gradient-glass: linear-gradient(135deg, #ffffff 0%, #f2f4f8 50%, #dde6ff 100%);

	/* Status */
	--px-live: #059669;
	--px-live-text: #065f46;

	/* Shape */
	--px-radius-sm: 8px;
	--px-radius-md: 14px;
	--px-radius-lg: 18px;
	--px-radius-xl: 20px;
	--px-radius-2xl: 24px;
	--px-radius-full: 999px;

	/* Typography */
	--px-font-family: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
	--px-leading-tight: 1.35;
	--px-leading-normal: 1.65;
	--px-leading-relaxed: 1.8;
	--px-fs-hero: clamp(34px, 4.2vw, 54px);
	--px-fs-section: clamp(26px, 3.2vw, 38px);
	--px-fs-card: 18px;
	--px-fs-card-lg: 20px;
	--px-fs-body: 16px;
	--px-fs-meta: 13px;
	--px-fs-caption: 11px;

	/* Layout */
	--px-container-max: 1200px;
	--px-ease: cubic-bezier(0.16, 1, 0.3, 1);

	color-scheme: light;
}

/* Original Slate: cool grey canvas, translucent glass cards */
[data-theme="slate"] {
	--px-bg-page: #f2f4f8;
	--px-bg-surface: rgba(255, 255, 255, 0.78);
	--px-bg-surface-elevated: rgba(255, 255, 255, 0.78);
	--px-bg-surface-sunken: #e8ecf4;
	--px-text-secondary: #48526e;
	--px-text-muted: #55607f;
	--px-border-light: rgba(11, 19, 43, 0.06);
	--px-shadow-md: 0 8px 24px rgba(37, 99, 255, 0.12);
}

/* Obsidian Dark */
[data-theme="dark"] {
	--px-bg-page: #060a16;
	--px-bg-surface: #0f1936;
	--px-bg-surface-elevated: #0f1936;
	--px-bg-surface-sunken: #0a1128;
	--px-bg-surface-hover: #15224a;
	--px-bg-inverse: #0f1936;
	--px-bg-inverse-deep: #060a16;

	--px-text-primary: #f8fafc;
	--px-text-secondary: #cbd5e1;
	--px-text-muted: #94a3b8;

	--px-accent-primary: #7aa2ff;
	--px-accent-text: #8fb0ff;
	--px-action: #2563ff;
	--px-action-hover: #3b75ff;
	--px-tag-bg: rgba(37, 99, 255, 0.22);
	--px-tag-text: #c7d7ff;
	--px-focus-ring: rgba(122, 162, 255, 0.5);
	--px-selection: #1c2c66;

	--px-border-light: rgba(255, 255, 255, 0.08);
	--px-border-strong: rgba(255, 255, 255, 0.18);
	--px-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
	--px-shadow-md: 0 8px 30px rgba(0, 0, 0, 0.5);
	--px-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
	--px-bevel: inset -2px -2px 6px rgba(0, 0, 0, 0.4), inset 2px 2px 6px rgba(255, 255, 255, 0.06);
	--px-gradient-glass: linear-gradient(135deg, #0f1936 0%, #0a1128 100%);

	--px-live: #34d399;
	--px-live-text: #6ee7b7;

	color-scheme: dark;
}