/* V3 "Warm Editorial" design tokens - the single source of truth.

Values come from store-v3-mockup.html, the direction the client approved, not
from the UI/UX specification PDF or its amendments. Where the mockup and the
PDFs disagree (page ground, ink, radii, shadow), the mockup wins: the client
chose V3 after seeing all three directions.

Two rules from the mockup are load-bearing and must not be simplified:
  1. The page ground is warm off-white, NOT white. Cards and the header sit
     ON it in white, which is what gives the feed its editorial lift.
  2. Pink is a fill and an accent, never body text. Every instance of pink
     text uses --pink-ink.

No colour literal belongs anywhere else. main.css references these names.
*/

/* Self-hosted faces. The mockup sets the whole interface in Nunito with an
   Arial fallback; Inter is kept for long descriptive body copy, where a
   rounded face at paragraph length reads as decoration rather than text.
   Neither carries Arabic glyphs, so Noto Sans Arabic leads for lang="ar". */
@font-face {
  font-family: "Inter variable";
  src: url("/static/fonts/inter-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito variable";
  src: url("/static/fonts/nunito-variable.ttf") format("truetype-variations");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Arabic";
  src: url("/static/fonts/noto-sans-arabic.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Grounds. --paper is warm; --surface is the white that sits on it. */
  --paper: #fffcfd;
  --paper-2: #fbf1f4;
  --surface: #ffffff;

  /* Accent grounds and outlines, matching logo (#fed0d2) and Rose Pink palette */
  --pink-tint: #fef5f7;
  --pink-soft: #fedfe3;
  --pink-line: #fed0d2;

  /* Ink */
  --ink: #23201f;
  --ink-muted: #66666e;
  --line: #f5e4e8;

  /* Accent. Lighter rose pink matching the logo */
  --pink: #f79cb0;
  --pink-ink: #8a3c4f;
  --on-accent: #23201f;

  /* Status. Present in the mockup and the specification; no threshold is
     invented here, so nothing sets the number that triggers --warn. */
  --success: #2e7d5b;
  --warn: #9c6412;
  --danger: #b23422;

  /* Radii and shape */
  --radius-card: 18px;
  --radius-ctrl: 14px;
  --radius-img: 14px;
  --radius-chip: 999px;
  --radius-pill: 999px;

  /* Metric */
  --gap-grid: 10px;
  --gutter: 16px;
  --tap: 44px;
  --header-h: 56px;
  --bottom-nav-h: 56px;
  --cap: 1280px;
  --logo: 40px;

  /* Elevation. The mockup lifts the card off the warm ground rather than
     outlining it; a feed of forty cards with hard borders reads as a grid of
     boxes, which is what the client rejected in V1. */
  --shadow-card: 0 2px 10px rgba(138, 74, 88, 0.07);
  --shadow-card-hover: 0 4px 16px rgba(138, 74, 88, 0.11);
  --shadow-header: 0 1px 0 var(--line);

  /* Type. Nunito leads; Inter carries descriptive body copy. */
  --font-ui: "Nunito variable", "Poppins", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif;
  --font-body: "Inter variable", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Noto Sans Arabic", Arial, sans-serif;
  --font-price: var(--font-ui);

  --text-name: 15.5px;
  --text-price: 17.5px;
  --text-body: 15px;
  --text-meta: 13px;
  --text-badge: 11px;

  /* Motion. Short by convention in a dense feed: a transition repeated forty
     times per session reads as a sluggish product. */
  --transition-quick: 120ms ease;
  --transition-std: 200ms ease;
}

/* Arabic leads rather than falls back. Set by html[lang], which the shell
   renders server-side, so this applies on first paint with no flash. */
html[lang="ar"] {
  --font-ui: "Noto Sans Arabic", "Nunito variable", -apple-system, "Segoe UI",
    Tahoma, sans-serif;
  --font-body: "Noto Sans Arabic", "Inter variable", -apple-system, Tahoma,
    sans-serif;
  --font-price: var(--font-ui);
}

/* Motion is optional. Everything below still reads correctly at rest. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-quick: 80ms opacity ease;
    --transition-std: 80ms opacity ease;
  }
}