/* Design tokens — editorial light theme for a premium AI fashion stylist.
   Inspired by Net-a-Porter, The Row, Stitch Fix — restrained, confident,
   serif headlines, generous whitespace, sparing accent use. */
:root {
  /* ─── Surfaces (ivory hierarchy) ───────────────────────────────── */
  --bg:               #f6f2ea;        /* warm ivory page bg */
  --bg-card:          #ffffff;        /* white cards float above ivory */
  --bg-card-hover:    #fdfbf5;        /* faint warm lift on hover */
  --bg-soft:          #efe9da;        /* tinted soft bg for sections / image holders */
  --bg-elevated:      #ffffff;        /* modals, top-layer surfaces */

  /* ─── Text — warm charcoal hierarchy, all WCAG AA on ivory ───── */
  --text:             #1c1916;        /* primary — high contrast */
  --text-strong:      #0f0d0b;        /* extra-emphasis */
  --text-dim:         #45403a;        /* secondary, easy to read */
  --text-dimmer:      #6e685e;        /* tertiary, still readable */
  --text-faint:       #9b9489;        /* hints, captions only */

  /* ─── Accent — warm aged-gold, used sparingly ─────────────────── */
  --gold:             #8a5e1f;        /* deeper, more authoritative gold */
  --gold-light:       #b88a3f;        /* secondary gold tone */
  --gold-dark:        #634413;        /* hover/pressed states */
  --gold-bg:          rgba(138,94,31,0.07);    /* gold-tinted backgrounds */
  --gold-bg-strong:   rgba(138,94,31,0.13);    /* selected state bg */

  /* ─── Borders — subtle warm dividers ─────────────────────────── */
  --border:           #e6dccb;
  --border-strong:    #d0c4ac;
  --border-gold:      rgba(138,94,31,0.30);

  /* ─── Status ───────────────────────────────────────────────────── */
  --error:            #a83321;
  --error-bg:         #fbeae5;
  --success:          #2e7d4f;

  /* ─── Shape ────────────────────────────────────────────────────── */
  --radius:           14px;
  --radius-sm:        10px;
  --radius-lg:        20px;

  /* ─── Shadows (multi-layer, like real design systems) ─────────── */
  --shadow-xs:        0 1px 2px rgba(28,25,22,0.05);
  --shadow-sm:        0 1px 3px rgba(28,25,22,0.06), 0 1px 2px rgba(28,25,22,0.04);
  --shadow-md:        0 4px 12px rgba(28,25,22,0.08), 0 2px 4px rgba(28,25,22,0.04);
  --shadow-lg:        0 12px 32px rgba(28,25,22,0.10), 0 4px 12px rgba(28,25,22,0.05);
  --shadow-xl:        0 24px 60px rgba(28,25,22,0.14), 0 8px 16px rgba(28,25,22,0.06);
  --focus-ring:       0 0 0 3px rgba(138,94,31,0.18);

  /* ─── Type ─────────────────────────────────────────────────────── */
  --font-display:     'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:        'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
}