/**
 * StompGear Design System — Colors & Typography
 * Canadian P2P Adventure Gear Rental Marketplace
 *
 * Fonts: Montserrat (display), Poppins (UI headings), Inter (body)
 * Load via: https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

/* ─── BRAND COLOR PALETTE ─────────────────────────────────────── */
:root {
  /* Core brand */
  --color-primary:        #015672; /* Deep teal — primary buttons, links, active nav */
  --color-primary-hover:  #014d66; /* Primary darkened ~10% for hover */
  --color-accent:         #92BECD; /* Light blue — hover fills, secondary highlights */
  --color-anchor:         #D1E0E9; /* Very light blue — logo mountain fill, soft bg */
  --color-contrast:       #2C2928; /* Near-black — dark text, dark surfaces */
  --color-footer:         #1A1A1A; /* Footer background */

  /* Surfaces */
  --color-background:     #F7F8F9; /* Page bg (listing page, app shell) */
  --color-surface:        #FFFFFF; /* Cards, modals, panels */
  --color-surface-alt:    #FCFCFC; /* Slightly off-white — search page bg */

  /* ─── GRAY SCALE ─────────────────────────────────────────────── */
  --colorGrey50:          hsl(240 3% 98%);  /* #F9F9FA — near-white */
  --colorGrey100:         hsl(240 3% 90%);  /* #E5E5E7 — dividers, disabled fills */
  --colorGrey200:         hsl(240 3% 80%);  /* #CBCBCC */
  --colorGrey300:         hsl(240 3% 70%);  /* #B1B1B3 — placeholder text */
  --colorGrey400:         hsl(240 3% 60%);  /* #979799 */
  --colorGrey500:         hsl(240 3% 50%);  /* #7D7D80 — muted text */
  --colorGrey600:         hsl(240 3% 40%);  /* #636366 — secondary text */
  --colorGrey700:         hsl(240 3% 30%);  /* #494949 — body text */
  --colorGrey800:         hsl(240 3% 20%);  /* #303033 */
  --colorGrey900:         hsl(240 3% 10%);  /* #161617 */

  /* ─── SEMANTIC COLORS ────────────────────────────────────────── */
  --color-success:        #16A34A;
  --color-success-dark:   #0e6e31;
  --color-success-light:  #f0fff6;
  --color-error:          #DC2626;
  --color-error-light:    #fff0f0;
  --color-warning:        #FACA15;
  --color-warning-light:  #fff7f0;
  --color-info:           #7C3AED;

  /* Border & dividers */
  --color-border:         #E5E7EB; /* rgb(229,231,235) */
  --color-border-input:   #D8DCE6;
  --color-border-hover:   #B8BFD1;
  --color-border-focus:   #80bdff;

  /* ─── TYPOGRAPHY ─────────────────────────────────────────────── */
  --font-display:    'Montserrat', 'Arial Black', sans-serif;
  --font-ui:         'Poppins', 'Helvetica Neue', sans-serif;
  --font-body:       'Inter', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --font-mono:       'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* ─── TYPE SCALE ─────────────────────────────────────────────── */
  --text-hero:    50px; /* Montserrat ExtraBold — hero headlines */
  --text-h1:      44px; /* Montserrat Bold — section heroes */
  --text-h2:      36px; /* Montserrat Bold — section titles */
  --text-h3:      30px; /* Montserrat Bold / Poppins SemiBold */
  --text-h4:      24px; /* Poppins Bold */
  --text-h5:      20px; /* Poppins SemiBold / Montserrat Medium */
  --text-h6:      18px; /* Poppins SemiBold */
  --text-large:   18px; /* Inter Medium */
  --text-body:    16px; /* Inter Regular/Medium — default body */
  --text-small:   14px; /* Inter Regular — secondary content */
  --text-xs:      13px; /* Inter — captions, labels */
  --text-2xs:     12px; /* Inter — timestamps, metadata */

  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;   /* 24px at 16px */
  --leading-relaxed: 1.625;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;  /* Button labels, logo */
  --tracking-wider:  0.1em;

  /* ─── SPACING ────────────────────────────────────────────────── */
  --space-unit:    6px;
  --space-1:       6px;
  --space-2:       12px;
  --space-3:       18px;
  --space-4:       24px;
  --space-5:       30px;
  --space-6:       36px;
  --space-8:       48px;
  --space-10:      60px;
  --space-12:      72px;
  --space-16:      96px;

  /* ─── SHADOWS ────────────────────────────────────────────────── */
  --shadow-sm:     0 2px 4px 0 rgba(0,0,0,0.05);
  --shadow-md:     0 2px 4px 0 rgba(0,0,0,0.10);
  --shadow-lg:     0 8px 16px 0 rgba(0,0,0,0.30);
  --shadow-card:   0 0 50px 0 rgba(0,0,0,0.10);
  --shadow-btn:    0 4px 8px 0 rgba(0,0,0,0.10);
  --shadow-filter: 0 4px 16px 0 rgba(0,0,0,0.20);
  --shadow-panel:  0px 14px 24px 0px rgba(0,0,0,0.25);
  --shadow-modal:  0px 4px 14px 0px rgba(0,0,0,0.35);

  /* ─── BORDERS & RADIUS ───────────────────────────────────────── */
  --radius-none:   0px;
  --radius-sm:     2px;   /* default — very sharp */
  --radius-md:     4px;   /* cards, panels, buttons */
  --radius-lg:     6px;   /* inputs */
  --radius-xl:     8px;   /* thumbnails, gallery images */
  --radius-full:   9999px; /* pills, avatars — use 50% for circles */

  /* ─── TRANSITIONS ────────────────────────────────────────────── */
  --transition-fast:   ease-in-out 0.1s;
  --transition-normal: ease-in 0.2s;

  /* ─── LAYOUT ─────────────────────────────────────────────────── */
  --topbar-height:         60px;
  --topbar-height-desktop: 72px;
  --content-max-width:     1056px;
  --page-max-width:        1120px;
  --page-padding:          32px;
}


/* ─── SEMANTIC TYPE CLASSES ──────────────────────────────────── */

.sg-hero {
  font-family: var(--font-display);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  color: var(--color-contrast);
}

.sg-h1 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-h1);
  line-height: 1.0;
  letter-spacing: 1px;
  color: var(--color-contrast);
}

.sg-h2 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: 0.5px;
  color: var(--color-contrast);
}

.sg-h3 {
  font-family: var(--font-ui);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-h3);
  line-height: 1.25;
  color: var(--color-contrast);
}

.sg-h4 {
  font-family: var(--font-ui);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-h4);
  line-height: 1.3;
  color: var(--color-contrast);
}

.sg-h5 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-h5);
  line-height: 1.0;
  letter-spacing: 1px;
  color: var(--color-contrast);
}

.sg-body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--colorGrey700);
}

.sg-body-small {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-small);
  line-height: var(--leading-normal);
  color: var(--colorGrey700);
}

.sg-caption {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--colorGrey500);
}

.sg-label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-xs);
  line-height: 18px;
  letter-spacing: 0.02em;
  color: var(--colorGrey700);
}

.sg-btn-label {
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-body);
  line-height: 1.0;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: inherit;
}

/* ─── BUTTON BASE STYLES ─────────────────────────────────────── */
.sg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 16px 24px;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-body);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sg-btn-primary {
  background-color: var(--color-primary);
  color: var(--color-surface);
}
.sg-btn-primary:hover {
  background-color: var(--color-accent);
  box-shadow: var(--shadow-btn);
}

.sg-btn-black {
  background-color: var(--color-contrast);
  color: var(--color-surface);
}
.sg-btn-black:hover {
  background-color: #1a1a1a;
  box-shadow: var(--shadow-btn);
}

.sg-btn-secondary {
  background-color: var(--color-surface);
  color: var(--colorGrey700);
  border: 1px solid var(--colorGrey100);
}
.sg-btn-secondary:hover {
  border-color: var(--colorGrey300);
  box-shadow: var(--shadow-btn);
}

.sg-btn-disabled {
  background-color: #AEAEAE;
  color: var(--color-surface);
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── INPUT BASE ─────────────────────────────────────────────── */
.sg-input {
  display: block;
  width: 100%;
  height: 64px;
  padding: 16px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--colorGrey700);
  transition: all var(--transition-fast);
  outline: none;
}
.sg-input:hover   { border-color: var(--color-border-hover); }
.sg-input:focus   { border-color: var(--color-border-focus); box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 0.25); }
.sg-input::placeholder { color: var(--colorGrey300); }

/* ─── CARD BASE ──────────────────────────────────────────────── */
.sg-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* ─── FILTER CHIP ────────────────────────────────────────────── */
.sg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--colorGrey700);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.sg-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-filter);
}
.sg-chip--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

/* ─── STAR RATING ────────────────────────────────────────────── */
.sg-stars { color: var(--color-primary); }

/* ─── AVATAR ─────────────────────────────────────────────────── */
.sg-avatar {
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  object-fit: cover;
  background: var(--colorGrey100);
}