/*
 * tokens.css — the EBAN design system, transcribed 1:1 from the iOS app.
 *
 * Source of truth: ~/eban-backups/IOS-UI-SPEC-for-Android-parity.md, itself
 * audited from EBAN/Theme/Theme.swift. Every value below is the iOS value.
 * iOS points map 1:1 to CSS pixels, so the numbers carry over unchanged — do
 * not "round to a nicer number", that is exactly how the Android port drifted.
 *
 * Dark mode is REMOVED from the apps (light values only), so the site is
 * light-only too. That is deliberate, not an omission.
 */

:root {
  /* ---- Brand ---- */
  --brand: #ff6400;
  --brand-bright: #ff8533;
  --brand-deep: #cc5000;
  --brand-glow: rgba(255, 100, 0, 0.32);

  /* ---- Surfaces ---- */
  --page-bg: #f2f3f5;
  --surface-card: #ffffff;
  --surface-soft: #fff8ee;
  --surface-chip: #fff1dc;
  --bar-frost: #ffffff;

  /* ---- Text ---- */
  --text-primary: #0d1b3e;
  --text-secondary: #1a2240;
  --text-tertiary: #5a6480;

  /* ---- Borders ---- */
  --border-soft: #ffd9b8;
  --border-hair: #eeeef2;

  /* ---- Washes ---- */
  --header-wash-top: #fbe0d5;
  --header-wash-bottom: #fdefe9;
  --card-wash-top: #ffecec;
  --card-wash-bottom: #ffffff;

  /* ---- The two literal reds. They are NOT the same and never interchange:
         live-badge box + offers bar use one, the trending flame the other. ---- */
  --red-live: #f23c32;
  --red-trending: #e0342c;

  /* ---- Accents used by specific rows ---- */
  --accent-gold: #f59e0b; /* admin crown */
  --accent-star: #ffcc00; /* wishlist star (iOS .yellow) */
  --accent-blue: #007aff; /* addresses pin (iOS .blue) */
  --accent-whatsapp: #25d366;

  /* ---- Radii (iOS: chip is a pill, everything else is squareish) ---- */
  --r-chip: 999px;
  --r-card: 18px;
  --r-hero: 24px;
  /* Product tiles/cards. SHEIN-square, matching iOS EBANRadius.tile.
     iOS moved this from 14 to 4 because 14 "read as a bubble"; the site kept
     the old value, which is why the listings did not look like the apps
     (Adam, 2026-08-20). Used by the feed card, rails, cart rows and wishlist,
     so every product surface stays consistent. */
  --r-tile: 4px;
  /* The photo block inside a tile. Deliberately near-square for the same
     reason — anything rounder reads as a bubble (iOS EBANRadius.photo). */
  --r-photo: 4px;
  --r-search: 10px; /* search bar — squarish, NOT a pill */
  --r-btn: 12px;
  --r-sm: 8px;

  /* ---- Spacing ---- */
  --gutter: 16px;
  --rail-gap: 12px;

  /* ---- Elevation: iOS card shadow is black 8%, radius 14, y+6 ---- */
  --shadow-card: 0 6px 14px rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.14);

  /* ---- Motion. iOS press is spring(response .28, damping .68) → this cubic
         is the closest CSS approximation; scale 0.97 is the iOS default. ---- */
  --press-scale: 0.97;
  --ease-press: cubic-bezier(0.22, 0.9, 0.32, 1);
  --dur-press: 0.28s;

  /* ---- Type. iOS uses the system face; the web build pairs Inter (Latin)
         with Cairo (Arabic) — the same pairing the old site used, so Arabic
         copy keeps its proper shaping. ---- */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-ar: 'Cairo', 'Inter', system-ui, 'Segoe UI', Tahoma, Arial, sans-serif;

  /* ---- Layout rails. Phone mirrors the app; desktop opens up but never
         goes edge-to-edge on a 27" display. ---- */
  --max-w: 1360px;
  --tabbar-h: 58px;
  --topnav-h: 68px;
}

/*
 * Arabic is TRANSLATE-ONLY: the copy changes, the layout does NOT mirror.
 * Standing rule from Adam — the apps stay LTR in Arabic and so does the site.
 * So we swap the font stack and nothing else; no `direction: rtl` anywhere.
 */
:root[lang='ar'] {
  --font: var(--font-ar);
}