/* ============================================================
   OmniCart Design System — Colors & Type
   "One platform. The whole shop."
   ------------------------------------------------------------
   Fonts: Plus Jakarta Sans (Latin) + Cairo (Arabic) — both
   loaded from Google Fonts CDN. See README "Font substitution".
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Cairo:wght@300;400;500;600;700;900&display=swap');

:root {
  /* ---------- BRAND PALETTE ---------- */
  /* Usage ratio 60 / 25 / 12 / 3 — Indigo / Mist / Teal / Saffron */
  --indigo:        #0B1B3B;  /* Midnight Indigo — PRIMARY: authority, trust */
  --teal:          #00D4B4;  /* Signal Teal     — ACCENT: growth, live signal */
  --saffron:       #FFB547;  /* Saffron         — WARM accent: hospitality, success */
  --mist:          #F4F6FB;  /* Mist            — NEUTRAL: surfaces, cards */
  --ink:           #0E1320;  /* Ink             — TEXT: max contrast body copy */

  /* ---------- INDIGO RAMP ---------- */
  /* derived from Midnight Indigo for surfaces, borders, hovers */
  --indigo-900:    #060F23;
  --indigo-800:    #0B1B3B;  /* = brand indigo */
  --indigo-700:    #12264F;
  --indigo-600:    #1C3568;
  --indigo-500:    #2C4A86;
  --indigo-400:    #4F6BA6;
  --indigo-300:    #8295C0;
  --indigo-200:    #B9C4DC;
  --indigo-100:    #DDE3F0;

  /* ---------- TEAL RAMP ---------- */
  --teal-700:      #008C76;
  --teal-600:      #00AE93;
  --teal-500:      #00D4B4;  /* = brand teal */
  --teal-400:      #3FE2C9;
  --teal-300:      #7FEDDB;
  --teal-100:      #D6F8F1;

  /* ---------- SAFFRON RAMP ---------- */
  --saffron-700:   #D9871A;
  --saffron-600:   #F0A02E;
  --saffron-500:   #FFB547;
  --saffron-300:   #FFD089;
  --saffron-100:   #FFEFCF;

  /* ---------- NEUTRALS (cool, indigo-tinted) ---------- */
  --white:         #FFFFFF;
  --mist-50:       #FAFBFE;
  --mist-100:      #F4F6FB;  /* = Mist */
  --mist-200:      #E9EDF6;
  --mist-300:      #DCE2EF;
  --slate-400:     #AEB7CC;
  --slate-500:     #7C879F;
  --slate-600:     #56607A;
  --slate-700:     #353E54;
  --ink-900:       #0E1320;  /* = Ink */

  /* ---------- SEMANTIC TOKENS ---------- */
  --bg-base:       var(--mist-100);   /* app canvas */
  --bg-surface:    var(--white);      /* cards, panels */
  --bg-raised:     var(--white);
  --bg-inverse:    var(--indigo);     /* dark surfaces, nav */

  --fg-primary:    var(--ink);        /* headings, body */
  --fg-secondary:  var(--slate-600);  /* supporting copy */
  --fg-muted:      var(--slate-500);  /* labels, captions */
  --fg-onDark:     #EAEEF7;           /* text on indigo */
  --fg-onDark-dim: #94A0BC;

  --accent:        var(--teal);
  --accent-strong: var(--teal-600);
  --warm:          var(--saffron);

  --border:        var(--mist-300);
  --border-strong: var(--slate-400);
  --divider:       var(--mist-200);

  --success:       #16A37B;
  --success-bg:    #E2F7F0;
  --warning:       var(--saffron-700);
  --warning-bg:    var(--saffron-100);
  --danger:        #E5484D;
  --danger-bg:     #FCEBEC;
  --info:          var(--indigo-500);

  /* focus ring */
  --ring:          0 0 0 3px rgba(0, 212, 180, 0.35);

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans:     'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ar:       'Cairo', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  /* Plus Jakarta Sans, tight tracking on display */
  --fs-display:    56px;  --lh-display: 1.02; --tr-display: -0.02em;
  --fs-h1:         40px;  --lh-h1: 1.08;      --tr-h1: -0.018em;
  --fs-h2:         30px;  --lh-h2: 1.14;      --tr-h2: -0.014em;
  --fs-h3:         22px;  --lh-h3: 1.22;      --tr-h3: -0.01em;
  --fs-h4:         18px;  --lh-h4: 1.3;       --tr-h4: -0.006em;
  --fs-body-lg:    17px;  --lh-body-lg: 1.55;
  --fs-body:       15px;  --lh-body: 1.55;
  --fs-sm:         13px;  --lh-sm: 1.5;
  --fs-xs:         12px;  --lh-xs: 1.45;
  --fs-eyebrow:    12px;  --tr-eyebrow: 0.16em;  /* ALL-CAPS labels */

  /* ---------- WEIGHTS ---------- */
  --w-light: 300; --w-regular: 400; --w-medium: 500;
  --w-semibold: 600; --w-bold: 700; --w-extrabold: 800;

  /* ---------- RADII ---------- */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---------- SPACING (4pt base) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* ---------- ELEVATION ---------- */
  /* Soft, cool, indigo-tinted shadows — never neutral gray */
  --shadow-xs:  0 1px 2px rgba(11, 27, 59, 0.06);
  --shadow-sm:  0 1px 3px rgba(11, 27, 59, 0.08), 0 1px 2px rgba(11, 27, 59, 0.04);
  --shadow-md:  0 4px 12px rgba(11, 27, 59, 0.08), 0 2px 4px rgba(11, 27, 59, 0.05);
  --shadow-lg:  0 12px 28px rgba(11, 27, 59, 0.12), 0 4px 8px rgba(11, 27, 59, 0.06);
  --shadow-xl:  0 24px 56px rgba(11, 27, 59, 0.18);
  --shadow-teal: 0 8px 24px rgba(0, 212, 180, 0.28);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.oc-display {
  font-family: var(--font-sans);
  font-weight: var(--w-extrabold);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--fg-primary);
}
.oc-h1 { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); color: var(--fg-primary); }
.oc-h2 { font-family: var(--font-sans); font-weight: var(--w-bold); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); color: var(--fg-primary); }
.oc-h3 { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); color: var(--fg-primary); }
.oc-h4 { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); color: var(--fg-primary); }

.oc-body-lg { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--fg-secondary); }
.oc-body    { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-secondary); }
.oc-sm      { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--fg-muted); }
.oc-xs      { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--fg-muted); }

.oc-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.oc-mono { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: -0.01em; }

/* Arabic — set dir="rtl" on the element/container */
.oc-ar { font-family: var(--font-ar); }

/* Numeric / currency — tabular figures for tables, totals */
.oc-tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }