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

   Brand colors (--jr-primary / --jr-secondary / --jr-accent) are overridden
   per request by the inline <style> block in views/layouts/main.ejs. Every
   derived value below resolves lazily, so the whole palette follows the
   merchant's brand without any server-side color math. */

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

  /* ---------- 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-on-primary: #fff;

  /* ---------- Semantic (fixed, never merchant-controlled) ---------- */
  --jr-error: #cb0233;
  --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-info: #1890ff;
  --jr-danger: #cb0233; /* alias — kept for existing selectors */

  /* ---------- Neutrals ---------- */
  --jr-gray-100: #f9fafb;
  --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: #212529;
  --jr-ink-2: #495057;
  --jr-muted: #495057;
  --jr-disabled: #919eab;
  --jr-line: #dfe3e8;
  --jr-surface: #fff;
  --jr-surface-2: #f9fafb;
  --jr-white: #fff;
  --jr-plate: #f4f3f5; /* product image plate */

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

  /* ---------- 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;
  }
}