/* Sofraty — design tokens
 * Drop this in once and style everything through the custom properties.
 * Never write a raw hex value into a component.
 *
 * Three theme states are handled:
 *   :root                                  → light (default, and the un-stamped state)
 *   @media (prefers-color-scheme: dark)     → dark, unless light is explicitly stamped
 *   :root[data-theme="dark"]                → dark, explicitly chosen
 */

/* ---------------------------------------------------------------- fonts
 * Self-hosted and same-origin, deliberately. Loading Cairo from Google cost
 * ~160ms of LCP: two extra DNS+TLS handshakes plus a render-blocking
 * third-party stylesheet, on a 150ms-RTT mobile profile. Everything we serve
 * ourselves had already finished at 68ms.
 *
 * One variable file covers 400-900, so body text and headings share a single
 * request - fewer than the two Google served. Subset to Arabic + Latin.
 */
@font-face {
  font-family: "Cairo";
  src: url("/assets/fonts/cairo-var.woff") format("woff");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* brand */
  --molokhia:      #0F5D3E;
  --molokhia-soft: #DDEDE4;
  --shatta:        #D4571F;
  --shatta-soft:   #FBE7DA;
  --brass:         #B0801F;
  --brass-soft:    #F7EDD6;
  --karkade:       #8E1F3C;
  --karkade-soft:  #F8E3E8;

  /* surfaces and text */
  --ground:    #FDFAF6;  /* semolina */
  --surface:   #FFFFFF;
  --surface-2: #F4EEE5;  /* dough */
  --ink:       #221A12;  /* coffee */
  --ink-2:     #5B4E42;
  --ink-3:     #8B7C6D;
  --rule:      #E4DACC;  /* sesame */

  /* semantic — separate from the accent, never reuse shatta for status */
  --ok:      #0F5D3E;
  --warn:    #B0801F;
  --danger:  #8E1F3C;

  --shadow: 0 1px 2px rgba(34, 26, 18, .05), 0 14px 34px -18px rgba(34, 26, 18, .28);

  /* type */
  --font-ar:      "Cairo", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --font-ui:      "Karla", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, Menlo, monospace;

  /* Arabic needs more leading than Latin */
  --leading-ar: 1.85;
  --leading-ui: 1.6;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --molokhia:      #4FBF8B;
    --molokhia-soft: #0E2A1F;
    --shatta:        #F0854A;
    --shatta-soft:   #33190D;
    --brass:         #DCAE5A;
    --brass-soft:    #2C2210;
    --karkade:       #E9718D;
    --karkade-soft:  #31151D;

    --ground:    #14100C;
    --surface:   #1D1811;
    --surface-2: #261F17;
    --ink:       #F3EBE1;
    --ink-2:     #B4A697;
    --ink-3:     #8B7D6E;
    --rule:      #332A20;

    --ok:     #4FBF8B;
    --warn:   #DCAE5A;
    --danger: #E9718D;

    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 34px -18px rgba(0, 0, 0, .8);
  }
}

:root[data-theme="dark"] {
  --molokhia:      #4FBF8B;
  --molokhia-soft: #0E2A1F;
  --shatta:        #F0854A;
  --shatta-soft:   #33190D;
  --brass:         #DCAE5A;
  --brass-soft:    #2C2210;
  --karkade:       #E9718D;
  --karkade-soft:  #31151D;

  --ground:    #14100C;
  --surface:   #1D1811;
  --surface-2: #261F17;
  --ink:       #F3EBE1;
  --ink-2:     #B4A697;
  --ink-3:     #8B7D6E;
  --rule:      #332A20;

  --ok:     #4FBF8B;
  --warn:   #DCAE5A;
  --danger: #E9718D;

  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 34px -18px rgba(0, 0, 0, .8);
}

/* ---------------------------------------------------------------- base */

html[dir="rtl"] { direction: rtl; }

body {
  background: var(--ground);   /* must be explicit — a transparent body borrows the host ground */
  color: var(--ink);
  font-family: var(--font-ar);
  line-height: var(--leading-ar);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* Latin interface surfaces (admin dashboard, English docs) */
.ui-latin {
  font-family: var(--font-ui);
  line-height: var(--leading-ui);
}

/* prices, weights, times — always aligned */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* action colour is reserved for things that do something */
.btn-primary {
  background: var(--shatta);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-family: var(--font-ar);
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:focus-visible { outline: 2px solid var(--molokhia); outline-offset: 3px; }

/* ad slots: fixed height reserved before load, two per page maximum */
.ad-slot {
  min-height: 280px;
  display: block;
  contain: layout size;
}
.ad-slot[data-size="inline"] { min-height: 100px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}