/**
 * Booknetic for Theme V4 — Design System tokens (canonical, :root scope).
 *
 * Single source of truth for color, spacing, typography, radius, shadow,
 * motion, z-index. All `--ds-*` tokens are dark-first; light mode applies
 * when html[data-color-scheme="light"].
 *
 * Why a new prefix (--ds-*)?
 *   • Auth/admin/billing scopes (body.bft-auth-page, body.bft-admin-premium)
 *     still own their --bft-auth-* / --bft-adm-* / --bft-mod-* aliases —
 *     untouched on purpose so existing surfaces don't regress.
 *   • New components reference --ds-* directly; legacy ones can opt in via
 *     the alias bridge at the bottom of this file.
 *
 * Order of import in main.css:
 *   ds-tokens-v4.css → ds-motion-v4.css → ds-typography-v4.css → ds-layout-v4.css
 *   → ds-components-v4.css → ds-cards-v4.css → ds-overlays-v4.css
 */

:root {

	/* ============================================================ */
	/* COLOR — PALETTE (raw hues — only referenced by semantic tokens)*/
	/* ============================================================ */

	/* Brand purple ramp (Stripe/Linear-like) */
	--ds-purple-50:  #F5F3FF;
	--ds-purple-100: #EDE9FE;
	--ds-purple-200: #DDD6FE;
	--ds-purple-300: #C4B5FD;
	--ds-purple-400: #A78BFA;
	--ds-purple-500: #8B5CF6;   /* brand primary */
	--ds-purple-600: #7C3AED;
	--ds-purple-700: #6D28D9;
	--ds-purple-800: #5B21B6;
	--ds-purple-900: #4C1D95;
	--ds-purple-950: #2E1065;

	/* Brand indigo / blue ramp */
	--ds-indigo-400: #818CF8;
	--ds-indigo-500: #6366F1;
	--ds-indigo-600: #4F46E5;
	--ds-blue-400:   #60A5FA;
	--ds-blue-500:   #3B82F6;
	--ds-blue-600:   #2563EB;

	/* Neutral (slate-tinted near-black) */
	--ds-neutral-0:    #FFFFFF;
	--ds-neutral-50:   #F8FAFC;
	--ds-neutral-100:  #F1F5F9;
	--ds-neutral-200:  #E2E8F0;
	--ds-neutral-300:  #CBD5E1;
	--ds-neutral-400:  #94A3B8;
	--ds-neutral-500:  #64748B;
	--ds-neutral-600:  #475569;
	--ds-neutral-700:  #334155;
	--ds-neutral-800:  #1E293B;
	--ds-neutral-900:  #0F172A;
	--ds-neutral-950:  #0A0F1C;

	/* Branded dark surfaces (the V4 "Booknetic dark") */
	--ds-ink-950:   #0A0613;
	--ds-ink-900:   #0E0820;
	--ds-ink-800:   #110A22;
	--ds-ink-700:   #17112D;
	--ds-ink-600:   #1F1838;

	/* Status hues */
	--ds-green-400: #34D399;
	--ds-green-500: #10B981;
	--ds-green-600: #059669;
	--ds-amber-400: #FBBF24;
	--ds-amber-500: #F59E0B;
	--ds-amber-600: #D97706;
	--ds-red-400:   #FB7185;
	--ds-red-500:   #EF4444;
	--ds-red-600:   #DC2626;
	--ds-pink-400:  #F472B6;
	--ds-pink-500:  #EC4899;

	/* ============================================================ */
	/* COLOR — SEMANTIC TOKENS (use these in components)             */
	/* ============================================================ */

	/* Brand */
	--ds-color-primary:           var(--ds-purple-500);
	--ds-color-primary-hover:     var(--ds-purple-400);
	--ds-color-primary-active:    var(--ds-purple-600);
	--ds-color-primary-contrast:  var(--ds-neutral-0);
	--ds-color-primary-soft:      rgba(139, 92, 246, 0.14);
	--ds-color-primary-soft-h:    rgba(139, 92, 246, 0.22);

	--ds-color-secondary:         var(--ds-indigo-500);
	--ds-color-secondary-contrast:var(--ds-neutral-0);
	--ds-color-accent:            var(--ds-blue-500);

	/* Surfaces (dark-first) */
	--ds-color-bg:                var(--ds-ink-950);
	--ds-color-bg-elevated:       var(--ds-ink-800);
	--ds-color-bg-overlay:        rgba(10, 6, 19, 0.78);
	--ds-color-surface:           rgba(255, 255, 255, 0.045);
	--ds-color-surface-hover:     rgba(255, 255, 255, 0.07);
	--ds-color-surface-active:    rgba(139, 92, 246, 0.12);
	--ds-color-surface-muted:     rgba(255, 255, 255, 0.03);

	/* Borders */
	--ds-color-border-subtle:     rgba(255, 255, 255, 0.06);
	--ds-color-border:            rgba(255, 255, 255, 0.10);
	--ds-color-border-strong:     rgba(255, 255, 255, 0.18);
	--ds-color-border-focus:      rgba(139, 92, 246, 0.55);
	--ds-color-border-error:      rgba(251, 113, 133, 0.65);
	--ds-color-border-success:    rgba(52, 211, 153, 0.55);

	/* Text */
	--ds-color-text:              #F5F3FF;
	--ds-color-text-muted:        #A5A0B8;
	--ds-color-text-subtle:       #7A7591;
	--ds-color-text-secondary:    #DDD6FE;
	--ds-color-text-on-brand:     #FFFFFF;
	--ds-color-text-link:         var(--ds-purple-300);
	--ds-color-text-link-hover:   var(--ds-purple-400);

	/* Feedback */
	--ds-color-success:           var(--ds-green-500);
	--ds-color-success-soft:      rgba(16, 185, 129, 0.14);
	--ds-color-success-text:      #6EE7B7;
	--ds-color-warning:           var(--ds-amber-500);
	--ds-color-warning-soft:      rgba(245, 158, 11, 0.14);
	--ds-color-warning-text:      #FCD34D;
	--ds-color-danger:            var(--ds-red-500);
	--ds-color-danger-soft:       rgba(239, 68, 68, 0.14);
	--ds-color-danger-text:       #FCA5A5;
	--ds-color-info:              var(--ds-indigo-500);
	--ds-color-info-soft:         rgba(99, 102, 241, 0.14);
	--ds-color-info-text:         #A5B4FC;

	/* Overlays */
	--ds-color-overlay-scrim:     rgba(5, 3, 12, 0.72);
	--ds-color-overlay-blur:      rgba(5, 3, 12, 0.55);

	/* ============================================================ */
	/* GRADIENTS                                                     */
	/* ============================================================ */

	--ds-gradient-brand:    linear-gradient(135deg, #8B5CF6 0%, #6366F1 50%, #3B82F6 100%);
	--ds-gradient-cta:      linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
	--ds-gradient-cta-hover:linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%);
	--ds-gradient-success:  linear-gradient(135deg, #34D399 0%, #10B981 100%);
	--ds-gradient-danger:   linear-gradient(135deg, #FB7185 0%, #E11D48 100%);
	--ds-gradient-warning:  linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
	--ds-gradient-mesh:     radial-gradient(at 18% 22%, rgba(139,92,246,.22) 0%, transparent 42%),
	                         radial-gradient(at 82% 78%, rgba(59,130,246,.16) 0%, transparent 48%),
	                         radial-gradient(at 50% 100%, rgba(99,102,241,.10) 0%, transparent 38%);
	--ds-gradient-section:  linear-gradient(180deg, var(--ds-ink-950) 0%, var(--ds-ink-900) 100%);

	/* ============================================================ */
	/* TYPOGRAPHY                                                    */
	/* ============================================================ */

	--ds-font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ds-font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--ds-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Type scale — minor third (1.2) for body, perfect fourth (1.333) for headings */
	--ds-text-2xs:     11px;
	--ds-text-xs:      12px;
	--ds-text-sm:      13px;
	--ds-text-base:    14px;   /* dashboard / forms baseline */
	--ds-text-md:      15px;
	--ds-text-lg:      16px;   /* marketing baseline */
	--ds-text-xl:      18px;
	--ds-text-2xl:     20px;
	--ds-text-3xl:     24px;
	--ds-text-4xl:     30px;
	--ds-text-5xl:     36px;
	--ds-text-6xl:     48px;
	--ds-text-7xl:     60px;
	--ds-text-8xl:     72px;

	/* Fluid display sizes — clamp(min, vw, max) */
	--ds-display-sm:   clamp(1.625rem, 0.9rem + 2.5vw, 2.5rem);
	--ds-display-md:   clamp(2rem,    1.1rem + 4vw,   3.5rem);
	--ds-display-lg:   clamp(2.5rem,  1.5rem + 5.5vw, 4.5rem);
	--ds-display-xl:   clamp(3rem,    1.8rem + 7vw,   5.5rem);

	/* Line-heights */
	--ds-leading-tight:   1.12;
	--ds-leading-snug:    1.25;
	--ds-leading-normal:  1.5;
	--ds-leading-relaxed: 1.65;
	--ds-leading-loose:   1.8;

	/* Letter-spacing */
	--ds-tracking-tighter: -0.04em;
	--ds-tracking-tight:   -0.02em;
	--ds-tracking-normal:  0;
	--ds-tracking-wide:    0.02em;
	--ds-tracking-wider:   0.04em;
	--ds-tracking-widest:  0.08em;

	/* Weights */
	--ds-font-thin:       300;
	--ds-font-regular:    400;
	--ds-font-medium:     500;
	--ds-font-semibold:   600;
	--ds-font-bold:       700;
	--ds-font-extrabold:  800;

	/* ============================================================ */
	/* SPACING — 4px base, exponential after 4                        */
	/* ============================================================ */

	--ds-space-px:   1px;
	--ds-space-0:    0;
	--ds-space-0_5:  2px;
	--ds-space-1:    4px;
	--ds-space-1_5:  6px;
	--ds-space-2:    8px;
	--ds-space-2_5:  10px;
	--ds-space-3:    12px;
	--ds-space-3_5:  14px;
	--ds-space-4:    16px;
	--ds-space-5:    20px;
	--ds-space-6:    24px;
	--ds-space-7:    28px;
	--ds-space-8:    32px;
	--ds-space-10:   40px;
	--ds-space-12:   48px;
	--ds-space-14:   56px;
	--ds-space-16:   64px;
	--ds-space-20:   80px;
	--ds-space-24:   96px;
	--ds-space-32:   128px;

	/* Section rhythm */
	--ds-section-y-sm: clamp(48px, 6vw, 80px);
	--ds-section-y:    clamp(72px, 8vw, 120px);
	--ds-section-y-lg: clamp(96px, 10vw, 160px);

	/* Container */
	--ds-container-xs: 28rem;   /* 448px */
	--ds-container-sm: 36rem;   /* 576px */
	--ds-container-md: 48rem;   /* 768px */
	--ds-container-lg: 64rem;   /* 1024px */
	--ds-container-xl: 80rem;   /* 1280px */
	--ds-container-2xl:88rem;   /* 1408px */
	--ds-container-prose: 72ch;
	--ds-gutter:        16px;
	--ds-gutter-md:     24px;
	--ds-gutter-lg:     32px;

	/* Breakpoints (informational — actual MQs use literal values for tooling compat) */
	--ds-bp-sm: 480px;
	--ds-bp-md: 768px;
	--ds-bp-lg: 1024px;
	--ds-bp-xl: 1280px;
	--ds-bp-2xl:1536px;

	/* ============================================================ */
	/* RADIUS                                                        */
	/* ============================================================ */

	--ds-radius-none: 0;
	--ds-radius-xs:   4px;
	--ds-radius-sm:   6px;
	--ds-radius-md:   8px;
	--ds-radius-lg:   12px;
	--ds-radius-xl:   16px;
	--ds-radius-2xl:  20px;
	--ds-radius-3xl:  28px;
	--ds-radius-pill: 999px;

	/* Component-default radii (consumed by .ds-* primitives) */
	--ds-radius-input:    var(--ds-radius-md);
	--ds-radius-button:   var(--ds-radius-md);
	--ds-radius-card:     var(--ds-radius-lg);
	--ds-radius-card-lg:  var(--ds-radius-xl);
	--ds-radius-overlay:  var(--ds-radius-xl);
	--ds-radius-pill-tag: var(--ds-radius-pill);

	/* ============================================================ */
	/* SHADOWS (elevation scale)                                     */
	/* ============================================================ */

	--ds-shadow-none:  none;
	--ds-shadow-xs:    0 1px 2px rgba(0,0,0,0.18);
	--ds-shadow-sm:    0 2px 6px rgba(0,0,0,0.22);
	--ds-shadow-md:    0 8px 24px -6px rgba(0,0,0,0.38);
	--ds-shadow-lg:    0 16px 36px -12px rgba(0,0,0,0.5);
	--ds-shadow-xl:    0 24px 60px -20px rgba(0,0,0,0.62);
	--ds-shadow-2xl:   0 32px 80px -24px rgba(0,0,0,0.72);

	/* Glow shadows (for brand emphasis) */
	--ds-shadow-glow-sm: 0 0 18px rgba(139, 92, 246, 0.20);
	--ds-shadow-glow:    0 0 32px rgba(139, 92, 246, 0.32);
	--ds-shadow-cta:     0 8px 22px -8px rgba(139, 92, 246, 0.5);
	--ds-shadow-cta-h:   0 14px 32px -10px rgba(139, 92, 246, 0.62);
	--ds-shadow-danger:  0 8px 22px -8px rgba(251, 113, 133, 0.5);
	--ds-shadow-success: 0 8px 22px -8px rgba(52, 211, 153, 0.45);

	/* Focus ring */
	--ds-ring-focus:     0 0 0 3px rgba(139, 92, 246, 0.28);
	--ds-ring-danger:    0 0 0 3px rgba(251, 113, 133, 0.28);
	--ds-ring-success:   0 0 0 3px rgba(52, 211, 153, 0.28);

	/* ============================================================ */
	/* MOTION                                                        */
	/* ============================================================ */

	/* Easings — Stripe / Linear / Framer DNA */
	--ds-ease-standard:  cubic-bezier(0.22, 0.61, 0.36, 1);
	--ds-ease-premium:   cubic-bezier(0.22, 1, 0.36, 1);
	--ds-ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
	--ds-ease-in:        cubic-bezier(0.7, 0, 0.84, 0);
	--ds-ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
	--ds-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
	--ds-ease-linear:    linear;

	/* Durations */
	--ds-dur-instant:    80ms;
	--ds-dur-fast:       140ms;
	--ds-dur-base:       220ms;
	--ds-dur-slow:       360ms;
	--ds-dur-slower:     520ms;
	--ds-dur-slowest:    760ms;

	/* Motion-shorthand transitions used across primitives */
	--ds-transition-color:  color var(--ds-dur-fast) var(--ds-ease-standard);
	--ds-transition-bg:     background var(--ds-dur-fast) var(--ds-ease-standard);
	--ds-transition-border: border-color var(--ds-dur-fast) var(--ds-ease-standard);
	--ds-transition-shadow: box-shadow var(--ds-dur-base) var(--ds-ease-standard);
	--ds-transition-transform: transform var(--ds-dur-instant) var(--ds-ease-out);
	--ds-transition-fade:   opacity var(--ds-dur-fast) var(--ds-ease-standard);

	--ds-transition-all:
		color var(--ds-dur-fast) var(--ds-ease-standard),
		background var(--ds-dur-fast) var(--ds-ease-standard),
		border-color var(--ds-dur-fast) var(--ds-ease-standard),
		box-shadow var(--ds-dur-base) var(--ds-ease-standard),
		transform var(--ds-dur-instant) var(--ds-ease-out),
		opacity var(--ds-dur-fast) var(--ds-ease-standard);

	/* ============================================================ */
	/* Z-INDEX                                                       */
	/* ============================================================ */

	--ds-z-base:      1;
	--ds-z-raised:    10;
	--ds-z-sticky:    20;
	--ds-z-header:    50;
	--ds-z-dropdown:  60;
	--ds-z-overlay:   80;
	--ds-z-sheet:     90;
	--ds-z-modal:     100;
	--ds-z-toast:     110;
	--ds-z-tooltip:   120;
	--ds-z-cmdk:      130;
	--ds-z-max:       2147483647;

	/* ============================================================ */
	/* OPACITY / GEOMETRY                                            */
	/* ============================================================ */

	--ds-opacity-disabled: 0.5;
	--ds-opacity-muted:    0.7;
	--ds-opacity-subtle:   0.85;

	--ds-touch-target:     44px;   /* WCAG 2.5.5 thumb */
	--ds-touch-target-lg:  48px;
	--ds-touch-target-sm:  36px;

	/* Component-default geometry */
	--ds-control-h-sm:     32px;
	--ds-control-h:        40px;
	--ds-control-h-lg:     48px;
	--ds-control-h-xl:     56px;

	/* Backdrop blur */
	--ds-blur-sm:  8px;
	--ds-blur-md: 14px;
	--ds-blur-lg: 24px;
}

/* ============================================================ */
/* LIGHT MODE OVERRIDE                                           */
/* ============================================================ */

html[data-color-scheme="light"] {
	--ds-color-bg:                #F8FAFC;
	--ds-color-bg-elevated:       #FFFFFF;
	--ds-color-bg-overlay:        rgba(255, 255, 255, 0.86);
	--ds-color-surface:           rgba(15, 23, 42, 0.025);
	--ds-color-surface-hover:     rgba(15, 23, 42, 0.05);
	--ds-color-surface-active:    rgba(139, 92, 246, 0.10);
	--ds-color-surface-muted:     rgba(15, 23, 42, 0.015);

	--ds-color-border-subtle:     rgba(15, 23, 42, 0.06);
	--ds-color-border:            rgba(15, 23, 42, 0.12);
	--ds-color-border-strong:     rgba(15, 23, 42, 0.22);

	--ds-color-text:              #0F172A;
	--ds-color-text-muted:        #64748B;
	--ds-color-text-subtle:       #94A3B8;
	--ds-color-text-secondary:    #334155;
	--ds-color-text-link:         #6D28D9;
	--ds-color-text-link-hover:   #7C3AED;

	--ds-color-overlay-scrim:     rgba(15, 23, 42, 0.55);
	--ds-color-overlay-blur:      rgba(15, 23, 42, 0.35);

	--ds-color-success-text:      #047857;
	--ds-color-warning-text:      #B45309;
	--ds-color-danger-text:       #B91C1C;
	--ds-color-info-text:         #4338CA;

	--ds-shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.05);
	--ds-shadow-sm:   0 2px 6px rgba(15, 23, 42, 0.08);
	--ds-shadow-md:   0 8px 24px -6px rgba(15, 23, 42, 0.12);
	--ds-shadow-lg:   0 16px 36px -12px rgba(15, 23, 42, 0.16);
	--ds-shadow-xl:   0 24px 60px -20px rgba(15, 23, 42, 0.2);
	--ds-shadow-2xl:  0 32px 80px -24px rgba(15, 23, 42, 0.24);

	--ds-gradient-section: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
}

/* ============================================================ */
/* BACKWARDS-COMPAT BRIDGE                                       */
/*                                                                */
/* These let new components reference --ds-* while legacy CSS    */
/* (auth, admin, billing, modals) keeps working through its own  */
/* --bft-auth-* / --bft-adm-* / --bft-mod-* tokens.              */
/*                                                                */
/* No legacy file is rewritten — this bridge is additive only.   */
/* ============================================================ */

body.bft-v4 {
	--bft-color-primary:           var(--ds-color-primary);
	--bft-color-primary-foreground:var(--ds-color-primary-contrast);
	--bft-color-secondary:         var(--ds-color-secondary);
	--bft-color-secondary-foreground: var(--ds-color-primary-contrast);
	--bft-color-accent:            var(--ds-color-accent);
	--bft-color-success:           var(--ds-color-success);
	--bft-color-warning:           var(--ds-color-warning);
	--bft-color-error:             var(--ds-color-danger);
}