/**
 * Sublime UI — design tokens.
 *
 * Every component reads from here and hard-codes nothing, so a palette or
 * type change is one file, not forty.
 *
 * The values below are the shipped defaults, tuned for a food brand. A site
 * overrides what it needs on :root and the whole set follows — no component
 * edits, no build step:
 *
 *   :root { --sui-olive: #1f3b2c; --sui-font-display: "Playfair Display", serif; }
 *
 * Put those overrides in the theme stylesheet or the customiser, never in
 * this file, so the plugin stays updatable.
 *
 * Everything is prefixed sui-. The site runs Elementor, WooCommerce and a
 * renamed theme on the same page, and an unprefixed class has already cost
 * us once — wp-admin's own .card capped every report card at 520px.
 */

:root {
  /* Ground. Ivory carries the shop, olive carries story and product detail.
     No two large neighbouring bands share a colour — a single beige running
     the length of the page is what made the old homepage read dusty. */
  --sui-ivory:      #f8f6ef;
  --sui-white:      #ffffff;
  --sui-neutral:    #d9d1be;
  --sui-neutral-2:  #efe9da;
  --sui-olive:      #25351f;
  --sui-olive-deep: #1c2917;
  --sui-green:      #4f7139;
  --sui-sage:       #a9bb8d;
  --sui-gold:       #d2a427;

  --sui-ink:        #1d211b;
  --sui-ink-60:     #5a6154;
  --sui-ink-40:     #8b9083;
  --sui-ink-25:     #b9b2a2;
  --sui-on-olive:   #eef0e6;
  --sui-on-olive-60:#c3cdb2;

  --sui-rule:       #e7e2d5;
  --sui-rule-olive: #3a4b31;

  /* Type. Fraunces for display — softened and given a little wonk so it
     reads as food rather than fashion. Manrope for anything read at length.
     Nastaliq is a second register, never matched to the Latin size: it needs
     far more leading, so it runs smaller and looser beneath. */
  --sui-font-display: Fraunces, Georgia, "Times New Roman", serif;
  --sui-font-body:    Manrope, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sui-font-urdu:    "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
  --sui-display-vf:   "SOFT" 40, "WONK" 1;

  /* One ramp, four steps, and it holds at every width. Fixed artboard sizes
     do not survive contact with a real browser. */
  --sui-t-display: clamp(2.5rem, 1.5rem + 3.1vw, 4.5rem);
  --sui-t-story:   clamp(2rem,   1.2rem + 2.6vw, 3.375rem);
  --sui-t-section: clamp(1.75rem, 1.2rem + 1.8vw, 2.625rem);
  --sui-t-item:    clamp(1.125rem, 1rem + 0.4vw, 1.4375rem);
  --sui-t-body:    0.9375rem;
  --sui-t-label:   0.65625rem;

  --sui-lh-display: 0.98;
  --sui-lh-section: 1.08;
  --sui-lh-body:    1.72;
  --sui-lh-urdu:    2.15;

  --sui-track-label: 0.16em;
  --sui-track-display: -0.015em;

  /* Space. A 4px base, but only the steps actually used. */
  --sui-s-1: 0.25rem;  --sui-s-2: 0.5rem;   --sui-s-3: 0.75rem;
  --sui-s-4: 1rem;     --sui-s-5: 1.375rem; --sui-s-6: 1.75rem;
  --sui-s-7: 2.375rem; --sui-s-8: 3rem;     --sui-s-9: 4rem;
  --sui-s-10: 5.75rem;

  --sui-gutter: clamp(1.25rem, 0.4rem + 3vw, 4rem);
  --sui-max:    1320px;

  --sui-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* Primitives every component composes from. */
.sui { font-family: var(--sui-font-body); color: var(--sui-ink); }
.sui *, .sui *::before, .sui *::after { box-sizing: border-box; }

.sui-shell { max-width: var(--sui-max); margin-inline: auto; padding-inline: var(--sui-gutter); }

.sui-d {
  font-family: var(--sui-font-display);
  font-weight: 400;
  letter-spacing: var(--sui-track-display);
  font-variation-settings: var(--sui-display-vf);
  margin: 0;
}
.sui-display { font-size: var(--sui-t-display); line-height: var(--sui-lh-display); }
.sui-story   { font-size: var(--sui-t-story);   line-height: 1.04; }
.sui-section { font-size: var(--sui-t-section); line-height: var(--sui-lh-section); }
.sui-item    { font-size: var(--sui-t-item);    line-height: 1.25; }

.sui-label {
  font-size: var(--sui-t-label); font-weight: 600;
  letter-spacing: var(--sui-track-label); text-transform: uppercase;
  margin: 0;
}
.sui-body { font-size: var(--sui-t-body); line-height: var(--sui-lh-body); color: var(--sui-ink-60); margin: 0; }

.sui-urdu {
  font-family: var(--sui-font-urdu);
  direction: rtl; unicode-bidi: isolate;
  line-height: var(--sui-lh-urdu);
  margin: 0;
}

/* Buttons carry no radius and no gradient: the brand's whole argument is
   that nothing unnecessary has been added. */
.sui-btn {
  display: inline-flex; align-items: center; gap: var(--sui-s-3);
  font-size: var(--sui-t-label); font-weight: 600;
  letter-spacing: var(--sui-track-label); text-transform: uppercase;
  padding: 1.0625rem 2.125rem; text-decoration: none; border: 0; cursor: pointer;
  transition: background-color .25s var(--sui-ease), color .25s var(--sui-ease), border-color .25s var(--sui-ease);
}
.sui-btn--fill { background: var(--sui-olive); color: var(--sui-ivory); }
.sui-btn--fill:hover { background: var(--sui-olive-deep); color: var(--sui-ivory); }
.sui-btn--line { border: 1px solid #bfb7a3; color: var(--sui-ink-60); background: transparent; }
.sui-btn--line:hover { border-color: var(--sui-olive); color: var(--sui-olive); }
.sui-btn--light { background: var(--sui-ivory); color: var(--sui-olive); }

.sui-link {
  font-size: var(--sui-t-label); font-weight: 600;
  letter-spacing: var(--sui-track-label); text-transform: uppercase;
  color: var(--sui-olive); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: var(--sui-s-2);
}

/* Dark bands invert the ink tokens rather than restating colours. */
.sui-on-dark { background: var(--sui-olive); color: var(--sui-on-olive); }
.sui-on-dark .sui-body { color: var(--sui-on-olive-60); }
.sui-on-dark .sui-label { color: var(--sui-sage); }
.sui-on-dark .sui-link { color: var(--sui-on-olive); border-bottom-color: #55663f; }

@media (prefers-reduced-motion: reduce) {
  .sui *, .sui *::before, .sui *::after { transition: none !important; animation: none !important; }
}