/*
 * SYKA Reward — Design Tokens
 * -----------------------------------------------------------------------
 * Visual identity brief (spec §4-§5):
 *
 * Color — named, not generic: this is a pan-India reward-utility platform
 * (watch/learn/earn/use — toilets, parking, bag storage, books, quizzes),
 * not a luxury fintech app. The palette leans warm and energetic (a
 * turmeric-gold reward accent, evoking the coin/token the whole product
 * is built around) against a cool, credible ink-violet for trust and
 * structure — deliberately NOT the cream+terracotta or near-black+neon
 * combinations that read as generic "AI-generated" defaults.
 *
 * Type — three roles, one family story: Space Grotesk (display/numbers)
 * has the geometric, slightly technical character that suits a balance
 * counter; IBM Plex Sans (body) and IBM Plex Mono (codes/receipts) are
 * chosen together because the Plex family has Devanagari sibling faces
 * — a small, real detail that fits a platform built for India, not an
 * arbitrary font pairing.
 *
 * Breakpoint scale — a documented convention (CSS custom properties
 * can't be used as media-query conditions, so these are literal
 * values applied consistently, not variables): 360px (small phones),
 * 480px (large phones), 768px (tablets), 1024px (small laptops),
 * 1280px (desktops), 1536px (large desktops). Mobile-first throughout
 * — base styles target the smallest screen, larger breakpoints add
 * layout, never fix broken layout that should have worked from the start.
 *
 * Signature — the Reward Ring: a circular progress ring reused across
 * the balance hero, streak counter, and QR check-in frame. Circles read
 * as coins/tokens throughout the product, so one motif ties earning,
 * streaks, and redemption together instead of three unrelated widgets.
 * -----------------------------------------------------------------------
 */

:root {
	/* ---- Color: brand ---- */
	--syka-ink:            #1C1B2E; /* primary text */
	--syka-ink-soft:       #4A4864; /* secondary text */
	--syka-violet:         #3D2C6D; /* deep brand violet */
	--syka-violet-bright:  #5B3FE0; /* primary interactive / CTA */
	--syka-violet-tint:    #EFEBFC; /* tinted surfaces / active nav */
	--syka-marigold:       #F2A93C; /* reward / coin / points ONLY */
	--syka-marigold-tint:  #FDF2DF;
	--syka-leaf:           #22A06B; /* success / credit */
	--syka-leaf-tint:      #E4F6EE;
	--syka-coral:          #E1483D; /* error / debit */
	--syka-coral-tint:     #FBE7E5;
	--syka-amber:          #E8862E; /* warning */
	--syka-amber-tint:     #FCEEDF;

	/* ---- Color: surfaces ---- */
	--syka-paper:          #F7F7FB; /* app background */
	--syka-surface:        #FFFFFF; /* card background */
	--syka-mist:           #E5E7EB; /* borders / dividers */
	--syka-mist-dark:      #CFD2DC; /* input borders, stronger dividers */
	--syka-violet-tint-dark: #D9D1FA; /* v2.0.0: was referenced but never defined */

	/* ---- Color: accessible text-on-light variants (v2.0.0) ----
	 * The brand success/error/gold/amber colours are below 4.5:1 on
	 * white (2.0–4.0:1), so they are used for fills, borders and icons;
	 * text and white-on-colour fills use these darker variants instead
	 * (all ≥ 4.9:1, verified). */
	--syka-leaf-strong:    #1A7F55; /* success text; white text on it = 4.99:1 */
	--syka-coral-strong:   #C23A30; /* error text; white text on it = 5.33:1 */
	--syka-coral-deep:     #9A2A22; /* error text on coral-tint = 6.47:1 */
	--syka-marigold-text:  #8A5A0F; /* reward/points text on white (5.92:1) or gold tint (5.34:1) */
	--syka-marigold-ink:   #4A2E05; /* text on a gold fill (6.24:1) */
	--syka-amber-text:     #9A5410; /* warning text on white (5.75:1) */
	--syka-info:           #2F5BD3;
	--syka-info-tint:      #E7EEFD;

	/* ---- Semantic aliases (v2.0.0 design system) ----
	 * Components should prefer these names; the brand names above stay
	 * for backward compatibility with any theme overrides. */
	--syka-color-primary:       var(--syka-violet-bright); /* #5B3FE0 — primary actions, white text */
	--syka-color-primary-dark:  var(--syka-violet);        /* #3D2C6D */
	--syka-color-text:          var(--syka-ink);           /* #1C1B2E */
	--syka-color-text-muted:    var(--syka-ink-soft);
	--syka-color-reward:        var(--syka-marigold);      /* #F2A93C — always with dark text */
	--syka-color-success:       var(--syka-leaf);          /* #22A06B */
	--syka-color-error:         var(--syka-coral);         /* #E1483D */
	--syka-color-bg:            var(--syka-paper);         /* #F7F7FB */
	--syka-color-card:          var(--syka-surface);       /* #FFFFFF */
	--syka-color-border:        var(--syka-mist);          /* #E5E7EB */
	--syka-focus-ring:          0 0 0 3px rgba(91, 63, 224, 0.35);

	/* ---- Typography ---- */
	--syka-font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
	--syka-font-body:    'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
	--syka-font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

	--syka-text-xs:   0.75rem;
	--syka-text-sm:   0.875rem;
	--syka-text-base: 1rem;
	--syka-text-lg:   1.125rem;
	--syka-text-xl:   1.375rem;
	--syka-text-2xl:  1.75rem;
	--syka-text-3xl:  2.25rem;
	--syka-text-4xl:  3rem;

	/* ---- Spacing scale ---- */
	--syka-space-1: 4px;
	--syka-space-2: 8px;
	--syka-space-3: 12px;
	--syka-space-4: 16px;
	--syka-space-5: 20px;
	--syka-space-6: 24px;
	--syka-space-8: 32px;
	--syka-space-10: 40px;
	--syka-space-12: 48px;

	/* ---- Radius ---- */
	--syka-radius-sm: 10px;   /* buttons, inputs */
	--syka-radius-md: 14px;   /* cards */
	--syka-radius-lg: 20px;   /* hero cards, sheets */
	--syka-radius-pill: 999px;

	/* ---- Shadow (tinted with brand violet, never pure black) ---- */
	--syka-shadow-sm: 0 1px 2px rgba(61, 44, 109, 0.06);
	--syka-shadow-md: 0 4px 16px rgba(61, 44, 109, 0.10);
	--syka-shadow-lg: 0 12px 32px rgba(61, 44, 109, 0.16);

	/* ---- Motion ---- */
	--syka-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--syka-duration-fast: 150ms;
	--syka-duration-base: 250ms;
	--syka-duration-slow: 450ms;

	/* ---- Layout ---- */
	--syka-bottom-nav-height: 64px;
	--syka-sidebar-width: 240px;
	--syka-content-max: 1120px;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--syka-duration-fast: 0ms;
		--syka-duration-base: 0ms;
		--syka-duration-slow: 0ms;
	}
}