/*
 * Word.Studio design tokens — v1 (Nov 2026)
 *
 * Source of truth for colors and fonts is Elementor → Site Settings.
 * Each color token reads its Elementor global first (var(--e-global-color-<id>))
 * and falls back to the same value, so this file keeps working on pages
 * Elementor doesn't render (e.g. plain WordPress, AI Engine forms).
 * Spacing, radius, sizing and motion live only here.
 */

:root {
	/* ── Neutral ramp: monochrome, faintly violet-tinted (the site's existing grays) ── */
	--ws-white:    var(--e-global-color-wswhite, #FFFFFF);
	--ws-gray-50:  var(--e-global-color-e114724, #F8F7FA);
	--ws-gray-100: var(--e-global-color-75f04f7, #F1F0F5);
	--ws-gray-200: var(--e-global-color-wsg200, #E4E2E9);
	--ws-gray-300: var(--e-global-color-2ae4a16, #BEBBC2);
	--ws-gray-400: var(--e-global-color-wsg400, #8E8A97);
	--ws-gray-500: var(--e-global-color-wsg500, #757180);
	--ws-gray-600: var(--e-global-color-secondary, #5E5B66);
	--ws-gray-700: var(--e-global-color-7c49827, #454347);
	--ws-gray-800: var(--e-global-color-text, #2D2C30);
	--ws-gray-900: var(--e-global-color-primary, #18181A);
	--ws-black:    var(--e-global-color-accent, #000000);

	/* ── Feedback (forms only) ── */
	--ws-success:      var(--e-global-color-wsok, #1E7A4C);
	--ws-success-soft: #EEF7F2;
	--ws-error:        var(--e-global-color-wserr, #B42318);
	--ws-error-soft:   #FDF3F2;

	/* ── Semantic roles ── */
	--ws-surface-page:    var(--ws-gray-100);   /* app pages: tools, dashboard */
	--ws-surface-card:    var(--ws-white);
	--ws-surface-raised:  var(--ws-gray-50);
	--ws-surface-inverse: var(--ws-gray-900);   /* heroes, limit wall, footer */

	--ws-text:            var(--ws-gray-800);   /* body copy */
	--ws-text-strong:     var(--ws-gray-900);   /* headings */
	--ws-text-muted:      var(--ws-gray-600);   /* meta, captions (5.9:1 on gray-100) */
	--ws-text-placeholder:var(--ws-gray-500);   /* 4.7:1 on white */
	--ws-text-on-inverse: var(--ws-white);
	--ws-text-on-inverse-muted: var(--ws-gray-300);

	--ws-border:          var(--ws-gray-200);   /* dividers, card edges */
	--ws-border-control:  var(--ws-gray-300);   /* form fields: subtle by choice; hover/focus darken */
	--ws-border-strong:   var(--ws-gray-900);

	--ws-focus:           var(--ws-gray-900);
	--ws-focus-on-inverse:var(--ws-white);

	/* ── Type ── */
	--ws-font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
	--ws-font-sans:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	/* fluid sizes: mobile → desktop (375px → 1440px) */
	--ws-text-display-xl: clamp(2.75rem, 1.86rem + 3.8vw, 5rem);     /* 44 → 80  home & pricing hero */
	--ws-text-display-l:  clamp(2.25rem, 1.85rem + 1.7vw, 3.5rem);   /* 36 → 56  section heroes */
	--ws-text-display-m:  clamp(1.625rem, 1.47rem + 0.66vw, 2rem);   /* 26 → 32  serif section titles */
	--ws-text-h1:         clamp(1.875rem, 1.6rem + 1.13vw, 2.625rem);/* 30 → 42  tool / page titles */
	--ws-text-h2:         clamp(1.5rem, 1.41rem + 0.38vw, 1.75rem);  /* 24 → 28 */
	--ws-text-h3:         clamp(1.25rem, 1.2rem + 0.19vw, 1.375rem); /* 20 → 22  card titles */
	--ws-text-h4:         1.125rem;  /* 18 */
	--ws-text-body-l:     1.125rem;  /* 18  lead paragraphs */
	--ws-text-body:       1rem;      /* 16  body, form inputs (16 prevents iOS zoom) */
	--ws-text-small:      0.875rem;  /* 14  card descriptions, captions, labels */
	--ws-text-meta:       0.8125rem; /* 13  breadcrumbs, dates, toolbox tags */

	--ws-leading-tight: 1.1;
	--ws-leading-snug:  1.25;
	--ws-leading-body:  1.65;

	--ws-tracking-display: -0.01em;
	--ws-tracking-heading: -0.03em;
	--ws-tracking-body:    0;

	--ws-measure: 68ch;  /* article body width */

	/* ── Radius: three steps + pill ── */
	--ws-radius-sm:   6px;   /* tags, chips, small inner boxes */
	--ws-radius-md:   10px;  /* buttons, inputs */
	--ws-radius-lg:   16px;  /* cards, form panels, limit wall */
	--ws-radius-pill: 999px;

	/* ── Spacing: 4px base ── */
	--ws-space-1: 4px;
	--ws-space-2: 8px;
	--ws-space-3: 12px;
	--ws-space-4: 16px;
	--ws-space-5: 24px;
	--ws-space-6: 32px;
	--ws-space-7: 48px;
	--ws-space-8: 64px;
	--ws-space-9: 96px;
	--ws-section-y: clamp(48px, 30px + 4.8vw, 96px);

	/* ── Controls ── */
	--ws-control-h-sm: 40px;
	--ws-control-h:    52px;
	--ws-control-h-lg: 60px;  /* the one primary action on a tool form */

	/* ── Elevation: borders first; one soft shadow for floating layers ── */
	--ws-shadow-float: 0 12px 32px -8px rgb(24 24 26 / 0.18), 0 2px 6px rgb(24 24 26 / 0.06);
	--ws-shadow-hover: 0 8px 20px -10px rgb(24 24 26 / 0.22);
	--ws-shadow-press: 0 12px 26px -12px rgb(24 24 26 / 0.55);   /* ink button hover */
	/* White "glow" for light buttons on dark surfaces (matches the home Get Access and Sign Up buttons) */
	--ws-glow-rest:  2px 0 56px -15px rgb(255 255 255 / 0.5);
	--ws-glow-hover: 0 0 52px 0 rgb(255 255 255 / 0.37);
	--ws-glow-fill:       radial-gradient(at 50% 0%, #FFFFFF 24%, #9E9E9E 100%);  /* "lit from above" */
	--ws-glow-fill-hover: radial-gradient(at 50% 0%, #FFFFFF 0%, #FFFFFF 100%);
	--ws-glow-edge:       #3D3D3D;
	--ws-glow-grow:       1.1;
	--ws-dur-glow:        1s;

	/* ── Motion ── */
	--ws-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ws-dur-fast: 140ms;
	--ws-dur:      220ms;
	--ws-dur-slow: 600ms;  /* glow bloom, entrances */

	/* ── Layout ── */
	--ws-container: 1350px;
	--ws-gutter: clamp(16px, 8px + 2vw, 32px);
}