/**
 * Yodha Fuel — design tokens.
 * CSS custom properties only. No values are duplicated elsewhere in the
 * theme; every other stylesheet reads from these.
 *
 * Phase 2: expanded from the Phase 1 starter set into a full token system
 * (text/background/border colors, a named spacing scale, container widths,
 * radii, shadows, transitions, full typography levels, button sizing and
 * product-card sizing). Existing var names from Phase 1 that other files
 * already depended on (--space-1…5, --fs-h1/h2/h3/body/small, --radius-sm/md,
 * --shadow-card, --container-max, --transition-fast, --color-text-muted,
 * --color-border) are all still defined below, so nothing silently breaks —
 * base.css, layout.css and components.css have simply been updated to also
 * use the new, more complete set where it adds real value.
 */

:root {

	/* ============================================================
	   BRAND COLORS — approved Yodha Fuel palette
	   ============================================================ */
	--yodha-orange: #F55301;
	--yodha-orange-dark: #C94402;
	--warrior-dark: #272F32;
	--warrior-dark-soft: #3A4448;
	--white: #FFFFFF;
	--off-white: #F1EFEA; /* warm light neutral — was #F7F7F5, too close to
	                          white to read as a distinct section band at a
	                          glance; this stays visibly a step down from
	                          white without turning cold/gray */

	/* Functional (not brand, but needed for real UI states) */
	--color-success: #1E8E3E;
	--color-danger: #D32F2F;

	/* ============================================================
	   TEXT COLORS
	   ============================================================ */
	--color-text: var(--warrior-dark);           /* default body text, on light backgrounds */
	--color-text-muted: #6B7280;                 /* secondary/meta text, on light backgrounds */
	--color-heading: var(--warrior-dark);
	--color-text-inverse: var(--white);           /* body text on dark backgrounds (header/footer) */
	--color-text-inverse-muted: #C7CBCD;          /* secondary text on dark backgrounds */
	--color-text-link: var(--yodha-orange);
	--color-text-link-hover: var(--yodha-orange-dark);

	/* ============================================================
	   BACKGROUND COLORS
	   ============================================================ */
	--color-bg: var(--white);
	--color-bg-alt: var(--off-white);             /* section alternation, card wells */
	--color-bg-dark: var(--warrior-dark);         /* header, footer, bold sections */
	--color-bg-dark-soft: var(--warrior-dark-soft); /* nested panels on dark backgrounds */
	--color-bg-brand: var(--yodha-orange);        /* CTA fills, active states */

	/* ============================================================
	   BORDERS
	   ============================================================ */
	--color-border: #E4E4E2;                      /* default, on light backgrounds */
	--color-border-dark: rgba(255, 255, 255, 0.16); /* hairlines on dark backgrounds */
	--border-width: 1px;
	--border-width-thick: 2px;

	/* ============================================================
	   SPACING SCALE — 4px base, mobile-first
	   ============================================================ */
	--space-2xs: 0.25rem;   /* 4px  */
	--space-xs: 0.5rem;     /* 8px  */
	--space-sm: 0.75rem;    /* 12px */
	--space-md: 1rem;       /* 16px */
	--space-lg: 1.5rem;     /* 24px */
	--space-xl: 2rem;       /* 32px */
	--space-2xl: 3rem;      /* 48px */
	--space-3xl: 4rem;      /* 64px */
	--space-4xl: 5rem;      /* 80px — large-desktop section rhythm */
	--space-5xl: 6rem;      /* 96px — large-desktop section rhythm */

	/* Phase 1 numeric aliases — kept so nothing that already shipped breaks. */
	--space-1: var(--space-xs);   /* 8px  */
	--space-2: var(--space-md);   /* 16px */
	--space-3: var(--space-lg);   /* 24px */
	--space-4: var(--space-xl);   /* 32px */
	--space-5: var(--space-2xl);  /* 48px */

	/* ============================================================
	   CONTAINER WIDTHS
	   ============================================================ */
	--container-max: 1280px;              /* full-width sections */
	--container-max-narrow: 960px;        /* reading-width content (policies, articles) */
	--container-padding-mobile: 1rem;     /* 375–479px */
	--container-padding-small: 1.25rem;   /* 480–767px */
	--container-padding-tablet: 1.5rem;   /* 768–1023px */
	--container-padding-desktop: 2rem;    /* 1024px+ */

	/* ============================================================
	   BORDER RADIUS
	   ============================================================ */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-full: 9999px;   /* pills, badges, avatar-style shapes */

	/* ============================================================
	   SHADOWS — warm, dark-tinted (from Warrior Dark, not pure black)
	   ============================================================ */
	--shadow-sm: 0 1px 2px rgba(39, 47, 50, 0.06);
	--shadow-card: 0 1px 3px rgba(39, 47, 50, 0.08);
	--shadow-card-hover: 0 6px 16px rgba(39, 47, 50, 0.14);
	--shadow-lg: 0 12px 32px rgba(39, 47, 50, 0.18);

	/* ============================================================
	   TRANSITIONS
	   ============================================================ */
	--transition-fast: 150ms ease;
	--transition-base: 200ms ease;
	--transition-slow: 300ms ease;

	/* ============================================================
	   TYPOGRAPHY — system-font stack only, no external font requests
	   ============================================================ */
	--font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Weights */
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-heavy: 800;

	/* Line heights */
	--lh-heading: 1.15;
	--lh-tight: 1.3;
	--lh-body: 1.6;
	--line-height-heading: var(--lh-heading); /* Phase 1 alias */
	--line-height-body: var(--lh-body);       /* Phase 1 alias */

	/* Letter spacing */
	--ls-label: 0.06em;   /* uppercase eyebrows/labels/badges */
	--ls-nav: 0.02em;

	/* Heading levels */
	--fs-h1: clamp(1.75rem, 4vw, 2.75rem);
	--fs-h2: clamp(1.5rem, 3vw, 2.25rem);
	--fs-h3: 1.25rem;

	/* Body / UI text levels */
	--fs-body: 1rem;          /* 16px — default paragraph text */
	--fs-small: 0.875rem;     /* 14px — meta text, captions, fine print */
	--fs-label: 0.8125rem;    /* 13px — form labels, eyebrows, filter labels (uppercase) */
	--fs-nav: 0.9375rem;      /* 15px — primary navigation links */

	/* Commerce-specific text levels */
	--fs-product-title: 1rem;       /* 16px — product card title */
	--fs-product-title-lg: 1.25rem; /* 20px — single product page title (Phase 3+) */
	--fs-price: 1.125rem;            /* 18px — product card selling price */
	--fs-price-lg: 1.5rem;           /* 24px — single product page price (Phase 3+) */
	--fs-price-compare: 0.9375rem;   /* 15px — struck-through MRP */

	/* Button text */
	--fs-button: 0.9375rem;  /* 15px */
	--fw-button: var(--fw-bold);

	/* ============================================================
	   BUTTON SIZING
	   ============================================================ */
	--btn-height-sm: 36px;
	--btn-height-md: 44px;   /* default — meets 44px min tap-target guidance */
	--btn-height-lg: 52px;
	--btn-padding-x-sm: 0.75rem;
	--btn-padding-x-md: 1.25rem;
	--btn-padding-x-lg: 1.75rem;
	--btn-radius: var(--radius-sm);
	--btn-border-width: var(--border-width-thick);

	/* ============================================================
	   PRODUCT-CARD SIZING
	   ============================================================ */
	--card-radius: var(--radius-md);
	--card-padding: var(--space-md);
	--card-gap: var(--space-sm);
	--card-min-width: 160px;
	--card-max-width: 320px;
	--card-image-aspect: 1 / 1;

	/* Badge sizing (discount/promo badges on product cards) */
	--badge-padding-x: 0.5rem;
	--badge-padding-y: 0.125rem;
	--badge-radius: var(--radius-sm);
	--badge-font-size: var(--fs-small);
}

/*
 * Note on typography: --font-heading / --font-body currently point at a
 * system-font stack (no external font request, per the "no external font
 * services" constraint). If a brand typeface is confirmed later, self-host
 * it under assets/fonts/ and update these two variables only — no template
 * changes required.
 */