/* =========================================================
   SAJIRIA — GARDENIA THEME OVERRIDE
   Clean bakery: fresh white, Gardenia blue, red accent.
   Loaded AFTER sajiria-tanah-roti.css so these win by cascade.
   ========================================================= */
:root {
  /* Gardenia palette (light) */
  --tr-bg: #FFFFFF;           /* Fresh white */
  --tr-surface: #F7F9FC;      /* Soft blue-white */
  --tr-surface-2: #EEF3FB;    /* Light ice */
  --tr-text: #14213D;         /* Deep navy */
  --tr-muted: #5A6B8C;        /* Muted blue-grey */
  --tr-primary: #0A5BC4;      /* Gardenia blue */
  --tr-primary-dark: #08459E; /* Deep blue */
  --tr-accent: #E6342A;       /* Gardenia red */
  --tr-accent-2: #F5A623;     /* Warm gold */
  --tr-line: #D9E2F0;         /* Light blue line */
  --tr-green: #2E8B57;        /* Fresh green */

  /* Legacy aliases (keep j- classes working) */
  --j-primary: #0A5BC4;
  --j-accent: #E6342A;
  --j-bg: #FFFFFF;
  --j-surface: #F7F9FC;
  --j-text: #14213D;
}

html[data-theme="dark"] {
  --tr-bg: #0F1626;
  --tr-surface: #16203A;
  --tr-surface-2: #1C2A4C;
  --tr-text: #EEF3FB;
  --tr-muted: #8FA3C8;
  --tr-primary: #3B82F6;
  --tr-primary-dark: #2563EB;
  --tr-accent: #EF4444;
  --tr-accent-2: #F5A623;
  --tr-line: #2A3A61;
  --tr-green: #4ADE80;

  --j-primary: #3B82F6;
  --j-accent: #EF4444;
  --j-bg: #0F1626;
  --j-surface: #16203A;
  --j-text: #EEF3FB;
}

/* Brand mark — swap to Gardenia-style "SAJIRIA" wordmark treatment */
.j-brand-text {
  color: var(--tr-primary);
  letter-spacing: .04em;
}
.j-brand-mark {
  background: var(--tr-primary);
  color: #fff;
}

/* Buttons / CTAs — blue primary, red accent */
.j-btn, .j-btn-primary, .btn-primary {
  background: var(--tr-primary);
  border-color: var(--tr-primary);
  color: #fff;
}
.j-btn:hover, .j-btn-primary:hover {
  background: var(--tr-primary-dark);
  border-color: var(--tr-primary-dark);
}
.j-badge-featured {
  background: var(--tr-accent);
  color: #fff;
}

/* Product cards — clean white with blue border radius */
.j-product-card {
  background: #fff;
  border: 1px solid var(--tr-line);
  border-radius: var(--tr-radius-lg);
}
html[data-theme="dark"] .j-product-card {
  background: var(--tr-surface);
}