/* Shadman Mobiles: brand tokens (owned by BRAND; everyone uses these names).
   Colours are sampled from the owner's logo: the "Shadman" band runs sky -> electric -> royal,
   "MOBILES" is set in royal, the illustration's shadows reach deep navy.
   Contrast (WCAG 2.x) is noted next to every text token; all text pairs pass AA.
   Font URLs are relative to this file so the brand guide can load it from disk too. */

/* ---------- Fonts (self-hosted, latin subset, SIL OFL 1.1; licences in /assets/fonts/) ---------- */

/* Display: Russo One. Squarish, heavy, flat terminals: the closest Google Fonts match to the
   "Shadman" wordmark. It ships one (heavy) weight; the declared 400-900 range stops browsers
   from synthesising faux-bold when a heading asks for 700/800. */
@font-face {
  font-family: "Russo One";
  src: url("../fonts/russo-one-400-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Body: Atkinson Hyperlegible Next (variable 200-800). Built for low-vision legibility:
   I / l / 1 and O / 0 are distinct, which matters for model names like "A17", "S24 Ultra", "128 GB".
   Has tabular figures (font-variant-numeric: tabular-nums) for prices. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks (measured against Arial) so the swap does not reflow the page. */
@font-face {
  font-family: "Russo One Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 400 900;
  size-adjust: 103.9%;
  ascent-override: 89.1%;
  descent-override: 26.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Atkinson Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Roboto"), local("Roboto-Regular");
  font-weight: 200 599;
  size-adjust: 96.9%;
  ascent-override: 101.6%;
  descent-override: 32.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Atkinson Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 600 800;
  size-adjust: 98.2%;
  ascent-override: 100.2%;
  descent-override: 32.2%;
  line-gap-override: 0%;
}

:root {
  /* ---------- Brand blues (sampled from the logo) ---------- */
  --sm-blue-950: #01225f; /* deepest navy, illustration shadows.  white on it 15.05:1 */
  --sm-blue-900: #003a9e; /* deep royal, "MOBILES" lower edge.     white on it 10.01:1 */
  --sm-blue-700: #0152c6; /* royal, "MOBILES" letters.             white 6.95:1 · on surface 6.47:1 · on blue-100 5.68:1 */
  --sm-blue-500: #0268dc; /* electric, band centre. PRIMARY.       white 5.23:1 · on white 5.23:1 · on surface 4.87:1 */
  --sm-blue-300: #1aa0fc; /* sky, band highlight. Decorative / on navy only (on blue-950 5.36:1) */
  --sm-blue-100: #d9eaff; /* tint: selected states, chips */
  --sm-blue-50:  #eef5ff; /* faint tint: section washes, hover rows */

  /* ---------- Neutrals (navy-tinted, never grey) ---------- */
  --sm-ink:       #0b1b38; /* text.            17.10:1 on white · 15.92:1 on surface */
  --sm-ink-2:     #4a5a78; /* secondary text.   6.94:1 on white ·  6.47:1 on surface · 5.67:1 on blue-100 */
  --sm-line:      #dbe3ef; /* hairlines, card borders (decorative) */
  --sm-line-strong: #73839e; /* form-field borders: >= 3:1 against surface and white (1.4.11) */
  --sm-surface:   #f4f7fc; /* page background */
  --sm-surface-2: #ffffff; /* cards, raised sections, product image tiles */
  --sm-white:     #ffffff;
  --sm-on-brand:  #ffffff; /* text on any brand blue or --sm-gradient-brand */
  --sm-on-brand-2: #d9eaff; /* secondary text on blue-900/950 (8.18:1 on blue-900) */

  /* ---------- Status (text-safe on white and surface) ---------- */
  --sm-success: #0e7a45; /* 5.40:1 on white · in stock, battery health good */
  --sm-warning: #9a5800; /* 5.57:1 on white · low stock, grade B/C notes */
  --sm-danger:  #c4202f; /* 5.84:1 on white · errors, sale price */
  --sm-success-bg: #e3f5ea;
  --sm-warning-bg: #fdf0dc;
  --sm-danger-bg:  #fde7e9;

  /* ---------- WhatsApp brand green: the floating chat button only, behind the white glyph (a mark, never text).
     Text-bearing WhatsApp buttons keep the darker, text-safe #0f7b57 (.btn-whatsapp). ---------- */
  --sm-whatsapp: #25d366;
  --sm-whatsapp-hover: #1ebe5a;

  /* ---------- Gradients ---------- */
  /* Deep-to-electric: safe behind white text at every stop (worst stop 5.23:1). */
  --sm-gradient-brand: linear-gradient(135deg, #01225f 0%, #003a9e 38%, #0152c6 68%, #0268dc 100%);
  /* The literal logo band, sky -> electric -> royal. Decorative fills and art only:
     its sky end is 2.8:1 against white, so never set body text on it. */
  --sm-gradient-band: linear-gradient(160deg, #01a0fd 0%, #0a86f0 30%, #0569dc 62%, #0044ad 100%);
  /* Faint wash for hero/section backgrounds on light pages. */
  --sm-gradient-soft: linear-gradient(180deg, #eef5ff 0%, #f4f7fc 100%);

  /* ---------- Type ---------- */
  --sm-font-display: "Russo One", "Russo One Fallback", "Arial Black", system-ui, sans-serif;
  --sm-font-body: "Atkinson Hyperlegible Next", "Atkinson Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Prices use the display face: heavy like the wordmark, and its zero is unslashed
     (Atkinson's slashed 0 is right for SKUs and order numbers, wrong for "AED 1,000.00"). */
  --sm-font-price: var(--sm-font-display);

  /* Role scale, mobile first (360px) growing to desktop. Body never below 1rem. */
  --sm-text-xs:   0.8125rem;                                   /* 13px: legal, metadata only */
  --sm-text-sm:   0.875rem;                                    /* 14px: labels, badges */
  --sm-text-base: 1rem;                                        /* 16px: body */
  --sm-text-lg:   1.125rem;                                    /* 18px: lead, card price */
  --sm-text-xl:   clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);    /* 20-24: h4, product price */
  --sm-text-2xl:  clamp(1.5rem, 1.3rem + 0.9vw, 2rem);         /* 24-32: h3 / section titles */
  --sm-text-3xl:  clamp(1.875rem, 1.5rem + 1.7vw, 2.75rem);    /* 30-44: h2, product title */
  --sm-text-4xl:  clamp(2.25rem, 1.6rem + 3vw, 4rem);          /* 36-64: hero */
  --sm-leading-tight: 1.08;  /* display */
  --sm-leading-snug:  1.25;  /* card titles, UI */
  --sm-leading-body:  1.55;  /* paragraphs */
  --sm-tracking-display: -0.01em;
  --sm-tracking-caps: 0.08em; /* short uppercase badges ("PRE-OWNED") */

  /* ---------- Radius (the logo band's soft corners) ---------- */
  --sm-radius-sm: 6px;
  --sm-radius-md: 10px;
  --sm-radius-lg: 16px;
  --sm-radius-xl: 24px;
  --sm-radius-pill: 999px;

  /* ---------- Shadows (navy-tinted, offset + soft blur) ---------- */
  --sm-shadow-sm: 0 1px 2px rgb(1 34 95 / 0.08), 0 1px 1px rgb(1 34 95 / 0.04);
  --sm-shadow-md: 0 6px 16px -4px rgb(1 34 95 / 0.14), 0 2px 4px rgb(1 34 95 / 0.06);
  --sm-shadow-lg: 0 20px 44px -12px rgb(1 34 95 / 0.26), 0 6px 12px -4px rgb(1 34 95 / 0.10);
  --sm-focus-ring: 0 0 0 2px var(--sm-white), 0 0 0 4px var(--sm-blue-500);

  /* ---------- Spacing (4px base) ---------- */
  --sm-space-1: 0.25rem;  /*  4 */
  --sm-space-2: 0.5rem;   /*  8 */
  --sm-space-3: 0.75rem;  /* 12 */
  --sm-space-4: 1rem;     /* 16: mobile gutter */
  --sm-space-5: 1.5rem;   /* 24 */
  --sm-space-6: 2rem;     /* 32 */
  --sm-space-7: 2.5rem;   /* 40 */
  --sm-space-8: 3rem;     /* 48 */
  --sm-space-9: 4rem;     /* 64 */
  --sm-space-10: 5rem;    /* 80 */

  color-scheme: light;
}