/* =====================================================================
   Danya design tokens — "Dania Brand Guidelines 2026"
   This is the ONLY stylesheet allowed to contain raw colour values or
   font names. Everything else uses var(--…). The admin theme editor's
   defaults (js/theme-defaults.js) mirror these values; a unit test keeps
   the two in sync. See BRAND.md.
   ===================================================================== */
:root {
  /* ---- Brand palette (exact values from the guideline) ---- */
  --deep-red:   #850009;  /* DEEP RED — the shop's only red (owner's decision 2026-10-14: Dania red #E30613 removed as too bright) */
  --deep-red-dark: #6A060C; /* deep red darkened toward charcoal — hover/pressed and the curve's swoosh only */
  --white:      #FFFFFF;  /* WHITE — calm and clarity, content areas */
  --warm-cream: #F6F1EB;  /* WARM CREAM — warm page backgrounds */
  --charcoal:   #241415;  /* CHARCOAL — supporting colour: text and details only */
  --muted-text: #786D6D;  /* secondary text used throughout the guide */

  /* ---- Functional (only where function needs it) ---- */
  --natural-green: #3B6B47; /* success only (order placed, paid), used sparingly */

  /* ---- Roles: components use these names ---- */
  --color-primary:        var(--deep-red);
  --color-primary-strong: var(--deep-red-dark);
  --color-bg:             var(--white);
  --color-bg-warm:        var(--warm-cream);
  --color-surface:        var(--white);
  --color-text:           var(--charcoal);
  --color-text-muted:     var(--muted-text);
  --color-on-primary:     var(--white);
  --color-heading-accent: var(--deep-red);
  --color-sale:           var(--deep-red);
  --color-header-bg:      var(--white);
  --color-header-text:    var(--charcoal);
  --color-footer-bg:      var(--deep-red);
  --color-footer-text:    var(--white);
  --color-announce-bg:    var(--deep-red);
  --color-announce-text:  var(--white);
  --color-success:        var(--natural-green);
  --color-error:          var(--deep-red);
  --page-bg:              var(--color-bg);

  /* ---- Derived states (kept close to the palette) ---- */
  --color-border:       rgb(36 20 21 / .1);   /* charcoal at 10% */
  --color-border-strong: rgb(36 20 21 / .2);
  --color-overlay:      rgb(36 20 21 / .92);  /* lightbox */
  --color-scrim:        rgb(36 20 21 / .45);  /* drawers, modals */
  --color-on-dark-muted: rgb(255 255 255 / .7);
  --color-on-dark-tint:  rgb(255 255 255 / .12); /* hover on red panels */
  --color-tint-red:     rgb(133 0 9 / .08);   /* soft red wash for hovers/selected (main red) */
  --color-tint-red-strong: rgb(133 0 9 / .14);
  --color-tint-green:   rgb(59 107 71 / .1);
  --color-skeleton:     rgb(36 20 21 / .06);
  --color-skeleton-hi:  rgb(36 20 21 / .02);

  /* ---- Typography ---- */
  --font-display-ar: "Noto Kufi Arabic", "Noto Sans Arabic", sans-serif;
  --font-body-ar:    "Noto Sans Arabic", sans-serif;
  --font-display-en: "Noto Sans", sans-serif;
  --font-body-en:    "Noto Sans", sans-serif;
  --fw-regular: 400;
  --fw-bold:    700;

  --fs-display: clamp(2.25rem, 5vw, 3.25rem);   /* hero headline */
  --fs-h1:      clamp(1.75rem, 3.5vw, 2.5rem);  /* page titles */
  --fs-h2:      clamp(1.375rem, 2.5vw, 1.875rem); /* section titles */
  --fs-h3:      1.25rem;    /* card titles, product names on the product page */
  --fs-body:    1.0625rem;  /* 17px — Arabic body needs to be a little larger */
  --fs-small:   0.875rem;   /* meta, helper text */
  --fs-label:   0.8125rem;  /* badges, small labels — never below 13px */
  --lh-heading: 1.3;        /* Kufi needs room for dots and marks */
  --lh-body:    1.75;
  --ls-body:    0em;
  --ws-body:    0em;
  --fs-scale:   1;          /* admin "heading size" multiplier */

  /* ---- Shape & spacing ---- */
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --space-section: var(--space-8);
  --gap-card: var(--space-4);
  --shadow-card: 0 2px 10px rgb(36 20 21 / .06);
  --shadow-raised: 0 10px 30px -12px rgb(36 20 21 / .22);
  --shadow-float: 0 24px 60px -20px rgb(36 20 21 / .35);

  /* ---- Logo (guide: min. 180px digital, clear space ≈ 15% of logo height) ---- */
  --logo-w: 180px;
  --logo-ratio: 0.4267;  /* logo-primary.png is 1200×512 */
  --logo-clear: calc(var(--logo-w) * var(--logo-ratio) * .15);
}

html[lang="ar"], html[lang="ckb"] { --font-display: var(--font-display-ar); --font-body: var(--font-body-ar); }
html[lang="en"] { --font-display: var(--font-display-en); --font-body: var(--font-body-en); --lh-body: 1.6; }