/*
 * tokens.css — the design system, lifted from the client's Figma file.
 *
 * Every value here came out of the .fig archive itself (4,109 nodes decoded),
 * not from a screenshot or an eyedropper. Where the file had no value — the
 * semantic colours, the elevation scale — the addition is marked and was tuned
 * to sit inside the existing palette.
 *
 * Reference: wp-content/_reference/prototype/docs/PROTOTYPE-SPEC.md section 1.
 *
 * Rule for anyone extending this: if you need a colour, a radius or a spacing
 * step that is not here, that is a design question, not a CSS question. Ask
 * before inventing one — DR-4 exists because the previous build accumulated
 * several competing button styles exactly that way.
 */

:root {
	/* ---------------------------------------------------------- brand -- */
	--ulm-primary:        #3A836B;  /* header bar, primary buttons, links, active states */
	--ulm-deep:           #29483C;  /* all headings, dark labels, footer links */
	--ulm-teal:           #116254;  /* plan prices */
	--ulm-gold:           #FEDC97;  /* login button, vendor pill, CTA fill, highlight underline */
	--ulm-gold-ink:       #B9913E;  /* eyebrow labels */
	--ulm-gold-alt:       #C59E33;  /* "choose your vendor path" eyebrow */

	/* Pastel section tints. Each is load-bearing in the design — the four
	   value-proposition cards are identified by them, not by a border. */
	--ulm-tint-mint:      #F2FAF7;  /* Earn card, founding-vendor band, testimonials */
	--ulm-tint-lilac:     #F5EDFF;  /* Share card, CTA band */
	--ulm-tint-peach:     #FFF2DE;  /* Connect card */
	--ulm-tint-sky:       #E3F7FD;  /* Inspire card, mailing-list band */
	--ulm-tint-cream:     #FFFDF7;  /* hero band, related-products band */
	--ulm-tint-header:    #EAF7F1;  /* strip behind the vendor login pill */

	/* -------------------------------------------------------- surface -- */
	--ulm-surface:        #FFFFFF;
	--ulm-surface-alt:    #F3F4F6;  /* image placeholders, social buttons */

	/* ------------------------------------------------------------ ink -- */
	--ulm-ink:            #121212;  /* body copy */
	--ulm-ink-muted:      #595959;  /* secondary copy, breadcrumbs, meta */
	--ulm-ink-faint:      #666666;  /* rating counts, struck-through prices */
	--ulm-ink-alt:        #2B2B2B;  /* card prices */
	--ulm-ink-invert:     #FFFFFF;

	/* --------------------------------------------------------- accent -- */
	--ulm-star:           #FFC107;  /* rating stars */
	--ulm-track:          #C9C9C9;  /* rating-distribution bar track */
	--ulm-m3-outline:     #49454F;  /* Material text-field labels and helper text */

	/* Semantic colours are NOT in the Figma file. Added, tuned to the palette
	   so a success message does not arrive from a different design system. */
	--ulm-success:        #3A836B;
	--ulm-warning:        #B9913E;
	--ulm-danger:         #C0392B;
	--ulm-info:           #116254;
	--ulm-success-bg:     #F2FAF7;
	--ulm-warning-bg:     #FFF7E8;
	--ulm-danger-bg:      #FDF0EE;
	--ulm-info-bg:        #EAF7F1;

	/* --------------------------------------------------------- border -- */
	/* The file uses no borders on cards. A 1px hairline is added because a
	   white card on a white section is otherwise invisible in a browser
	   (prototype deviation D-3). Kept inside the palette. */
	--ulm-border:         #EDF0EE;  /* cards, panels, dividers — browse frame */
	--ulm-border-strong:  #DCE7E1;
	--ulm-border-input:   #C9D6D0;

	/* ------------------------------------------------------ dashboard -- */
	--ulm-sidebar-bg:     #122A22;  /* vendor + admin sidebar */
	--ulm-sidebar-ink:    #C7D9D1;
	--ulm-sidebar-active: #1C3F33;

	/* ----------------------------------------------------- typography -- */
	/* Poppins carries the product (DR-2). The four support faces each appear
	   in the Figma file in one specific place and are kept only there. */
	--ulm-font:           "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ulm-font-wordmark:  "Montserrat Alternates", var(--ulm-font);   /* the Uloominate wordmark */
	--ulm-font-tagline:   "Playfair Display", Georgia, serif;         /* footer "Teach More. Share More." */
	--ulm-font-numeric:   "DM Sans", var(--ulm-font);                 /* browse prices, pagination */
	--ulm-font-m3:        "Roboto", var(--ulm-font);                  /* Material field labels */

	--ulm-fw-regular:     400;
	--ulm-fw-medium:      500;
	--ulm-fw-semibold:    600;
	--ulm-fw-bold:        700;

	/* The scale actually used in the file, nothing invented:
	   50 48 44 36 32 30 28 24 21.6 20 18 16 15.2 14 13 12 10 */
	--ulm-text-3xs:       10px;
	--ulm-text-2xs:       12px;
	--ulm-text-xs:        13px;
	--ulm-text-sm:        14px;
	--ulm-text-base:      16px;
	--ulm-text-md:        18px;
	--ulm-text-lg:        20px;
	--ulm-text-xl:        24px;
	--ulm-text-2xl:       28px;
	--ulm-text-3xl:       32px;
	--ulm-text-4xl:       36px;
	--ulm-text-5xl:       44px;
	--ulm-text-6xl:       50px;

	/* Fluid headings. The 1728px frame is the fixed reference; everything
	   below reflows rather than being redesigned (deviation D-5). */
	--ulm-text-hero:      clamp(30px, 3.4vw, 50px);
	--ulm-text-section:   clamp(30px, 2.9vw, 44px);
	--ulm-text-lede:      clamp(19px, 1.7vw, 28px);

	--ulm-leading-tight:   1.12;
	--ulm-leading-snug:    1.35;
	--ulm-leading-normal:  1.5;
	--ulm-leading-relaxed: 1.75;

	/* ---------------------------------------------------------- shape -- */
	--ulm-radius-xs:      4px;
	--ulm-radius-sm:      8px;
	--ulm-radius-md:      12px;
	--ulm-radius-lg:      16px;
	--ulm-radius-xl:      20px;
	--ulm-radius-2xl:     24px;
	--ulm-radius-3xl:     28px;
	--ulm-radius-pill:    100px;

	/* -------------------------------------------------------- spacing -- */
	--ulm-space-1:        4px;
	--ulm-space-2:        8px;
	--ulm-space-3:        12px;
	--ulm-space-4:        16px;
	--ulm-space-5:        20px;
	--ulm-space-6:        24px;
	--ulm-space-7:        28px;
	--ulm-space-8:        32px;
	--ulm-space-9:        36px;
	--ulm-space-10:       40px;
	--ulm-space-12:       48px;
	--ulm-space-14:       54px;
	--ulm-space-16:       64px;

	/* --------------------------------------------------------- layout -- */
	--ulm-container:      1280px;   /* content width inside the 1728px page */
	--ulm-page-max:       1729px;   /* the Figma frame width */
	--ulm-gutter:         24px;

	/* The design positions sections at specific offsets from the page edge
	   rather than centring a container. Reverted to the file's real values on
	   15 Aug 2026 at the client's request (deviation D-1), scaled
	   proportionally below 1728px. */
	--ulm-inset-logo:     clamp(20px, 19.4vw, 336px);
	--ulm-inset-nav:      clamp(20px, 14.9vw, 257px);
	/*
	 * Landing content bands. 7.5vw rather than the Figma frame's 12.5vw: at
	 * 12.5 the bands were narrower than the hero above them and the three plan
	 * cards were squeezed. The cap only engages past ~2670px, so 7.5vw is what
	 * every real screen gets.
	 *
	 * EVERY band uses this one value — why-creators, founding promotion, plans,
	 * benefits and testimonials. Two of them used to carry their own inset and
	 * sat visibly wider than the rest.
	 */
	/* --ulm-inset-section:  clamp(20px, 7.5vw, 200px); */
	--ulm-inset-section:  clamp(20px, 9.5vw, 220px);
	--ulm-inset-page:     clamp(20px, 8vw, 144px);     /* browse + product frames */
	--ulm-inset-hero:     clamp(20px, 4.34vw, 75px);
	--ulm-inset-strip:    clamp(20px, 4.51vw, 78px);
	--ulm-inset-right:    clamp(20px, 3.8vw, 66px);

	/* ------------------------------------------------------ elevation -- */
	/* The Figma file uses no drop shadows at all. These are added, kept
	   deliberately subtle so they read as the same family (deviation D-3). */
	--ulm-shadow-sm:      0 1px 2px rgba(18, 18, 18, .04);
	--ulm-shadow-md:      0 1px 2px rgba(18, 18, 18, .04), 0 12px 24px -18px rgba(41, 72, 60, .35);
	--ulm-shadow-lg:      0 1px 2px rgba(18, 18, 18, .04), 0 24px 48px -32px rgba(41, 72, 60, .4);
	--ulm-shadow-lift:    0 14px 28px -12px rgba(58, 131, 107, .75);

	/* --------------------------------------------------------- motion -- */
	--ulm-ease:           cubic-bezier(.2, .7, .3, 1);
	--ulm-duration-fast:  .2s;
	--ulm-duration-base:  .24s;
	--ulm-duration-slow:  .5s;

	--ulm-z-header:       100;
	--ulm-z-dropdown:     200;
	--ulm-z-drawer:       300;
	--ulm-z-modal:        400;
	--ulm-z-toast:        500;
}

/*
 * The storefront is a single committed light design. There is no dark variant
 * in the Figma file, and the pastel palette has no meaningful dark translation
 * — inverting it would produce a different product, not the same one at night.
 * Background and colour are therefore painted explicitly in base.css rather
 * than inherited, so a viewer's OS preference cannot leave text unreadable.
 */
@media (prefers-reduced-motion: reduce) {
	:root {
		--ulm-duration-fast: .001ms;
		--ulm-duration-base: .001ms;
		--ulm-duration-slow: .001ms;
	}
}