/* ============================================================
   Design tokens — single source of truth.
   Aligned with the DiviPeople parent-brand system (dp-theme):
   - Roobert sans (one family)
   - Brand violet #5B3AE8
   - Warm coconut neutrals
   - Fluid clamp() type scale
   No literal design value (color, spacing, font size, radius,
   shadow, motion) appears anywhere on the site outside this file.
   ============================================================ */

:root {
	/* ============================================================
	   LAYER 1 — raw swatches
	   Never used directly in components. Theme tokens reference them.
	   ============================================================ */

	/* Brand violet (DiviPeople) */
	--swatch-brand-50:  #F3F0FE;
	--swatch-brand-100: #E4DFFE;
	--swatch-brand-200: #C4B8FD;
	--swatch-brand-300: #9B85F7;
	--swatch-brand-500: #5B3AE8;
	--swatch-brand-600: #4A2BD4;
	--swatch-brand-700: #3A1FB5;
	--swatch-brand-800: #2B1788;
	--swatch-brand-900: #1C0F5B;
	--swatch-brand-950: #0F0A2E;

	/* Warm neutrals (coconut, ~40° hue, low saturation) */
	--swatch-gray-000: #FFFFFF;
	--swatch-gray-025: #FAFAF7;
	--swatch-gray-050: #F5F3EE;
	--swatch-gray-100: #ECEAE4;
	--swatch-gray-150: #E4E1DA;
	--swatch-gray-200: #DAD7CF;
	--swatch-gray-300: #C0BCB2;
	--swatch-gray-400: #A09C93;
	--swatch-gray-500: #736F67;
	--swatch-gray-600: #53504A;
	--swatch-gray-700: #403E3A;
	--swatch-gray-800: #2A2826;
	--swatch-gray-850: #21201E;
	--swatch-gray-900: #1A1917;
	--swatch-gray-950: #131210;

	/* State raw */
	--swatch-green-50:  #ECFDF5;
	--swatch-green-400: #34D399;
	--swatch-green-500: #10B981;
	--swatch-green-700: #047857;
	--swatch-blue-400:  #3B82F6;
	--swatch-blue-500:  #2563EB;
	--swatch-amber-400: #FBBF24;
	--swatch-amber-500: #F59E0B;
	--swatch-amber-700: #B45309;
	--swatch-red-50:    #FEF2F2;
	--swatch-red-500:   #EF4444;
	--swatch-red-700:   #B91C1C;

	/* ============================================================
	   LAYER 2 — semantic theme tokens
	   Use ONLY these in components and templates.
	   ============================================================ */

	/* Brand */
	--dt-primary-50:  var(--swatch-brand-50);
	--dt-primary-100: var(--swatch-brand-100);
	--dt-primary-200: var(--swatch-brand-200);
	--dt-primary-300: var(--swatch-brand-300);
	--dt-primary:     var(--swatch-brand-500);
	--dt-primary-600: var(--swatch-brand-600);
	--dt-primary-700: var(--swatch-brand-700);
	--dt-primary-hover: var(--dt-primary-600);
	--dt-primary-soft:  var(--dt-primary-50);
	--dt-on-primary:    var(--swatch-gray-000);

	/* Surfaces */
	--dt-bg:           var(--swatch-gray-025);
	--dt-bg-alt:       var(--swatch-gray-050);
	--dt-bg-deep:      var(--swatch-gray-100);
	--dt-surface:      var(--swatch-gray-000);
	--dt-surface-dark: var(--swatch-gray-950);   /* used for parent-bar + dark sections */

	/* Text */
	--dt-ink:        var(--swatch-gray-950);
	--dt-ink-soft:   var(--swatch-gray-600);
	--dt-ink-faint:  var(--swatch-gray-500);
	--dt-on-dark:    var(--swatch-gray-000);
	--dt-on-dark-2:  rgba(255,255,255,0.65);
	--dt-on-dark-3:  rgba(255,255,255,0.40);

	/* Borders */
	--dt-border:        var(--swatch-gray-200);
	--dt-border-subtle: var(--swatch-gray-150);
	--dt-border-strong: var(--swatch-gray-300);
	--dt-border-hover:  var(--swatch-gray-300);

	/* State */
	--dt-success:      var(--swatch-green-500);
	--dt-success-soft: var(--swatch-green-50);
	--dt-warn:         var(--swatch-amber-500);
	--dt-warn-soft:    #FFF8E6;
	--dt-error:        var(--swatch-red-500);
	--dt-error-soft:   var(--swatch-red-50);
	--dt-star:         var(--swatch-amber-400);
	--dt-focus:        var(--dt-primary);

	--dt-on-warn:    #FFFFFF;
	--dt-on-success: #FFFFFF;

	/* ============================================================
	   Type — Roobert across the board (matches DiviPeople parent).
	   ============================================================ */
	--ff-sans:    'Roobert', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ff-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--ff-display: var(--ff-sans);

	/* Fluid scale (clamps preserve readability at all widths) */
	--fs-2xs:       0.625rem;                                    /* 10 */
	--fs-xs:        0.75rem;                                     /* 12 */
	--fs-sm:        0.9375rem;                                   /* 15 — body small */
	--fs-base:      1.0625rem;                                   /* 17 — body */
	--fs-md:        clamp(1.0625rem, 1.2vw, 1.125rem);           /* 17–18 */
	--fs-lg:        clamp(1.1875rem, 1.5vw, 1.25rem);            /* 19–20 */
	--fs-xl:        clamp(1.25rem, 1.8vw, 1.4375rem);            /* 20–23 */
	--fs-2xl:       1.5rem;                                      /* 24 */
	--fs-3xl:       2rem;                                        /* 32 */
	--fs-section:   clamp(1.75rem, 3.5vw, 2.5rem);               /* 28–40 — section H2 */
	--fs-subsection: clamp(1.375rem, 2.5vw, 1.75rem);            /* 22–28 — H3 */
	--fs-hero:      clamp(2.75rem, 5.5vw, 4.25rem);              /* 44–68 — hero H1 */
	--fs-display:   clamp(3.5rem, 7vw, 5.5rem);                  /* 56–88 — display moments */

	/* Semantic UI sizes — dedicated tokens so the menu, buttons, etc. tune
	   independently from body copy. */
	--fs-nav:       clamp(0.9375rem, 0.95vw, 1rem);              /* 15–16 — header nav */

	/* Aliases used by primitives (compat with v1 names so audit greps unchanged) */
	--fs-4xl:  var(--fs-section);
	--fs-5xl:  var(--fs-hero);
	--fs-6xl:  var(--fs-display);

	/* Weights */
	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;

	/* Line heights */
	--lh-tight:    1.1;
	--lh-snug:     1.25;
	--lh-normal:   1.5;
	--lh-relaxed:  1.65;

	/* Letter spacing */
	--ls-tight:    -0.02em;
	--ls-snug:     -0.01em;
	--ls-normal:   0;
	--ls-eyebrow:  0.04em;

	/* ============================================================
	   Spacing — 4px base
	   ============================================================ */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.25rem;
	--space-6:  1.5rem;
	--space-7:  1.75rem;
	--space-8:  2rem;
	--space-9:  2.25rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;
	--space-32: 8rem;
	--space-40: 10rem;

	/* ============================================================
	   Layout
	   ============================================================ */
	--container:         1280px;        /* matches dp-theme */
	--container-narrow:  780px;
	--container-prose:   68ch;
	--container-pricing: 920px;
	--header-h:          64px;          /* matches dp-theme */
	--gutter:            1.5rem;
	--touch-min:         44px;

	--section-pad-d:     var(--space-24);
	--section-pad-t:     var(--space-16);
	--section-pad-m:     var(--space-12);

	/* ============================================================
	   Radius
	   ============================================================ */
	--radius-sm:    6px;
	--radius-card:  12px;          /* default card */
	--radius-md:    12px;
	--radius-panel: 16px;
	--radius-lg:    20px;
	--radius-pill:  980px;

	/* Buttons are fully pill-shaped. */
	--radius-button: var(--radius-pill);

	/* ============================================================
	   Shadows — warm-tinted
	   ============================================================ */
	--shadow-sm:      0 2px 8px rgba(26,25,24,0.06);
	--shadow-card:    0 8px 24px rgba(26,25,24,0.08);
	--shadow-popover: 0 16px 48px rgba(26,25,24,0.10);
	--shadow-focus:   0 0 0 3px rgba(91,58,232,0.30);

	/* ============================================================
	   Third-party brand colors — used only for integration / module
	   icon badges that visually represent the integrated service.
	   ============================================================ */
	--brand-google:    #4285F4;
	--brand-instagram: linear-gradient(45deg, #F09433 0%, #E6683C 25%, #DC2743 50%, #CC2366 75%, #BC1888 100%);
	--brand-youtube:   #FF0000;
	--brand-x:         #0F1419;

	/* ============================================================
	   Noise — DEPRECATED. The filmic grain was removed in the
	   editorial-premium refresh (flat surfaces read cleaner). Token
	   retained only to avoid breaking any stray reference; do not
	   reintroduce grain overlays.
	   ============================================================ */
	--dt-noise-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");

	/* ============================================================
	   Z-index
	   ============================================================ */
	--z-base:   1;
	--z-sticky: 100;
	--z-drawer: 200;
	--z-modal:  300;
	--z-toast:  400;

	/* ============================================================
	   Motion
	   ============================================================ */
	--ease-out:      cubic-bezier(0.4, 0, 0.2, 1);
	--ease-in-out:   cubic-bezier(0.45, 0, 0.2, 1);
	--duration-1:    120ms;
	--duration-2:    200ms;
	--duration-3:    320ms;
	--duration-4:    500ms;

	/* ============================================================
	   Borders
	   ============================================================ */
	--border-thin:   1px solid var(--dt-border);
	--border-strong: 1px solid var(--dt-border-strong);

	/* ============================================================
	   Gradients
	   ============================================================ */
	--gradient-fresh: linear-gradient(90deg, var(--swatch-green-400) 0%, var(--swatch-blue-400) 100%);
}