/* Hanaa's colour card: the shared design system. Every page and module builds on these tokens.
   A section takes one buttercream swatch as its field: class="field sw-rose" (or style="--field:…" via fieldVars()).
   Never mix two fields inside one section; products always sit on white sample cards. */
:root {
  --ink: #25161B;
  --ink-2: #5A4950;
  --paper: #FFFFFF;
  --pearl: #F2F0F1;
  --line: rgba(37, 22, 27, .14);

  --field: #EFB3C1;      /* the active swatch */
  --on-field: #25161B;   /* text on the field */
  --deep: #6E2139;       /* the swatch's own deep tone, for accents and secondary text on it */

  --f-display: 'Fraunces', 'Amiri', serif;
  --f-body: 'Lora', 'Markazi Text', system-ui, serif;
  --f-mono: 'Spline Sans Mono', ui-monospace, 'SFMono-Regular', monospace;
  --f-script: 'Great Vibes', cursive; /* placeholder wordmark until the real logo arrives */

  --r-chip: 14px;
  --r-card: 26px;
  --r-pill: 999px;
  --sh-card: 0 26px 48px -30px rgba(37, 22, 27, .5), 0 2px 8px -3px rgba(37, 22, 27, .14);
  --sh-lift: 0 40px 70px -34px rgba(37, 22, 27, .55), 0 4px 12px -4px rgba(37, 22, 27, .16);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.22, 1, .36, 1); /* quint out: settles without overshoot */
  --gut: clamp(16px, 4vw, 56px);
  --maxw: 1360px;

  --z-nav: 30; --z-float: 40; --z-sheet: 50; --z-fx: 80; --z-cursor: 90;
}
html:lang(ar) { --f-display: 'Amiri', 'Fraunces', serif; --f-body: 'Markazi Text', system-ui, serif; }

.sw-rose { --field: #EFB3C1; --deep: #6E2139; --on-field: #25161B; }
.sw-saffron { --field: #F3CB67; --deep: #5E3F04; --on-field: #25161B; }
.sw-lilac { --field: #CDBBE7; --deep: #3F2A66; --on-field: #25161B; }
.sw-corniche { --field: #AFD0E4; --deep: #173F59; --on-field: #25161B; }
.sw-pistachio { --field: #C6D6A0; --deep: #34461A; --on-field: #25161B; }
.sw-pomegranate { --field: #BF3A47; --deep: #FFF1F2; --on-field: #FFF6F4; }
.sw-karak { --field: #CDA27C; --deep: #3F2612; --on-field: #25161B; }
.sw-pearl { --field: #F2F0F1; --deep: #25161B; --on-field: #25161B; }
.sw-ink { --field: #25161B; --deep: #EFB3C1; --on-field: #F2F0F1; }
.field { background-color: var(--field); color: var(--on-field); transition: background-color .9s var(--ease), color .9s var(--ease); }

/* browser surfaces carry the design */
::selection { background: var(--ink); color: var(--field); }
html { accent-color: var(--ink); caret-color: var(--ink); scrollbar-color: rgba(37, 22, 27, .45) transparent; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.sw-pomegranate :focus-visible, .sw-ink :focus-visible { outline-color: #fff; }

/* type */
.display { font-family: var(--f-display); font-weight: 600; font-variation-settings: 'opsz' 96, 'wdth' 88; letter-spacing: -.035em; line-height: .94; text-wrap: balance; margin: 0; }
html:lang(ar) .display { font-weight: 600; letter-spacing: 0; line-height: 1.25; font-variation-settings: normal; }
.h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(2rem, 4.2vw, 3.6rem); font-variation-settings: 'opsz' 72, 'wdth' 92; letter-spacing: -.03em; line-height: 1; margin: 0; text-wrap: balance; }
html:lang(ar) .h2 { letter-spacing: 0; line-height: 1.3; font-variation-settings: normal; }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; max-width: 34em; text-wrap: pretty; }
.code { font: 500 11px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
html:lang(ar) .code { letter-spacing: 0; }
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* actions: ink pills; the only heavy weight on the page */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px;
  border: 0; border-radius: var(--r-pill); background: var(--ink); color: var(--pearl); font: 600 15px/1 var(--f-body);
  text-decoration: none; cursor: pointer; transition: transform .5s var(--spring), background-color .3s, color .3s, box-shadow .4s var(--ease);
  box-shadow: 0 14px 28px -16px rgba(37, 22, 27, .7); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 22px 34px -18px rgba(37, 22, 27, .8); }
.btn:active { transform: scale(.97); }
.btn svg { width: 19px; height: 19px; }
.sw-pomegranate .btn, .sw-ink .btn { background: var(--pearl); color: var(--ink); }
.btn-line { background: transparent; color: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-line:hover { box-shadow: inset 0 0 0 1.5px currentColor, 0 14px 28px -18px rgba(37, 22, 27, .5); }
.sw-pomegranate .btn-line, .sw-ink .btn-line { background: transparent; color: currentColor; }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.btn-block { display: flex; width: 100%; }
.link { display: inline-flex; align-items: center; gap: 8px; color: inherit; font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 1.5px; text-underline-offset: 6px; transition: text-underline-offset .3s var(--ease), gap .3s var(--ease); }
.link:hover { text-underline-offset: 3px; gap: 12px; }
.link svg { width: 18px; height: 18px; }
[dir=rtl] .flip { transform: scaleX(-1); }

/* the paint chip: a buttercream swatch on a white card with its name and code */
.chip { position: relative; display: grid; grid-template-rows: 1fr auto; width: 100%; aspect-ratio: 4 / 5; padding: 0; overflow: hidden;
  border: 0; border-radius: var(--r-chip); background: var(--paper); color: var(--ink); text-align: start; cursor: pointer;
  box-shadow: var(--sh-card); transition: transform .55s var(--spring), box-shadow .4s var(--ease); }
.chip > i { display: block; background: var(--c, var(--field)); }
.chip > span { display: grid; gap: 3px; padding: 9px 10px 10px; }
.chip b { font: 600 13px/1.15 var(--f-body); }
.chip:hover { transform: translateY(-6px) rotate(-1.5deg); box-shadow: var(--sh-lift); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { transform: translateY(-14px); box-shadow: var(--sh-lift), 0 0 0 2px var(--ink); }

/* the sample card: how every product is shown — photo window, chip band, specimen code */
.sample { display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border-radius: var(--r-card); overflow: hidden;
  text-decoration: none; box-shadow: var(--sh-card); transition: transform .6s var(--spring), box-shadow .5s var(--ease); }
.sample:hover { transform: translateY(-8px); box-shadow: var(--sh-lift); }
.sample-photo { position: relative; overflow: hidden; background: #F6F3F2; }
.sample-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1.1s var(--ease); }
.sample:hover .sample-photo img { transform: scale(1.05); }
.sample-band { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: end; padding: 14px 16px 16px; }
.sample-band h3 { margin: 0; font: 600 16px/1.25 var(--f-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sample-dots { display: flex; gap: 4px; grid-row: span 2; }
.sample-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(37, 22, 27, .12); }

.confetti { position: fixed; z-index: var(--z-fx); width: 8px; height: 12px; border-radius: 2px; pointer-events: none;
  animation: confetti-burst 1.4s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes confetti-burst {
  45% { transform: translate(calc(var(--dx) * .7), var(--dy)) rotate(calc(var(--r) * .5)); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 340px)) rotate(var(--r)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}