/* ============================================================
   Design tokens — Hollywood Prop Store
   Drop-in replacement for src/styles/variables.css
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Inter+Tight:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* --- Color: Ink / Paper / Line ------------------------------- */
  --color-ink:        #0b0b0d;   /* page background */
  --color-ink-2:      #121217;   /* slightly warmer dark for tonal sections */
  --color-ink-soft:   #1a1a1d;   /* cards, hover surfaces */
  --color-ink-3:      #222226;   /* raised UI */

  --color-paper:      #f5f1ea;   /* primary text on dark */
  --color-paper-2:    #ede6db;
  --color-paper-3:    #d9d2c3;

  --color-line:       #2a2a2e;   /* 1px dividers on dark */
  --color-line-2:     #3a3a40;   /* stronger divider */
  --color-line-light: #d9d2c3;   /* dividers on paper */

  --color-muted:      #8b8578;   /* secondary text / mono labels */
  --color-muted-2:    #6a6558;

  /* --- Accent (brand warm amber) ------------------------------- */
  --color-accent:     #e8a33d;
  --color-accent-2:   #c98524;
  --color-accent-ink: #0b0b0d;   /* text color on accent backgrounds */

  /* --- Signal (live / alert / new lot) ------------------------- */
  --color-signal:     #ff4530;
  --color-signal-2:   #c93520;

  /* --- Typography ---------------------------------------------- */
  --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Layout --------------------------------------------------- */
  --max-width:       1440px;
  --pad:             clamp(20px, 4vw, 56px);
  --nav-height:      68px;
  --bar-height:      32px;

  /* --- Shape ---------------------------------------------------- */
  --border-radius-sm:   2px;
  --border-radius:      4px;
  --border-radius-pill: 999px;

  /* --- Motion --------------------------------------------------- */
  --transition:      180ms cubic-bezier(.2, .7, .3, 1);
  --transition-slow: 480ms cubic-bezier(.2, .7, .3, 1);

  /* --- Shadow --------------------------------------------------- */
  --shadow-card:  0 2px 24px rgba(0,0,0,0.35);
  --shadow-lift:  0 10px 40px rgba(0,0,0,0.45);
}