/* JIARON default theme — design tokens.
   The only file that holds raw values. Everything else references these.

   Merchant palette (--jr-primary / secondary / accent + Phase A surfaces /
   text / sale) is overridden per request by the inline <style> block in
   views/layouts/main.ejs. Derived ramps resolve lazily via color-mix(). */

:root {
  /* ---------- Brand (merchant-controlled) ---------- */
  --jr-primary: #0f766e;
  --jr-secondary: #0f3d3e;
  --jr-accent: #f7faf9;

  /* ---------- Semantic palette (merchant-controlled, Phase A) ---------- */
  --jr-page-bg: #ffffff;
  --jr-card: #ffffff;
  --jr-surface-muted: #f9fafb;
  --jr-border: #dfe3e8;
  --jr-text: #212529;
  --jr-text-muted: #495057;
  --jr-sale: #cb0233;

  /* ---------- Derived brand ramp ---------- */
  --jr-primary-lighter: color-mix(in srgb, var(--jr-primary) 16%, #fff);
  --jr-primary-light: color-mix(in srgb, var(--jr-primary) 55%, #fff);
  --jr-primary-dark: color-mix(in srgb, var(--jr-primary) 88%, #000);
  --jr-primary-darker: color-mix(in srgb, var(--jr-primary) 72%, #000);
  --jr-primary-tint: color-mix(in srgb, var(--jr-primary) 8%, transparent);
  --jr-primary-veil: color-mix(in srgb, var(--jr-primary) 6%, #fff);
  --jr-primary-line: color-mix(in srgb, var(--jr-primary) 24%, var(--jr-line));
  --jr-accent-dark: color-mix(in srgb, var(--jr-accent) 88%, #000);
  --jr-accent-veil: color-mix(in srgb, var(--jr-accent) 45%, #fff);
  --jr-secondary-dark: color-mix(in srgb, var(--jr-secondary) 88%, #000);

  /* Readable foregrounds. main.ejs overrides these per store with a
     luminance-matched value; the defaults suit the fallback brand above and
     keep standalone pages (e.g. views/pages/gate.ejs) valid. */
  --jr-on-primary: #fff;
  --jr-on-secondary: #fff;
  --jr-on-accent: #161c24;

  /* ---------- Semantic feedback (sale is merchant; rest platform-fixed) ---------- */
  --jr-error: var(--jr-sale);
  --jr-error-light: #ef6168;
  --jr-error-lighter: #fcd1ca;
  --jr-warning: #ffc107;
  --jr-warning-light: #ffe16a;
  --jr-warning-lighter: #fff7cd;
  --jr-success: #54d62c;
  --jr-success-light: #aaf27f;
  --jr-success-lighter: #e9fcd4;
  --jr-success-dark: color-mix(in srgb, var(--jr-success) 55%, #000);
  --jr-info: #1890ff;
  --jr-danger: var(--jr-sale);

  /* ---------- Neutrals (aliases of semantic palette where merchant-owned) ---------- */
  --jr-gray-100: var(--jr-surface-muted);
  --jr-gray-200: #f4f6f8;
  --jr-gray-300: #dfe3e8;
  --jr-gray-400: #c4cdd5;
  --jr-gray-500: #919eab;
  --jr-gray-800: #212b36;
  --jr-gray-900: #161c24;

  --jr-ink: var(--jr-text);
  --jr-ink-2: var(--jr-text-muted);
  --jr-ink-muted: var(--jr-text-muted);
  --jr-muted: var(--jr-text-muted);
  --jr-disabled: #919eab;
  --jr-line: var(--jr-border);
  --jr-surface: var(--jr-page-bg);
  --jr-surface-2: var(--jr-surface-muted);
  --jr-white: var(--jr-card);
  --jr-plate: var(--jr-surface-muted);

  /* ---------- Countdown accents (fixed, brand-independent) ---------- */
  --jr-pop-1: #9ee872;
  --jr-pop-2: #ffeb69;
  --jr-pop-3: #ffd6ef;
  --jr-pop-4: #a0e2e0;
  --jr-pop-5: #84a9ff;
  --jr-pop-6: #ffab5a;

  /* ---------- Typography ---------- */
  --jr-font-display: "Urbanist", system-ui, -apple-system, sans-serif;
  --jr-font-body: "DM Sans", system-ui, -apple-system, sans-serif;

  --jr-h1-size: 40px;
  --jr-h1-lh: 50px;
  --jr-h2-size: 32px;
  --jr-h2-lh: 42px;
  --jr-h3-size: 24px;
  --jr-h3-lh: 36px;
  --jr-h4-size: 20px;
  --jr-h4-lh: 30px;
  --jr-h5-size: 18px;
  --jr-h5-lh: 28px;
  --jr-h6-size: 17px;
  --jr-h6-lh: 26px;

  --jr-text-xs: 12px;
  --jr-text-xs-lh: 18px;
  --jr-text-sm: 14px;
  --jr-text-sm-lh: 22px;
  --jr-text-base: 16px;
  --jr-text-base-lh: 24px;
  --jr-text-lg: 18px;
  --jr-text-lg-lh: 28px;

  --jr-tracking-tight: -0.02em;

  /* ---------- Shape ---------- */
  --jr-r-xs: 0.25rem;
  --jr-r-sm: 0.375rem;
  --jr-r-md: 0.5rem;
  --jr-r-media: 0.75rem;
  --jr-r-card: 1rem;
  --jr-r-hero: 1.5rem;
  --jr-r-panel: 3rem;
  --jr-r-pill: 62.5rem;
  --jr-radius: 0.5rem; /* alias — kept for existing selectors */

  /* ---------- Elevation ---------- */
  --jr-z8: 0 8px 16px 0 rgba(145, 158, 171, 0.12);
  --jr-z12: 0 12px 24px -4px rgba(145, 158, 171, 0.12);
  --jr-z24: 0 24px 48px 0 rgba(145, 158, 171, 0.12);
  --jr-z-dark: 0 24px 48px 0 rgba(0, 0, 0, 0.12);
  --jr-shadow-primary: 0 6px 15px 0 color-mix(in srgb, var(--jr-primary) 16%, transparent);
  --jr-shadow-error: 0 6px 15px 0 color-mix(in srgb, var(--jr-error) 20%, transparent);

  /* ---------- Rhythm ---------- */
  --jr-section-y: 70px;
  --jr-max: 102rem; /* 1632px — Sellzy container */
  --jr-max-text: 72rem;
  --jr-space: clamp(1rem, 3vw, 1.5rem);

  /* ---------- Motion ---------- */
  --jr-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --jr-dur: 300ms;
  --jr-ease-drawer: cubic-bezier(0.645, 0.045, 0.355, 1);
  --jr-dur-drawer: 250ms;
  --jr-dur-fast: 150ms;

  /* ---------- Layering ---------- */
  --jr-z-header: 40;
  --jr-z-suggest: 60;
  --jr-z-mega: 70;
  --jr-z-overlay: 90;
  --jr-z-drawer: 100;
  --jr-z-toast: 120;
}

@media (min-width: 1024px) {
  :root {
    --jr-h1-size: 64px;
    --jr-h1-lh: 80px;
    --jr-h2-size: 48px;
    --jr-h2-lh: 64px;
    --jr-h3-size: 32px;
    --jr-h3-lh: 48px;
    --jr-h4-size: 24px;
    --jr-h4-lh: 36px;
    --jr-h5-size: 20px;
    --jr-h5-lh: 30px;
    --jr-h6-size: 18px;
    --jr-h6-lh: 28px;
  }
}

@media (max-width: 640px) {
  :root {
    --jr-section-y: 44px;
  }
}