/**
 * Phonehub design tokens.
 *
 * Source of truth: design/Phonehub Design System.dc.html.
 * Names in the first block match the spec exactly. The "Component values"
 * block holds literal values the spec uses inside component examples without
 * naming them; they are tokenised here so base.css never hardcodes colours.
 *
 * Colour rule: orange (--c-primary*) is a fill colour only. Text on orange is
 * always black (--c-on-primary). Use --c-primary-ink for orange-looking text
 * on light surfaces.
 */

:root {
	/* Colour */
	--c-primary: #F2971E;
	--c-primary-hover: #FFA530;
	--c-primary-press: #E0850A;
	--c-primary-ink: #A35700;
	--c-primary-soft: #FEF1DD;
	--c-text: #0E0E0E;
	--c-muted: #5E5B57;
	--c-surface: #FFFFFF;
	--c-surface-2: #F6F5F3;
	--c-line: #E7E5E1;
	--c-success: #1A7A43;
	--c-warning: #B54708;
	--c-danger: #D92D20;
	--c-whatsapp: #25D366;

	/* Type families (Sinhala fallback in every stack) */
	--fd: 'Space Grotesk', 'Noto Sans Sinhala', sans-serif;
	--fb: 'Manrope', 'Noto Sans Sinhala', sans-serif;

	/* Type scale (fluid between 390 and 1440px) */
	--fs-display: clamp(42px, 6vw, 76px);
	--fs-h1: clamp(34px, 4.4vw, 56px);
	--fs-h2: clamp(28px, 3vw, 40px);
	--fs-h3: 24px;
	--fs-price: 18px;
	--fs-body-lg: 18px;
	--fs-body: 16px;
	--fs-small: 14px;
	--fs-caption: 12px;

	/* Spacing */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-7: 32px;
	--sp-8: 40px;
	--sp-9: 56px;
	--sp-10: 72px;
	--sp-11: 96px;

	/* Radius */
	--r-xs: 6px;
	--r-sm: 12px;
	--r-md: 16px;
	--r-lg: 20px;
	--r-xl: 28px;
	--r-pill: 999px;

	/* Shadow */
	--sh-1: 0 4px 12px -4px rgba(14, 14, 14, .2);
	--sh-2: 0 14px 28px -16px rgba(14, 14, 14, .35);
	--sh-3: 0 40px 80px -24px rgba(14, 14, 14, .5);

	/* Motion */
	--ease: cubic-bezier(.2, .7, .2, 1);

	/* ---- Component values (used in the spec's examples, not named there) ---- */
	--c-on-primary: #0E0E0E;
	--c-on-ink: #FFFFFF;
	--c-ink-hover: #262626;
	--c-ink-press: #000000;
	--c-danger-ink: #B42318;
	--c-success-soft: #E3F4EA;
	/* Design spec: #D6D3CE (1.5:1 on white). Darkened to meet WCAG 1.4.11 non-text contrast (3:1). */
	--c-input-line: #8F8B85;
	--c-focus-ring: #FCE3BF;
	--c-star: #E08A12;
	--c-star-off: #D6D3CE;
	--c-disabled: #A8A49F;
	--c-promo-soft: #FEF6EA;
	--c-promo-track: #F4DDBB;
	--c-backdrop: rgba(14, 14, 14, .5);
	--c-backdrop-soft: rgba(14, 14, 14, .45);
	--c-heart-stroke: #C76E00;
	--c-wish-bg: rgba(255, 255, 255, .92);
	--c-ph-1: #F1EFEC;
	--c-ph-2: #F7F6F4;
	--c-ph-alt-1: #EAE6E0;
	--c-ph-alt-2: #F3F1EE;
	--c-ph-ink: #8A8680;

	/* Inverse (ink) surfaces: announcement bar, footer, FAB, toast */
	--c-inv: #0E0E0E;
	--c-inv-text: #E9E7E3;
	--c-inv-muted: #A8A49F;
	--c-inv-line: #333333;
	--c-inv-line-2: #262626;
	--c-whatsapp-soft: #132017;
	--c-inv-sub: #C9C6C1;
	--c-inv-field: #1A1A1A;
	--c-inv-success: #4ADE80;
	--c-inv-danger: #F97066;
	--c-inv-danger-text: #FDA29B;

	/* Placeholder stripes per surface (missing images) */
	--c-ph-3: #EFEDEA;
	--c-tile-ph-1: #ECE9E5;
	--c-tile-ph-2: #F4F2EF;
	--c-hero-ph-1: #1C1C1C;
	--c-hero-ph-2: #151515;
	--c-promo-ph-1: #E8890F;
	--c-promo-ph-2: #EE9118;

	--sh-btn-primary: 0 12px 24px -10px rgba(242, 151, 30, .8);
	--sh-btn-ink: 0 12px 24px -12px rgba(14, 14, 14, .7);
	--sh-header: 0 8px 24px -16px rgba(14, 14, 14, .25);
	--sh-popover: 0 24px 48px -16px rgba(14, 14, 14, .25);
	--sh-card-btn-hover: 0 10px 20px -8px rgba(14, 14, 14, .35);
	--sh-fab: 0 12px 28px -10px rgba(14, 14, 14, .55);
	--sh-toast: 0 16px 32px -12px rgba(14, 14, 14, .5);
	--sh-drawer: -24px 0 48px -24px rgba(14, 14, 14, .35);

	--z-header: 40;
	--z-fab: 45;
	--z-popover: 50;
	--z-menu: 60;
	--z-drawer: 70;
	--z-modal: 80;
	--z-toast: 90;

	--header-h: 60px;

	--dur-fast: 150ms;
	--dur-btn: 180ms;
	--dur-toast: 220ms;
	--dur-lift: 220ms;
	--dur-underline: 240ms;
	--dur-swap: 260ms;
	--dur-drawer: 320ms;
	--dur-reveal: 420ms;

	--container: 1320px;
	--gutter: 16px;
	--btn-h-lg: 52px;
	--btn-h-md: 48px;
	--btn-h-sm: 44px;
}

@media (min-width: 900px) {
	:root {
		--gutter: 40px;
		--header-h: 76px;
	}
}

/* Dark mode: [data-theme="dark"] swaps the same tokens. */
[data-theme="dark"] {
	color-scheme: dark;

	--c-primary: #F2971E;
	--c-primary-hover: #FFA530;
	--c-primary-press: #E0850A;
	--c-primary-ink: #F2971E;
	--c-primary-soft: #2A1D0A;
	--c-text: #F5F4F2;
	--c-muted: #A8A49F;
	--c-surface: #0E0E0E;
	--c-surface-2: #1A1A1A;
	--c-line: #2A2A2A;
	--c-success: #4ADE80;
	--c-warning: #FDB022;
	--c-danger: #F97066;
	--c-whatsapp: #25D366;

	/* Component values: no dark values in the spec, derived to keep contrast. */
	--c-on-ink: #0E0E0E;
	--c-ink-hover: #E7E5E1;
	--c-ink-press: #FFFFFF;
	--c-danger-ink: #F97066;
	--c-success-soft: #132017;
	--c-input-line: #77746F;
	--c-focus-ring: #3A2A10;
	--c-star-off: #3A3A3A;
	--c-disabled: #6E6E70;
	--c-promo-soft: #2A1D0A;
	--c-promo-track: #3A2A10;
	--c-backdrop: rgba(0, 0, 0, .65);
	--c-backdrop-soft: rgba(0, 0, 0, .6);
	--c-wish-bg: rgba(14, 14, 14, .85);
	--c-ph-1: #1C1C1C;
	--c-ph-2: #151515;
	--c-ph-alt-1: #222222;
	--c-ph-alt-2: #1A1A1A;
	--c-inv: #1A1A1A;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}