/* ==========================================================================
   Qasida — design tokens
   Version 2, August 2026

   Primary colourway is MEHNDI. Single theme, decided.
   Components read --q-ink, never a raw hex.
   ========================================================================== */

:root {

  /* --- Brand palette (raw — do not use directly in components) --- */
  --q-cream:        #F7F3E8;
  --q-cream-sunk:   #EFE9DA;
  --q-mehndi:       #7B3F26;
  --q-mehndi-deep:  #653119;
  --q-cardamom:     #75823A;
  --q-indigo:       #9377A5;
  --q-marigold:     #D9962A;   /* pending: replaces haldi #FF830C */

  /* Fabric-only. Never used in the interface. Listed for reference. */
  --q-fabric-long:  #866157;
  --q-fabric-stain: #A9683C;

  /* --- Semantic --- */
  --q-surface:      var(--q-cream);
  --q-surface-sunk: var(--q-cream-sunk);
  --q-ink:          var(--q-mehndi);        /* 7.34:1 on cream */
  --q-ink-hover:    var(--q-mehndi-deep);
  --q-ink-body:     #7A6252;                /* 5.6:1  — body copy */
  --q-ink-muted:    #94806B;                /* 4.1:1  — captions, 13px min */
  --q-line:         rgba(123, 63, 38, .18);
  --q-line-strong:  rgba(123, 63, 38, .34);
  --q-on-ink:       var(--q-cream);

  /* --- Typography --- */
  --q-latin:        "Source Serif 4", Georgia, "Times New Roman", serif;
  --q-gurmukhi:     "Noto Serif Gurmukhi", "Source Serif 4", serif;

  --q-size-wordmark: 60px;
  --q-size-display:  30px;
  --q-size-heading:  21px;
  --q-size-title:    16px;
  --q-size-body:     16px;
  --q-size-caption:  13px;
  --q-size-label:    11.5px;

  --q-track-wordmark: 5px;
  --q-track-display:  .5px;
  --q-track-title:    .3px;
  --q-track-caption:  .5px;
  --q-track-label:    2.6px;

  --q-leading-body:  1.75;
  --q-leading-tight: 1.25;
  --q-measure:       450px;

  /* --- Spacing (4px base) --- */
  --q-1: 4px;  --q-2: 8px;  --q-3: 12px; --q-4: 16px;
  --q-6: 24px; --q-8: 32px; --q-12: 48px; --q-16: 64px;
  --q-19: 76px; --q-24: 96px;

  /* --- Layout --- */
  --q-max:      1060px;
  --q-gutter:   24px;
  --q-pad-page: 32px;

  /* --- Shape --- */
  --q-radius-control: 6px;
  --q-radius-card:    10px;
  --q-radius-image:   0;      /* garments are never rounded */
  --q-hairline:       .5px;

  /* --- Motion --- */
  --q-dur-color: 120ms;
  --q-dur-draw:  800ms;
  --q-dur-rise:  1000ms;
  --q-ease-draw: cubic-bezier(.33, .9, .4, 1);
  --q-ease-rise: cubic-bezier(.22, .8, .3, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */

html { background: var(--q-surface); }

body {
  margin: 0;
  background: var(--q-surface);
  color: var(--q-ink);
  font-family: var(--q-latin);
  font-size: var(--q-size-body);
  line-height: var(--q-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Gurmukhi runs larger and looser than Latin at the same optical size,
   because the sirlekh stroke across the top changes the vertical rhythm.
   Gurmukhi is left-to-right — never add RTL logic. */
html[lang="pa"] body,
[lang="pa"] {
  font-family: var(--q-gurmukhi);
  font-size: 1.1em;
  line-height: 1.95;
  letter-spacing: normal;   /* Latin tracking does not transfer */
  text-transform: none;     /* Gurmukhi has no case */
  font-style: normal;       /* no synthetic italics */
}

:focus-visible {
  outline: 2px solid var(--q-ink);
  outline-offset: 3px;
}

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