/**
 * WP SOC Design System — Tokens
 * ============================================================
 * Every value the theme uses lives here, once. Every other file in
 * the system (spacing, buttons, forms, components, animations)
 * consumes these custom properties instead of hard-coding values.
 *
 * If a new color, size, or timing is needed, it is added here first.
 * ============================================================
 */

:root {

	/* ------------------------------------------------------------ *
	 * 1. COLOR
	 * Dark, premium, restrained. One accent, used with intent.
	 * ------------------------------------------------------------ */

	/* Surfaces */
	--wp-soc-color-bg:               #050505; /* Page background */
	--wp-soc-color-surface:          #0b0b0b; /* Recessed surface (section bands, inputs) */
	--wp-soc-color-surface-elevated: #111111; /* Raised surface (cards, popovers, modals) */
	--wp-soc-color-surface-elevated-hover: #161616; /* Elevated surface on hover/press */
	--wp-soc-color-border:           #242424; /* Default hairline border */
	--wp-soc-color-border-strong:    #333333; /* Hover / active border */

	/* Brand + semantic */
	--wp-soc-color-primary:      #00D084;
	--wp-soc-color-primary-rgb:  0, 208, 132;
	--wp-soc-color-primary-ink:  #06110c; /* Text placed on top of a primary-filled surface */

	--wp-soc-color-success:      var(--wp-soc-color-primary);
	--wp-soc-color-success-rgb:  var(--wp-soc-color-primary-rgb);

	--wp-soc-color-danger:       #F04438;
	--wp-soc-color-danger-rgb:   240, 68, 56;

	--wp-soc-color-warning:      #F5A524;
	--wp-soc-color-warning-rgb:  245, 165, 36;

	/* Text */
	--wp-soc-color-text:           #F5F5F5; /* Primary text */
	--wp-soc-color-text-secondary: #9CA3AF; /* Secondary text */
	--wp-soc-color-text-muted:     #6B7280; /* Muted / disabled / meta text */

	/* ------------------------------------------------------------ *
	 * 2. TYPOGRAPHY
	 * Display face used sparingly; body face carries the reading
	 * experience. Sizes are fluid (clamp) so the scale holds up from
	 * small-mobile to desktop-xl without a typography.css file of
	 * per-breakpoint overrides.
	 * ------------------------------------------------------------ */

	--wp-soc-font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
	--wp-soc-font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

	--wp-soc-weight-regular:  400;
	--wp-soc-weight-medium:   500;
	--wp-soc-weight-semibold: 600;
	--wp-soc-weight-bold:     700;

	--wp-soc-leading-tight:   1.05;
	--wp-soc-leading-snug:    1.2;
	--wp-soc-leading-normal:  1.5;
	--wp-soc-leading-relaxed: 1.7;

	--wp-soc-tracking-tight:  -0.03em;
	--wp-soc-tracking-snug:   -0.02em;
	--wp-soc-tracking-normal: -0.01em;
	--wp-soc-tracking-wide:   0.04em;
	--wp-soc-tracking-wider:  0.09em;

	/* Type scale: Display / H1–H4 / Body Large / Body / Caption / Label */
	--wp-soc-text-display: clamp(3rem, 2.4vw + 2.2rem, 5.5rem);     /* ~48px  → 88px */
	--wp-soc-text-h1:      clamp(2.25rem, 1.8vw + 1.7rem, 3.5rem);  /* ~36px  → 56px */
	--wp-soc-text-h2:      clamp(1.75rem, 1.2vw + 1.4rem, 2.5rem);  /* ~28px  → 40px */
	--wp-soc-text-h3:      clamp(1.375rem, 0.6vw + 1.2rem, 1.75rem);/* ~22px  → 28px */
	--wp-soc-text-h4:      clamp(1.125rem, 0.3vw + 1.05rem, 1.375rem); /* ~18px → 22px */
	--wp-soc-text-body-lg: 1.125rem; /* 18px */
	--wp-soc-text-body:    1rem;     /* 16px */
	--wp-soc-text-caption: 0.875rem; /* 14px */
	--wp-soc-text-label:   0.75rem;  /* 12px */

	/* ------------------------------------------------------------ *
	 * 3. SPACING SCALE
	 * A single 10-step scale. Everything — margin, padding, gap,
	 * section rhythm — is built from these steps only.
	 * ------------------------------------------------------------ */

	--wp-soc-space-1:  4px;
	--wp-soc-space-2:  8px;
	--wp-soc-space-3:  12px;
	--wp-soc-space-4:  16px;
	--wp-soc-space-5:  24px;
	--wp-soc-space-6:  32px;
	--wp-soc-space-7:  48px;
	--wp-soc-space-8:  64px;
	--wp-soc-space-9:  96px;
	--wp-soc-space-10: 128px;

	/* ------------------------------------------------------------ *
	 * 4. BORDER RADIUS SCALE
	 * ------------------------------------------------------------ */

	--wp-soc-radius-sm:  8px;
	--wp-soc-radius-md:  12px;
	--wp-soc-radius-lg:  16px;
	--wp-soc-radius-xl:  20px;
	--wp-soc-radius-2xl: 24px;
	--wp-soc-radius-3xl: 32px;
	--wp-soc-radius-full: 999px; /* Pills, dots, avatars — outside the numeric scale by nature */

	/* ------------------------------------------------------------ *
	 * 5. SHADOW SCALE
	 * Shadows are deliberately soft and low-opacity — premium dark
	 * UIs read depth through subtle elevation, not hard drop shadows.
	 * Glow is the brand-colored accent shadow used on primary actions
	 * and active/hovered elements.
	 * ------------------------------------------------------------ */

	--wp-soc-shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.45);
	--wp-soc-shadow-md: 0 12px 28px -12px rgba(0, 0, 0, 0.55);
	--wp-soc-shadow-lg: 0 24px 48px -18px rgba(0, 0, 0, 0.6);
	--wp-soc-shadow-glow: 0 0 0 1px rgba(var(--wp-soc-color-primary-rgb), 0.14),
	                      0 0 28px -4px rgba(var(--wp-soc-color-primary-rgb), 0.38);

	/* ------------------------------------------------------------ *
	 * 6. MOTION
	 * Shared easing curves and durations for every animated file.
	 * ------------------------------------------------------------ */

	--wp-soc-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--wp-soc-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--wp-soc-ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);

	--wp-soc-duration-fast:   150ms;
	--wp-soc-duration-base:   250ms;
	--wp-soc-duration-slow:   400ms;
	--wp-soc-duration-slower: 700ms;

	/* ------------------------------------------------------------ *
	 * 7. LAYOUT
	 * Section System: container/max-width tokens shared by every
	 * section template so column widths never drift between files.
	 * ------------------------------------------------------------ */

	--wp-soc-container-width: 100%;
	--wp-soc-container-max:   1360px;   /* Max width used by wide sections (Hero) */
	--wp-soc-container-max-narrow: 1200px; /* Max width used by text-led sections (Trusted By) */
	--wp-soc-container-max-prose:  720px;  /* Max width for long-form reading content */

	--wp-soc-container-pad-desktop: var(--wp-soc-space-6); /* 48px handled via space-6 + space-1 below */
	--wp-soc-container-pad-tablet:  var(--wp-soc-space-5);
	--wp-soc-container-pad-mobile:  var(--wp-soc-space-4);

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

	--wp-soc-z-base:     1;
	--wp-soc-z-dropdown:  10;
	--wp-soc-z-sticky:    20;
	--wp-soc-z-overlay:   30;
	--wp-soc-z-modal:     40;
	--wp-soc-z-toast:     50;

}

/**
 * ------------------------------------------------------------------
 * BREAKPOINT REFERENCE
 * ------------------------------------------------------------------
 * CSS media queries cannot read custom properties in their condition,
 * so breakpoints can't be true var() tokens — but every file in this
 * system treats the pixel values below as the single source of truth
 * and never introduces a different breakpoint number of its own.
 *
 *   Desktop XL    → min-width: 1440px
 *   Desktop       → min-width: 1200px
 *   Laptop        → min-width: 1024px
 *   Tablet        → min-width: 768px
 *   Mobile        → min-width: 480px
 *   Small Mobile  → below 480px (default, mobile-first base styles)
 * ------------------------------------------------------------------
 */