/*
 * happ — Design Tokens
 * ---------------------------------------------------------------------------
 * Single source of truth for the UI-alignment effort.
 * Mirrors Code/ui-alignment/STYLE-GUIDE.md + 05-motion-spec.md.
 *
 * Phase 0: this file ONLY declares CSS custom properties. It has NO visual
 * effect on its own — nothing references these tokens yet. Components and
 * screens start pointing at them in Phase 1+.
 *
 * Loaded BEFORE style.css (enqueue handle: happ-tokens).
 * Do not hard-code values elsewhere — reference these tokens.
 */

:root {
	/* ===================================================================
	 * COLORS
	 * =================================================================== */
	--happ-text: #20142D;          /* all interface text (only default) */
	--happ-cta: #221530;           /* primary CTA background (dark pill) */
	--happ-accent: #EBE9F6;        /* secondary btn / selected item / active nav */
	--happ-accent-text: #786092;   /* text on --happ-accent (only text exception) */
	--happ-surface: #F7F7FC;       /* input fill / selectable rest / bottom-nav bg */
	--happ-surface-nav: #f5f8fc;   /* bottom-nav pill (inactive) */
	--happ-divider: #E8E6F0;       /* list-row divider / skeleton tone */
	--happ-card: #FFFFFF;          /* content card background */
	--happ-placeholder: #A7A9B0;   /* input placeholder — soft gray */

	/* Legacy heading color — TO BE MIGRATED to --happ-text. Token kept only
	 * so migration can reference it during transition. Do not adopt for new work. */
	--happ-text-legacy: #171A27;

	/* Semantic — icons / indicators / background tints ONLY, never text.
	 * TODO(Phase 1 Alerts): replace with exact HEX extracted from UI/items/Alerts. */
	--happ-info: #3B82F6;          /* TBD-from-UI (placeholder) */
	--happ-success: #22C55E;       /* TBD-from-UI (placeholder) */
	--happ-warning: #F59E0B;       /* TBD-from-UI (placeholder) */
	--happ-error: #EF4444;         /* TBD-from-UI (placeholder) */

	/* ===================================================================
	 * TYPOGRAPHY
	 * =================================================================== */
	--happ-font: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--happ-fw-regular: 400;        /* body, meta */
	--happ-fw-medium: 500;         /* subtitles, tabs, labels */
	--happ-fw-bold: 700;           /* headings, item names, emphasis */

	/* Type scale (derived from pixel-perfect Dashboard + Settings) */
	--happ-fs-display: 50px;       /* single hero number */
	--happ-fs-h1: 35px;            /* screen / full-popup title */
	--happ-fs-h2: 30px;            /* primary section header */
	--happ-fs-h3: 28px;            /* list / full-view title */
	--happ-fs-h4: 24px;            /* secondary title */
	--happ-fs-h5: 21px;            /* secondary section headers */
	--happ-fs-tab: 16px;          /* inner pagination tabs (NOT a heading) */
	--happ-fs-subtitle: 16px;      /* group label / subtitle */
	--happ-fs-body: 15px;          /* body, item names */
	--happ-fs-body-sm: 14px;       /* list rows, secondary text */
	--happ-fs-meta: 13px;          /* meta, descriptions, inline notices */
	--happ-fs-caption: 12px;       /* dates, smallest meta */

	/* ===================================================================
	 * SPACING — 8pt grid (4px half-step for tight gaps)
	 * =================================================================== */
	--happ-space-1: 4px;
	--happ-space-2: 8px;
	--happ-space-3: 16px;
	--happ-space-4: 24px;
	--happ-space-5: 32px;
	--happ-space-6: 48px;

	/* ===================================================================
	 * RADIUS
	 * =================================================================== */
	--happ-radius-xs: 3px;         /* badges, chips */
	--happ-radius-sm: 5px;        /* inputs, small buttons, rows */
	--happ-radius-md: 7px;        /* cards, content blocks */
	--happ-radius-lg: 10px;        /* full-popup / bottom-sheet top corners */
	--happ-radius-full: 9999px;    /* pills / CTA / search / avatar */

	/* ===================================================================
	 * SHADOWS — cards flat; soft shadow only for popups
	 * =================================================================== */
	--happ-shadow-none: none;
	--happ-shadow-popup: 0 8px 32px rgba(32, 20, 45, 0.12);

	/* ===================================================================
	 * ICON SIZES
	 * =================================================================== */
	--happ-icon-sm: 16px;
	--happ-icon-md: 20px;
	--happ-icon-lg: 24px;

	/* ===================================================================
	 * MOTION (see 05-motion-spec.md — restraint-first)
	 * =================================================================== */
	/* durations — calibrated for immediacy; default to the short end */
	--happ-motion-press: 110ms;
	--happ-motion-fast: 180ms;
	--happ-motion-base: 250ms;     /* navigation, alerts, short popups */
	--happ-motion-slow: 340ms;     /* large surfaces only */
	--happ-motion-exit: 180ms;     /* exits always faster than entrances */

	/* easing */
	--happ-ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
	--happ-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);   /* entrances */
	--happ-ease-in: cubic-bezier(0.4, 0.0, 1, 1);      /* exits */
	--happ-ease-spring: cubic-bezier(0.34, 1.26, 0.64, 1); /* minimal overshoot: sheets/alerts/press ONLY */

	/* translate distances */
	--happ-move-sm: 8px;
	--happ-move-md: 16px;
	--happ-move-lg: 24px;

	/* stagger (very subtle) */
	--happ-stagger-step: 100ms;
	/* stagger-max: 8 items, stagger-min-items: 2 — enforced in JS, not CSS */
}