/* ============================================================
   ABDULKARIM JEWELLERS — DESIGN TOKENS (LIGHT)
   Section 2 of the brief. Do not add dark surfaces here.
   ============================================================ */

:root{
  /* ── surfaces (white-led) ──
     The page reads WHITE. --sand and --linen are only faintly warm, so
     alternating bands still separate without the page looking cream. */
  --ivory:#FFFFFF;        /* PRIMARY page background — white */
  --paper:#FFFFFF;        /* cards, product tiles, packshot backgrounds */
  --sand:#F7F6F3;         /* secondary section background, alternating bands */
  --linen:#F1EFEA;        /* tertiary surface, hovers, filter panel */
  --rule:#E6E3DC;         /* ALL borders and dividers */

  /* ── ink ── */
  --onyx:#14161A;         /* primary text, headings, logo        16.9:1 */
  --slate:#4A4E55;        /* body copy                            7.8:1 */
  --mist:#64696F;         /* tertiary text, labels                5.2:1 */

  /* ── accents ── */
  --champagne:#B08D3E;    /* DECORATIVE ONLY — rules, icons, display type 24px+ */
  --gold-ink:#7A5F18;     /* champagne's readable pair — ALL small gold TEXT  5.6:1 */
  --platinum-grey:#A9AEB6;/* the platinum metal cue — decorative only */
  --emerald:#0F4D3A;      /* rare secondary accent, WhatsApp, success  9.2:1 */
  --error:#9B2C23;

  /* ── type ── */
  --f-display:'Cinzel',Georgia,serif;
  --f-head:'Cormorant Garamond',Georgia,serif;
  --f-body:'Jost',-apple-system,BlinkMacSystemFont,Helvetica,sans-serif;
  --f-ar:'Almarai','Noto Sans Arabic',Tahoma,sans-serif;

  /* ── type scale (px) ── */
  --t-10:10px; --t-11:11px; --t-12:12px; --t-14:14px; --t-15:15px;
  --t-16:16px; --t-18:18px; --t-22:22px; --t-28:28px; --t-36:36px;
  --t-48:48px; --t-64:64px; --t-88:88px;

  /* ── spacing scale (px) ── */
  --s-4:4px;  --s-8:8px;   --s-12:12px; --s-16:16px; --s-24:24px;
  --s-32:32px;--s-48:48px; --s-64:64px; --s-96:96px; --s-128:128px;

  /* ── grid ── */
  --maxw:1440px;
  --gutter:40px;

  /* ── motion ── */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur-fast:250ms; --dur:400ms; --dur-slow:600ms;

  /* ── radius — SHARP ── */
  --r-0:0px;  /* cards, panels, images, sections */
  --r-1:2px;  /* buttons and inputs — the maximum allowed anywhere */

  /* ── layer order ── */
  --z-mega:60; --z-header:70; --z-drawer:90; --z-modal:100; --z-wa:80;

  /* ── section vertical rhythm ── */
  --sec-y:96px;
}

@media (max-width:900px){
  :root{ --gutter:20px; --sec-y:64px; }
}

/* The Platinum tier runs at 1.25x the vertical rhythm (Section 7). */
.tier-platinum{ --sec-y:120px; }
@media (max-width:900px){ .tier-platinum{ --sec-y:80px; } }