/**
 * Design tokens
 *
 * Ported 1:1 from the Red Light Rise Shopify theme. Every value in this file
 * was read out of the exported theme, not invented:
 *
 *   - snippets/css-variables.liquid  -> page width, page margin, input radius
 *   - assets/critical.css            -> the layout grid model
 *   - sections/*.liquid              -> every hex colour, font size, radius,
 *                                       shadow, spacing and z-index actually
 *                                       used in the live design
 *   - templates/index.json           -> the per-section colours the store owner
 *                                       has actually saved (accent #8b0000,
 *                                       title #111111, text #666666/#555555,
 *                                       background rhythm #fff/#f8f8f8/#fafafa)
 *
 * Naming: CSS custom properties use the --rlr- prefix (Red Light Rise).
 * PHP functions use the maaz_dev_ prefix (theme slug). That split is
 * intentional -- the CSS prefix is short because it is typed constantly.
 *
 * This file defines tokens ONLY. It must not contain a single selector other
 * than :root. Component styles belong in their own files.
 *
 * @package maaz-dev
 */

:root {

	/* ==========================================================================
	   1. BRAND
	   The signature dark red. #8B0000 appears 233 times in the Shopify theme --
	   it is the single most-used colour in the design after white.
	   ========================================================================== */

	--rlr-brand: #8b0000;
	--rlr-brand-hover: #6b0000;
	--rlr-brand-deep: #4a0000;
	--rlr-brand-black: #1a0000;

	/* Soft red tints -- used for highlight backgrounds and CTA banner text. */
	--rlr-red-50: #fff8f8;
	--rlr-red-100: #fff5f5;
	--rlr-red-200: #fbeaea;
	--rlr-red-300: #ffdddd;

	/* ==========================================================================
	   2. INK & TEXT
	   ========================================================================== */

	--rlr-ink: #111111;          /* headings, dark section backgrounds */
	--rlr-ink-soft: #1a1a1a;
	--rlr-ink-2: #222222;
	--rlr-ink-3: #2d2d2d;
	--rlr-white: #ffffff;

	--rlr-text: #555555;         /* body copy on light backgrounds */
	--rlr-text-muted: #666666;   /* secondary body copy */
	--rlr-text-soft: #888888;    /* meta, captions */
	--rlr-text-faint: #999999;
	--rlr-text-dim: #aaaaaa;     /* body copy on dark backgrounds */

	/* ==========================================================================
	   3. SURFACES
	   The homepage alternates #ffffff -> #f8f8f8 -> #fafafa section by section.
	   ========================================================================== */

	--rlr-surface: #ffffff;
	--rlr-surface-50: #fafafa;
	--rlr-surface-100: #f8f8f8;
	--rlr-surface-150: #f6f6f6;     /* table zebra stripe */
	--rlr-surface-200: #f5f5f5;
	--rlr-surface-300: #f0f0f0;
	--rlr-surface-compare: #f3f1f1; /* comparison table "our brand" column */

	/* Dark sections: footer, newsletter, announcement bar. */
	--rlr-dark-bg: #111111;
	--rlr-dark-title: #ffffff;
	--rlr-dark-text: #aaaaaa;
	--rlr-dark-border: #222222;

	/* ==========================================================================
	   4. BORDERS
	   ========================================================================== */

	--rlr-border: #e0e0e0;         /* default */
	--rlr-border-soft: #e8e8e8;    /* FAQ dividers */
	--rlr-border-light: #ebebeb;
	--rlr-border-lighter: #eeeeee;
	--rlr-border-mid: #dddddd;
	--rlr-border-table: #d9d9d9;   /* article/blog tables */
	--rlr-border-strong: #cccccc;

	/* ==========================================================================
	   5. STATUS COLOURS
	   ========================================================================== */

	--rlr-green: #0f7b3c;        /* "Free Shipping" badge background */
	--rlr-green-soft: #78ad84;   /* checkmarks in the comparison table */
	--rlr-green-bright: #4caf50;
	--rlr-green-pale: #a5e3b9;
	--rlr-green-deep: #1b5e20;
	--rlr-green-bg: #f0fff0;
	--rlr-error: #ff5252;
	--rlr-error-deep: #b71c1c;

	/* ==========================================================================
	   6. SEMANTIC ALIASES
	   Components should prefer these over the raw palette above, so a future
	   rebrand only has to touch this block.
	   ========================================================================== */

	--rlr-color-bg: var(--rlr-surface);
	--rlr-color-heading: var(--rlr-ink);
	--rlr-color-body: var(--rlr-text-muted);
	--rlr-color-accent: var(--rlr-brand);
	--rlr-color-accent-hover: var(--rlr-brand-hover);
	--rlr-color-link: var(--rlr-brand);
	--rlr-color-border: var(--rlr-border);
	--rlr-color-star: var(--rlr-brand);
	--rlr-color-star-empty: var(--rlr-border);

	/* ==========================================================================
	   7. TYPOGRAPHY
	   The Shopify theme sets font-family: "Inter", sans-serif 292 times in its
	   section stylesheets, overriding the theme font setting. Inter is the
	   real font of this design.
	   ========================================================================== */

	--rlr-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif;
	--rlr-font-heading: var(--rlr-font);

	/* Fixed sizes -- the design is built on a tight 11-16px body scale. */
	--rlr-fs-9: 9px;
	--rlr-fs-10: 10px;
	--rlr-fs-11: 11px;   /* eyebrow labels */
	--rlr-fs-12: 12px;
	--rlr-fs-13: 13px;   /* most used */
	--rlr-fs-14: 14px;
	--rlr-fs-15: 15px;
	--rlr-fs-16: 16px;
	--rlr-fs-17: 17px;
	--rlr-fs-18: 18px;
	--rlr-fs-20: 20px;
	--rlr-fs-22: 22px;
	--rlr-fs-28: 28px;
	--rlr-fs-48: 48px;

	/* Fluid heading scale -- copied verbatim from the section stylesheets. */
	--rlr-fs-hero: clamp(2rem, 5vw, 3.5rem);
	--rlr-fs-h1: clamp(2rem, 4.5vw, 3rem);
	--rlr-fs-h2: clamp(1.8rem, 3vw, 2.6rem);
	--rlr-fs-section: clamp(1.6rem, 3vw, 2.2rem);
	--rlr-fs-h3: clamp(1.4rem, 2.5vw, 2rem);
	--rlr-fs-h4: clamp(1.25rem, 2.5vw, 1.5rem);
	--rlr-fs-h5: clamp(1.15rem, 2.2vw, 1.375rem);
	--rlr-fs-404: clamp(80px, 15vw, 140px);

	--rlr-fw-regular: 400;
	--rlr-fw-medium: 500;
	--rlr-fw-semibold: 600;
	--rlr-fw-bold: 700;      /* dominant weight: 118 uses */
	--rlr-fw-extrabold: 800;

	--rlr-lh-none: 1;
	--rlr-lh-tight: 1.2;
	--rlr-lh-snug: 1.35;
	--rlr-lh-heading: 1.4;
	--rlr-lh-normal: 1.5;
	--rlr-lh-body: 1.6;      /* most used */
	--rlr-lh-relaxed: 1.7;
	--rlr-lh-loose: 1.8;

	--rlr-ls-tight: 0.02em;
	--rlr-ls-normal: 0.03em;
	--rlr-ls-wide: 0.05em;
	--rlr-ls-wider: 0.08em;
	--rlr-ls-eyebrow: 0.12em; /* uppercase section labels */

	/* ==========================================================================
	   8. LAYOUT
	   The Shopify theme setting says 90rem, but every section wrapper actually
	   uses max-width: 1400px. 1400px is the real container width.
	   ========================================================================== */

	--rlr-page-width: 1400px;
	--rlr-page-margin: 20px;   /* minimum viewport gutter */
	--rlr-gutter: 32px;        /* container inner padding on desktop */

	/* Narrow measures for prose and centred intros. */
	--rlr-width-xl: 1200px;
	--rlr-width-lg: 1100px;
	--rlr-width-md: 900px;
	--rlr-width-prose: 820px;
	--rlr-width-sm: 600px;
	--rlr-width-xs: 480px;

	/* ==========================================================================
	   9. RADIUS
	   ========================================================================== */

	--rlr-radius-xs: 2px;
	--rlr-radius-sm: 4px;      /* inputs -- matches the Shopify input setting */
	--rlr-radius-6: 6px;
	--rlr-radius: 8px;         /* default: cards, buttons (48 uses) */
	--rlr-radius-10: 10px;
	--rlr-radius-lg: 12px;
	--rlr-radius-xl: 16px;
	--rlr-radius-pill: 20px;   /* badges, chips */
	--rlr-radius-pill-lg: 40px;
	--rlr-radius-full: 50%;    /* avatars, icon buttons */

	/* ==========================================================================
	   10. SPACING
	   Named by pixel value so the token is self-documenting at the call site.
	   ========================================================================== */

	--rlr-space-2: 2px;
	--rlr-space-4: 4px;
	--rlr-space-6: 6px;
	--rlr-space-8: 8px;
	--rlr-space-10: 10px;
	--rlr-space-12: 12px;
	--rlr-space-14: 14px;
	--rlr-space-16: 16px;
	--rlr-space-20: 20px;
	--rlr-space-24: 24px;
	--rlr-space-28: 28px;
	--rlr-space-32: 32px;
	--rlr-space-40: 40px;
	--rlr-space-44: 44px;
	--rlr-space-48: 48px;
	--rlr-space-56: 56px;
	--rlr-space-60: 60px;
	--rlr-space-64: 64px;
	--rlr-space-80: 80px;
	--rlr-space-96: 96px;

	/* Vertical rhythm for full sections. */
	--rlr-section-py: 80px;      /* the homepage default */
	--rlr-section-py-lg: 96px;   /* rlt-explainer, rlt-benefits */
	--rlr-section-py-sm: 56px;   /* cta-banner */

	/* ==========================================================================
	   11. SHADOWS
	   ========================================================================== */

	--rlr-shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.1);
	--rlr-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.06);
	--rlr-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	--rlr-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.08);
	--rlr-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.14);
	--rlr-shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.16);
	--rlr-shadow-drawer: 4px 0 24px rgba(0, 0, 0, 0.12);
	--rlr-shadow-dark: 0 2px 8px rgba(0, 0, 0, 0.18);

	/* ==========================================================================
	   12. MOTION
	   ========================================================================== */

	--rlr-transition: 0.15s ease;
	--rlr-transition-slow: 0.18s ease;

	/* ==========================================================================
	   13. Z-INDEX
	   ========================================================================== */

	--rlr-z-base: 1;
	--rlr-z-raised: 2;
	--rlr-z-badge: 3;
	--rlr-z-overlay-local: 10;
	--rlr-z-dropdown: 199;
	--rlr-z-header: 200;
	--rlr-z-scrim: 300;
	--rlr-z-drawer: 400;
	--rlr-z-top: 9999;

	/* ==========================================================================
	   14. BREAKPOINTS (reference only)
	   Custom properties cannot be used inside @media, so these are documented
	   here and written literally in the component files:
	       @media screen and (max-width: 1024px)  -- tablet
	       @media screen and (max-width: 768px)   -- mobile
	       @media screen and (max-width: 480px)   -- small mobile
	   ========================================================================== */
}