/* ============================================================================
   Crown Deco QA - Design Tokens
   GENERATED from packages/design-tokens/tokens.json - do not hand-edit.
   Regenerate with: node packages/design-tokens/build.mjs

   Theme contract
   --------------
   Light is the default. Dark applies on BOTH the OS signal and an explicit
   [data-theme] attribute, and the explicit attribute must win in both
   directions so a user toggle can override the OS preference.
   ========================================================================= */

:root {
  /* --- primary (Qatar maroon) --------------------------------------- */
  --c-primary-700: #6B0F2B;   /* 10.67:1  AAA */
  --c-primary-600: #8A1538;   /* brand.  8.21:1 on base  AAA */
  --c-primary-500: #A63A57;   /*  5.48:1  AA  */
  --c-primary-300: #D18C9F;   /*  2.32:1  - decorative only */
  --c-primary-100: #F7E4EA;
  --c-primary-050: #FDF5F7;
  --c-on-primary:  #FFFBF5;   /* ivory on maroon = 9.07:1  AAA */

  /* --- accent (champagne gold) -------------------------------------- */
  /* READ THIS BEFORE USING GOLD. Four steps, four different permissions.
     Picking the wrong one is the most likely a11y failure in this brand.

       --c-accent-800  6.75:1  gold text hover / pressed
       --c-accent-700  4.60:1  gold BODY TEXT        <- the only one that is
       --c-accent-600  3.11:1  gold LARGE text only (>=24px, or >=18.66px
                               bold), plus borders and icons
       --c-accent-500  2.10:1  FILLS and DECORATION ONLY - never text at
                               any size on a light background

     For a gold button use --c-accent-500 as the background with
     --c-on-accent on top (7.78:1). packages/design-tokens/build.mjs fails
     the build if any of these four facts stops being true.                */
  --c-accent-800: #6B4E1C;
  --c-accent-700: #8A6626;    /* gold body text.  4.60:1  AA */
  --c-accent-600: #A8823E;    /* large text / borders / icons.  3.11:1 */
  --c-accent-500: #C8A25A;    /* fills + decoration ONLY.  2.10:1 */
  --c-accent-300: #DFC894;
  --c-accent-100: #F5EBD6;
  --c-on-accent:  #1A1013;    /* ink on a gold-500 fill = 7.78:1  AA */

  /* --- ink (text) --------------------------------------------------- */
  --c-ink-900: #1A1013;       /* 16.35:1  AAA */
  --c-ink-700: #3D2C32;       /* 11.49:1  AAA */
  --c-ink-600: #5C4A50;       /*  7.23:1  AAA */
  --c-ink-400: #8A7A80;       /*  3.56:1  - non-essential text only */
  --c-ink-300: #B5A8AC;       /*  2.01:1  - decorative only */

  /* --- surfaces ----------------------------------------------------- */
  --c-base-000:    #F2F0EB;
  --c-base-050:    #EAE7E1;
  --c-surface-100: #FFFFFF;
  --c-surface-200: #FAF5EE;
  --c-border-200:  #E8DDD4;
  --c-border-300:  #D6C7BA;

  /* --- semantic ----------------------------------------------------- */
  --c-success-600: #1D7A5F;  --c-success-100: #E3F3EE;
  --c-warning-600: #8A5A00;  --c-warning-100: #FDF0D9;
  --c-danger-600:  #B3261E;  --c-danger-100:  #FCE8E6;
  --c-info-600:    #1B5E8A;  --c-info-100:    #E4F0F7;
  --c-focus-ring:  #1B5E8A;

  /* --- category accents --------------------------------------------- */
  --c-cat-balloons:  #B3261E;  --c-cat-balloons-bg:  #FCE8E6;
  --c-cat-flowers:   #A6295E;  --c-cat-flowers-bg:   #FBE6EE;
  --c-cat-lighting:  #8A5A00;  --c-cat-lighting-bg:  #FDF0D9;
  --c-cat-tableware: #1B5E8A;  --c-cat-tableware-bg: #E4F0F7;
  --c-cat-stages:    #5A3D8A;  --c-cat-stages-bg:    #EEE8F7;
  --c-cat-cakes:     #A64B1F;  --c-cat-cakes-bg:     #FCEBE2;
  --c-cat-gifts:     #1D7A5F;  --c-cat-gifts-bg:     #E3F3EE;
  --c-cat-rentals:   #3D5A80;  --c-cat-rentals-bg:   #E8EDF5;

  /* --- elevation (warm-tinted for the ivory base) ------------------- */
  --shadow-sm: 0 1px 2px rgba(26,16,19,0.06), 0 1px 3px rgba(26,16,19,0.04);
  --shadow-md: 0 2px 4px rgba(26,16,19,0.06), 0 4px 12px rgba(26,16,19,0.08);
  --shadow-lg: 0 4px 8px rgba(26,16,19,0.06), 0 12px 32px rgba(26,16,19,0.10);
  --shadow-xl: 0 8px 16px rgba(26,16,19,0.08), 0 24px 56px rgba(26,16,19,0.14);

  /* --- typography families ----------------------------------------- */
  --font-sans:    "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Playfair Display Variable", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* --- locale typography (LTR / Latin default) ---------------------- */
  --font-scale:    1;
  --lh-body:       1.6;
  --lh-heading:    1.2;
  --ls-body:       -0.011em;
  --ls-heading:    -0.02em;
  --measure:       68ch;

  /* --- fluid type scale -------------------------------------------- */
  --fs-display: clamp(2.5rem,   1.75rem + 4vw,   4rem);
  --fs-h1:      clamp(2rem,     1.5rem  + 3vw,   3rem);
  --fs-h2:      clamp(1.5rem,   1.2rem  + 2.4vw, 2.25rem);
  --fs-h3:      clamp(1.25rem,  1.1rem  + 1.8vw, 1.5rem);
  --fs-h4:      clamp(1.125rem, 1.05rem + 1.4vw, 1.25rem);
  --fs-body-lg: clamp(1.0625rem, 1rem   + 1.2vw, 1.125rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.75rem;

  /* --- spacing (4px base) ------------------------------------------ */
  --s-0: 0;      --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem;
  --s-4: 1rem;   --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;
  --s-10: 2.5rem;--s-12: 3rem;   --s-16: 4rem;   --s-20: 5rem;
  --s-24: 6rem;  --s-32: 8rem;

  /* --- radii -------------------------------------------------------- */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-full: 999px;

  /* --- motion ------------------------------------------------------- */
  --d-instant: 0ms; --d-fast: 120ms; --d-base: 200ms; --d-slow: 320ms; --d-slower: 480ms;
  --e-standard:   cubic-bezier(0.2, 0, 0, 1);
  --e-decelerate: cubic-bezier(0, 0, 0, 1);
  --e-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --e-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- layout ------------------------------------------------------- */
  --container-xl: 1200px;
  --container-2xl: 1360px;
  --gutter: 1rem;
  --header-h: 56px;
  --touch-min: 44px;
  --z-dropdown: 10; --z-sticky: 20; --z-header: 30;
  --z-drawer: 40;   --z-modal: 50;  --z-popover: 60; --z-toast: 70;
}

@media (min-width: 768px) {
  :root { --gutter: 1.5rem; --header-h: 72px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 2rem; }
}

/* ---------------------------------------------------------------------------
   Arabic / RTL locale overrides.
   Arabic letterforms need more vertical room and diacritics need headroom.
   letter-spacing MUST be 0 - negative tracking breaks Arabic glyph joining.
   ------------------------------------------------------------------------ */
:root:lang(ar),
[lang="ar"] {
  --font-sans:    "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-display: "Reem Kufi Variable", "Segoe UI", Tahoma, sans-serif;
  --font-scale: 1.0625;
  --lh-body:    1.75;
  --lh-heading: 1.35;
  --ls-body:    0;
  --ls-heading: 0;
  --measure:    62ch;
}

/* ---------------------------------------------------------------------------
   Dark theme.
   Not an inversion: maroon at #8A1538 is far too dark to read on a dark
   surface, so the primary LIGHTENS to a rose tint that holds 9.33:1.
   ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-primary-700: #F7C2CF;
    --c-primary-600: #F0A0B4;   /* text / links.  9.33:1 on base  AA */
    --c-primary-500: #E08BA3;   /* button fill, ink on top = 7.54:1   */
    --c-primary-300: #8E5566;
    --c-primary-100: #3A2028;
    --c-primary-050: #2A181E;
    --c-on-primary:  #141013;

    /* On dark the ramp inverts: gold LIGHTENS, and unlike the light theme
       accent-500 is perfectly safe for text here (10.98:1). The restriction
       is a property of the light background, not of the colour. */
    --c-accent-800: #F7E8C4;
    --c-accent-700: #F0DCB0;
    --c-accent-600: #E8CE96;    /* 12.31:1  AAA */
    --c-accent-500: #E0C285;    /* 10.98:1  AAA - text is fine on dark */
    --c-accent-300: #8A6F3C;
    --c-accent-100: #2E2618;
    --c-on-accent:  #141013;

    --c-ink-900: #F5EFF0;
    --c-ink-700: #D6C8CD;
    --c-ink-600: #B8A8AE;
    /* Lightened from #8A7A80. On dark it carried muted text — struck-out
       prices, review counts — at 3.94:1 against surface-200, under the 4.5
       AA floor. The light value is untouched: there it sits on white. */
    --c-ink-400: #9A8A90;
    --c-ink-300: #5C4A50;

    --c-base-000:    #111416;
    --c-base-050:    #181C1F;
    --c-surface-100: #1F181B;
    --c-surface-200: #291F23;
    --c-border-200:  #3A2E33;
    --c-border-300:  #4D3D43;

    --c-success-600: #4CAF8B;  --c-success-100: #16302A;
    --c-warning-600: #E8A33D;  --c-warning-100: #33260F;
    --c-danger-600:  #F2685F;  --c-danger-100:  #3A1A18;
    --c-info-600:    #5BA3D0;  --c-info-100:    #152A36;
    --c-focus-ring:  #7FC4F0;

    --c-cat-balloons:  #F2685F;  --c-cat-balloons-bg:  #3A1A18;
    --c-cat-flowers:   #ED7BA5;  --c-cat-flowers-bg:   #381C28;
    --c-cat-lighting:  #E8A33D;  --c-cat-lighting-bg:  #33260F;
    --c-cat-tableware: #5BA3D0;  --c-cat-tableware-bg: #152A36;
    --c-cat-stages:    #A98BD6;  --c-cat-stages-bg:    #241C33;
    --c-cat-cakes:     #E0885C;  --c-cat-cakes-bg:     #33200F;
    --c-cat-gifts:     #4CAF8B;  --c-cat-gifts-bg:     #16302A;
    --c-cat-rentals:   #7FA3D6;  --c-cat-rentals-bg:   #1A2233;

    --shadow-sm: 0 0 0 1px rgba(255,255,255,0.04);
    --shadow-md: 0 0 0 1px rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.40);
    --shadow-lg: 0 0 0 1px rgba(255,255,255,0.07), 0 12px 32px rgba(0,0,0,0.50);
    --shadow-xl: 0 0 0 1px rgba(255,255,255,0.08), 0 24px 56px rgba(0,0,0,0.60);
  }
}

/* Explicit toggle must win over the OS signal in BOTH directions. */
:root[data-theme="dark"] {
  --c-primary-700: #F7C2CF;
  --c-primary-600: #F0A0B4;
  --c-primary-500: #E08BA3;
  --c-primary-300: #8E5566;
  --c-primary-100: #3A2028;
  --c-primary-050: #2A181E;
  --c-on-primary:  #141013;

  --c-accent-800: #F7E8C4;
  --c-accent-700: #F0DCB0;
  --c-accent-600: #E8CE96;    /* 12.31:1  AAA */
  --c-accent-500: #E0C285;    /* 10.98:1  AAA - text is fine on dark */
  --c-accent-300: #8A6F3C;
  --c-accent-100: #2E2618;
  --c-on-accent:  #141013;

  --c-ink-900: #F5EFF0;
  --c-ink-700: #D6C8CD;
  --c-ink-600: #B8A8AE;
  --c-ink-400: #9A8A90;
  --c-ink-300: #5C4A50;

  --c-base-000:    #111416;
  --c-base-050:    #181C1F;
  --c-surface-100: #1F181B;
  --c-surface-200: #291F23;
  --c-border-200:  #3A2E33;
  --c-border-300:  #4D3D43;

  --c-success-600: #4CAF8B;  --c-success-100: #16302A;
  --c-warning-600: #E8A33D;  --c-warning-100: #33260F;
  --c-danger-600:  #F2685F;  --c-danger-100:  #3A1A18;
  --c-info-600:    #5BA3D0;  --c-info-100:    #152A36;
  --c-focus-ring:  #7FC4F0;

  --c-cat-balloons:  #F2685F;  --c-cat-balloons-bg:  #3A1A18;
  --c-cat-flowers:   #ED7BA5;  --c-cat-flowers-bg:   #381C28;
  --c-cat-lighting:  #E8A33D;  --c-cat-lighting-bg:  #33260F;
  --c-cat-tableware: #5BA3D0;  --c-cat-tableware-bg: #152A36;
  --c-cat-stages:    #A98BD6;  --c-cat-stages-bg:    #241C33;
  --c-cat-cakes:     #E0885C;  --c-cat-cakes-bg:     #33200F;
  --c-cat-gifts:     #4CAF8B;  --c-cat-gifts-bg:     #16302A;
  --c-cat-rentals:   #7FA3D6;  --c-cat-rentals-bg:   #1A2233;

  --shadow-sm: 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-md: 0 0 0 1px rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.40);
  --shadow-lg: 0 0 0 1px rgba(255,255,255,0.07), 0 12px 32px rgba(0,0,0,0.50);
  --shadow-xl: 0 0 0 1px rgba(255,255,255,0.08), 0 24px 56px rgba(0,0,0,0.60);
}

/* ---------------------------------------------------------------------------
   Base element defaults
   ------------------------------------------------------------------------ */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  color-scheme: light dark;
}

body {
  margin: 0;
  background: var(--c-base-000);
  color: var(--c-ink-900);
  font-family: var(--font-sans);
  font-size: calc(var(--fs-body) * var(--font-scale));
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin-block: 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: calc(var(--fs-h1) * var(--font-scale)); }
h2 { font-size: calc(var(--fs-h2) * var(--font-scale)); }
h3 { font-size: calc(var(--fs-h3) * var(--font-scale)); }
h4 { font-size: calc(var(--fs-h4) * var(--font-scale)); font-family: var(--font-sans); font-weight: 600; }

p { margin-block: 0 var(--s-4); max-width: var(--measure); text-wrap: pretty; }

a { color: var(--c-primary-600); text-underline-offset: 0.2em; }

/* Prices and any tabular figures. Latin digits in both locales - Arabic-Indic
   numerals measurably slow price comparison for GCC e-commerce shoppers. */
.tnum, [data-price] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------------
   BIDI ISOLATION - do not remove.

   A Latin technical string sitting inside Arabic text gets re-ordered by the
   Unicode bidi algorithm unless it is explicitly isolated. The trailing
   punctuation migrates to the wrong end, so "#C8A25A" renders as "C8A25A#"
   and "QAR 1,250.00" can render as "1,250.00 QAR" with the comma misplaced.

   This is the single most common visual defect on Arabic commerce sites, and
   it is invisible in English QA - it only appears once the locale flips. Every
   one of these is a real field on this platform:

     order numbers   CDQ-2026-00184
     prices          QAR 1,250.00
     SKUs            BAL-RG-ARCH-3M
     phone numbers   +974 3312 4455
     IBANs           QA58DOHB00001234567890ABCDEFG
     zone/street     Zone 24, Street 850
     tracking refs, coupon codes, Tap charge ids, hex colours, URLs

   Mark them up with the matching attribute or add class="ltr".
   ------------------------------------------------------------------------ */
.ltr,
[data-price],
[data-order-no],
[data-sku],
[data-phone],
[data-iban],
[data-tracking],
[data-coupon],
code, samp, kbd, .mono {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Block-level technical content still needs a text alignment that follows the
   surrounding locale, so isolate the run without dragging the block LTR. */
pre.ltr, pre code {
  unicode-bidi: isolate;
  text-align: start;
}

/* Focus is always visible. `outline: none` without a replacement is a WCAG
   2.2 failure and is banned by the project ESLint config. */
:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Every interactive target meets the 44x44 minimum. */
button, a[role="button"], [data-touch] {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
}

/* ---------------------------------------------------------------------------
   RTL. Layout uses CSS logical properties throughout, so direction needs no
   override sheet. Only genuinely directional GLYPHS flip.
   Never flip: logos, brand marks, media playback controls, numerals, charts.
   ------------------------------------------------------------------------ */
.flip-rtl { display: inline-block; }
[dir="rtl"] .flip-rtl { scale: -1 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}