/* The Daily Next — shared design tokens.
 *
 * Single source of truth for the whole product (login page + main app) so the
 * two surfaces can't drift. Both login.css and style.css consume these vars.
 * The visual language: near-black ground, a warm gold accent, letterspaced
 * serif display type, restrained glass/blur on floating surfaces only. */
:root {
  /* ── ground & surfaces ── */
  --bg:        #0c0c0e;
  --bg-2:      #09090b;
  --surface:   #16161a;
  --surface2:  #1e1e24;
  --surface-2: #1e1e24;                 /* alias */
  --card:      #16161a;                  /* was undefined; used by wishlist thumb */
  --border:    #2a2a32;
  --border-soft: rgba(255, 255, 255, 0.07);
  --hairline:  rgba(255, 255, 255, 0.05);

  /* Glass — for FLOATING surfaces (modals, side panels, dropdowns) that have
     content behind them to blur. Not for opaque image cards. */
  --glass:        rgba(20, 20, 25, 0.66);
  --glass-strong: rgba(22, 22, 28, 0.86);
  --blur:         blur(22px) saturate(1.2);
  --scrim:        rgba(8, 8, 11, 0.62);

  /* Card surface — a whisper of vertical relief so cards read as objects, not
     flat rectangles, without needing (pointless) blur over opaque content. */
  --card-grad: linear-gradient(180deg, #17171c 0%, #131317 100%);

  /* ── gold accent ── */
  --accent:       #c9a96e;
  --accent-bright:#e0c188;
  --accent-dim:   #8a6e3e;
  --accent-bags:  #c4a882;               /* alias kept */
  --accent-soft:  rgba(201, 169, 110, 0.5);
  --accent-line:  rgba(201, 169, 110, 0.22);
  --accent-glow:  rgba(201, 169, 110, 0.12);
  --accent-wash:  rgba(201, 169, 110, 0.07);
  --gold-grad:    linear-gradient(180deg, #dcbf85 0%, #c9a96e 55%, #b8955a 100%);
  --gold-ink:     #17130a;               /* text on a gold button */

  /* ── text ── */
  --text:    #f0f0f2;
  --muted:   #8a8a97;                     /* legible muted (matches login) */
  --muted-2: #6b6b78;                     /* dimmer, for de-emphasis */

  --red:   #ef4444;
  --green: #22c55e;

  /* ── radii ── */
  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 18px;
  --radius-xl: 22px;

  /* ── elevation ── */
  --shadow-card:  0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-raise: 0 18px 50px rgba(0, 0, 0, 0.5);
  --shadow-pop:   0 40px 120px rgba(0, 0, 0, 0.62);
  --ring:         0 0 0 3px var(--accent-glow);   /* focus ring */

  /* ── type ── */
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* ── motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:   0.15s;
}