@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Noto+Sans+Arabic:wght@400;500;600;700;800&display=swap');
/*
  DaveJo brand tokens: direction A "Afternoon" (chosen 2026-09-24, source brand/a-afternoon/tokens.css).
  Every colour, font, radius and spacing value used by the site lives here.
  style.css references only these variables.

  Logo: the header shows the text wordmark by default. To switch to the logo
  file, drop the real artwork at /assets/logo.svg and flip the two
  --logo-* display tokens below.
*/
:root {
  /* Colour: aubergine primary, saffron accent, sand background, green buy */
  --color-bg: #F8F5EF;
  --color-surface: #ffffff;
  --color-surface-alt: #F1ECE3;
  --color-text: #1F1B22;
  --color-text-muted: #655D6B;
  --color-line: #E7E0D5;
  --color-accent: #4A2B57;
  --color-accent-hover: #3A2045;
  --color-on-accent: #F8F5EF;
  --color-accent-soft: #F3E6CF;
  --color-focus: #4A2B57;
  --color-sun: #E9A23B;
  --color-buy: #15803D;
  --color-buy-hover: #166534;
  --color-on-buy: #ffffff;
  --color-note-bg: #FBF1DF;
  --color-note-line: #E9A23B;
  --color-note-text: #3D2A08;

  /* Typography */
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: var(--font-body);
  --font-arabic: "Noto Sans Arabic", "Figtree", "Segoe UI", Tahoma, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --font-size-base: 1.0625rem;
  --font-size-base-ar: 1.125rem;
  --font-size-sm: 0.9rem;
  --font-size-xs: 0.8rem;
  --font-size-h1: clamp(1.9rem, 5vw + 0.5rem, 3rem);
  --font-size-h2: clamp(1.4rem, 2vw + 0.8rem, 1.85rem);
  --font-size-h3: 1.15rem;
  --font-size-price: 1.75rem;
  --font-weight-normal: 400;
  --font-weight-bold: 650;
  --line-height-body: 1.65;
  --line-height-body-ar: 1.85;
  --line-height-heading: 1.2;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-caps: 0.06em;
  --underline-offset: 0.15em;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --gutter: 1rem;

  /* Layout */
  --width-content: 70ch;
  --width-page: 72rem;
  --border-width: 1px;
  --border-width-mid: 2px;
  --border-width-strong: 4px;
  --focus-ring: 3px;
  --focus-offset: 2px;
  --header-height: 3.75rem;
  --control-height: 2.9rem;
  --badge-size: 1.75rem;
  --touch-target: 2.75rem;
  --buy-width: 18rem;
  --preview-ratio: 4 / 3;

  /* Icons */
  --icon-size: 1.5rem;
  --icon-stroke: 2;

  /* Elevation */
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.05), 0 1px 3px rgb(0 0 0 / 0.04);
  --shadow-2: 0 4px 12px rgb(0 0 0 / 0.08);

  /* Logo swap */
  --logo-img-display: inline-block;
  --logo-text-display: inline;
  --logo-height: 1.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1F1B22;
    --color-surface: #2B2530;
    --color-surface-alt: #332C38;
    --color-text: #F3EFE8;
    --color-text-muted: #B8AFBC;
    --color-line: #3B3440;
    --color-accent: #D8BCE4;
    --color-accent-hover: #E3CDEB;
    --color-on-accent: #1F1B22;
    --color-accent-soft: #3A2F40;
    --color-focus: #E9A23B;
    --color-note-bg: #3A2F1A;
    --color-note-line: #E9A23B;
    --color-note-text: #FBEBCB;
    --shadow-1: none;
    --shadow-2: 0 4px 12px rgb(0 0 0 / 0.4);
  }
}

@media (min-width: 40rem) {
  :root {
    --gutter: 1.5rem;
  }
}

/* Brand layer: logo lockup and buy button (direction A) */
.brand-logo { gap: 0.5rem; }
.brand-wordmark { font-weight: 800; letter-spacing: -0.02em; color: var(--color-accent); text-transform: lowercase; }
[dir="rtl"] .brand-wordmark { text-transform: none; font-family: var(--font-arabic); }
.buy-box .btn { background: var(--color-buy); border-color: var(--color-buy); color: var(--color-on-buy); }
.buy-box .btn:hover { background: var(--color-buy-hover); border-color: var(--color-buy-hover); }