/* Design tokens — spec 11 §2 (UI System).
 * Palette reconciled against the Catalog Home wireframes (PR 4.4 visual pass).
 * Values below are sampled directly from the approved wireframe renders, which
 * supersede the qualitative Phase-2 starting palette. Spec 11 §2.1 should be
 * updated to match after this PR. Dark mode still stubbed (spec 11 §8) —
 * theme.js sets the attribute but no visible change until dark values land.
 */

:root {
  /* ===== Color — surfaces ===== */
  --color-canvas:          #EEEFF3;
  --color-bg:              #F7F8FC;
  --color-surface:         #FFFFFF;
  --color-surface-muted:   #F4F5F8;
  --color-border:          #E9EBF1;
  --color-border-strong:   #DCDFE8;
  --color-divider:         #EDEEF3;

  /* ===== Color — text ===== */
  --color-text:            #0F1729;
  --color-text-muted:      #6B7280;
  --color-text-subtle:     #9AA1AE;

  /* ===== Color — accent ===== */
  --color-accent:          #425FE9;
  --color-accent-press:    #3651D0;
  --color-accent-text:     #3D64E5;
  --color-accent-soft:     #ECF0FF;
  --color-accent-softer:   #F2F5FF;

  /* ===== Color — ink (dark fills) ===== */
  --color-ink:             #0C1124;
  --color-ink-soft:        #12172A;
  --color-ink-card:        #11172D;

  /* ===== Color — status ===== */
  --color-success:         #16A34A;
  --color-success-soft:    #E7F5E8;
  --color-success-text:    #1A8B53;
  --color-warning:         #D97706;
  --color-warning-soft:    #FAF2DD;
  --color-warning-text:    #B07A1F;
  --color-danger:          #DC2626;

  /* ===== Color — discover tile tints ===== */
  --color-tile-recommend-from: #3E58E0;
  --color-tile-recommend-to:   #2F46C7;
  --color-tile-new:            #FAF2DD;
  --color-tile-new-ink:        #B07A1F;
  --color-tile-popular:        #FCEEE3;
  --color-tile-popular-ink:    #C2581E;
  --color-tile-event:          #F0EBFF;
  --color-tile-event-ink:      #6B4FD4;

  /* ===== Type ===== */
  --font-serif: 'Source Serif Pro', 'Iowan Old Style', Georgia, serif;
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  40px;

  /* ===== Spacing ===== */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   80px;
  --space-10:  96px;
  --space-11:  128px;
  --space-12:  160px;

  /* ===== Radii ===== */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  22px;
  --radius-full: 9999px;

  /* ===== Shadows ===== */
  --shadow-xs:  0 1px 2px rgba(15, 23, 41, 0.05);
  --shadow-sm:  0 1px 3px rgba(15, 23, 41, 0.06), 0 1px 2px rgba(15, 23, 41, 0.04);
  --shadow-md:  0 6px 16px rgba(15, 23, 41, 0.08), 0 2px 4px rgba(15, 23, 41, 0.04);
  --shadow-lg:  0 16px 40px rgba(15, 23, 41, 0.12), 0 4px 12px rgba(15, 23, 41, 0.06);
  --shadow-ring: 0 0 0 4px rgba(66, 95, 233, 0.12);

  /* ===== Motion ===== */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ===== Layout dims ===== */
  --sidenav-w:           248px;
  --sidenav-collapsed-w: 76px;
  --rightrail-w:         336px;
  --topnav-h:            76px;
}

/* Dark mode stub — theme.js flips this attribute; no visible change yet. */
[data-theme="dark"] {
  /* deferred per spec 11 §8 */
}