/* ============================================================
   vibn-marketplace · marketplace-tokens.css
   ------------------------------------------------------------
   Extends vibn-ai-templates/tokens.css with marketplace-specific
   tokens + a new theme ("atlas" — warm-editorial, Airbnb school).
   Load AFTER tokens.css.
   ============================================================ */

:root {
  /* Marketplace-specific tokens (added to base) */
  --listing-radius:     14px;          /* photo cards */
  --listing-shadow:     0 6px 24px -12px rgba(0,0,0,0.12);
  --listing-hover-shadow: 0 12px 32px -10px rgba(0,0,0,0.18);
  --rating:             #f6c560;       /* star color */
  --rating-empty:       rgba(0,0,0,0.12);
  --map-pin:            var(--text);
  --map-pin-active:     var(--accent);
  --price-emphasis:     var(--text);
}

/* ============================================================
   THEME · atlas
   Warm editorial marketplace — Airbnb / Marriott Bonvoy / Sonder
   school. Cream paper, deep ink, terracotta accent, sage support.
   ============================================================ */
.theme-atlas {
  --font-display: 'DM Serif Display', 'Times New Roman', serif;

  --bg:           #fbf7f0;
  --surface:      #ffffff;
  --surface-2:    #f7f1e6;
  --surface-alt:  #efe7d6;
  --border:       #e8dcc6;
  --border-strong:#c9b894;
  --divider:      #efe7d6;

  --text:         #1a1612;
  --text-2:       #5a4a3a;
  --text-3:       #8a7a66;
  --text-on-accent: #fbf7f0;

  --accent:       #c4592c;             /* terracotta */
  --accent-2:     #8a6c30;             /* ochre */
  --accent-soft:  #f5e8db;
  --accent-ring:  rgba(196,89,44,0.22);

  --success:      #5d8054;             /* sage */
  --success-soft: #e3eadc;
  --warn:         #c08a2a;
  --warn-soft:    #f5ebd0;
  --danger:       #a32a1e;
  --danger-soft:  #f3d8d2;

  --button-radius:  999px;             /* pill buttons everywhere */
  --field-radius:   10px;
  --card-radius:    14px;
  --modal-radius:   18px;

  --shadow-sm:    0 1px 2px rgba(26,22,18,0.04);
  --shadow:       0 2px 8px rgba(26,22,18,0.06), 0 1px 2px rgba(26,22,18,0.04);
  --shadow-lg:    0 24px 50px -20px rgba(26,22,18,0.20), 0 2px 8px rgba(26,22,18,0.05);
  --shadow-modal: 0 40px 80px -20px rgba(26,22,18,0.30);

  --button-bg:      #1a1612;
  --button-fg:      #fbf7f0;
  --button-border:  #1a1612;
  --button-hover:   #2a2218;
  --button-press:   #000000;

  --button-secondary-bg:     #ffffff;
  --button-secondary-fg:     #1a1612;
  --button-secondary-border: #1a1612;
  --button-secondary-hover:  rgba(26,22,18,0.05);

  --button-ghost-fg:    var(--text);
  --button-ghost-hover: rgba(26,22,18,0.05);

  --field-bg:        #ffffff;
  --field-border:    var(--border);
  --field-placeholder: var(--text-3);

  /* Marketplace overrides */
  --listing-radius:  14px;
  --listing-shadow:  0 8px 28px -14px rgba(26,22,18,0.18);
  --rating:          #c4592c;          /* terracotta stars feel ownable */
  --rating-empty:    rgba(26,22,18,0.10);
  --map-pin-active:  var(--accent);
}

/* Small atlas-specific niceties: ".accent-script" turns body
   copy into the display serif italic — used for hero pulls. */
.theme-atlas .accent-script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}


/* ============================================================
   THEME · flux
   The most-now marketplace aesthetic: deep black surfaces with
   subtle glass tint, vibrant violet→fuchsia aurora behind a
   frosted UI, Inter Tight for displays. Think v0 / Cursor /
   Linear, applied to a stays product.
   ============================================================ */
.theme-flux {
  --font-display: 'Inter Tight', 'Inter', -apple-system, sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --bg:           #08080c;
  --surface:      rgba(20,20,26,0.72);
  --surface-2:    rgba(28,28,36,0.55);
  --surface-alt:  rgba(255,255,255,0.04);
  --border:       rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.18);
  --divider:      rgba(255,255,255,0.06);

  --text:         #fafafa;
  --text-2:       rgba(255,255,255,0.72);
  --text-3:       rgba(255,255,255,0.48);
  --text-on-accent: #08080c;

  --accent:       #8b7cff;        /* electric violet */
  --accent-2:     #ff5cd8;        /* fuchsia */
  --accent-soft:  rgba(139,124,255,0.16);
  --accent-ring:  rgba(139,124,255,0.40);

  --success:      #4ade80;
  --success-soft: rgba(74,222,128,0.14);
  --warn:         #f6c560;
  --warn-soft:    rgba(246,197,96,0.14);
  --danger:       #ff5b6b;
  --danger-soft:  rgba(255,91,107,0.14);

  --button-radius:  10px;
  --field-radius:   10px;
  --card-radius:    14px;
  --modal-radius:   18px;

  --surface-blur:   24px;
  --backdrop:       radial-gradient(60% 50% at 10% 5%,   rgba(139,124,255,0.35), transparent 60%),
                    radial-gradient(55% 60% at 95% 30%,  rgba(255,92,216,0.30),  transparent 60%),
                    radial-gradient(70% 60% at 50% 105%, rgba(74,222,200,0.18),  transparent 60%);

  --shadow-sm:    0 1px 2px rgba(0,0,0,0.4);
  --shadow:       0 8px 32px -8px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-lg:    0 30px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
  --shadow-modal: 0 40px 100px -30px rgba(0,0,0,0.85);

  --button-bg:      #ffffff;
  --button-fg:      #08080c;
  --button-border:  #ffffff;
  --button-hover:   rgba(255,255,255,0.90);
  --button-press:   rgba(255,255,255,0.82);

  --button-secondary-bg:     rgba(255,255,255,0.06);
  --button-secondary-fg:     #ffffff;
  --button-secondary-border: rgba(255,255,255,0.14);
  --button-secondary-hover:  rgba(255,255,255,0.12);

  --button-ghost-fg:    #ffffff;
  --button-ghost-hover: rgba(255,255,255,0.06);

  --field-bg:        rgba(255,255,255,0.04);
  --field-border:    rgba(255,255,255,0.12);
  --field-placeholder: rgba(255,255,255,0.45);

  /* Marketplace specifics */
  --listing-radius:  14px;
  --listing-shadow:  0 10px 36px -12px rgba(0,0,0,0.7);
  --listing-hover-shadow: 0 18px 50px -10px rgba(139,124,255,0.30);
  --rating:          #f6c560;
  --rating-empty:    rgba(255,255,255,0.16);
  --map-pin:         #ffffff;
  --map-pin-active:  var(--accent);
}

/* `.accent-script` in flux becomes a tight italic with the
   violet→fuchsia gradient — replaces atlas's serif italic. */
.theme-flux .accent-script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  background: linear-gradient(95deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}