/* ════════════════════════════════════════════════════════════════════════════
   MAIN.CSS — Design System Tokens + Base Styles
   BuySEOWebsites.com — Digital Asset Cellar
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Design Tokens ────────────────────────────────────────────────────────── */
:root {

  /* Color palette */
  --color-bg:              #0A0D12;
  --color-surface:         #11161D;
  --color-panel:           #151C24;
  --color-panel-raised:    #1A2230;
  --color-border:          rgba(255, 255, 255, 0.07);
  --color-border-subtle:   rgba(255, 255, 255, 0.04);

  /* Text */
  --color-text-primary:    #F3F6FA;
  --color-text-secondary:  #A4B0BE;
  --color-text-muted:      #5E6E82;

  /* Accents */
  --color-accent-blue:     #46A7FF;
  --color-accent-violet:   #7C5CFF;
  --color-premium-gold:    #D6B25E;
  --color-gold-muted:      #A8893E;

  /* Status */
  --color-available:       #3ECF8E;
  --color-reserved:        #D6B25E;
  --color-sold:            #5E6E82;

  /* Glow values */
  --glow-blue:             rgba(70, 167, 255, 0.12);
  --glow-gold:             rgba(214, 178, 94, 0.08);
  --glow-violet:           rgba(124, 92, 255, 0.10);

  /* Border accent variants */
  --border-blue:           rgba(70, 167, 255, 0.28);
  --border-gold:           rgba(214, 178, 94, 0.32);
  --border-violet:         rgba(124, 92, 255, 0.28);

  /* Typography */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Type scale */
  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 1rem;        /* 16px */
  --text-md:   1.0625rem;   /* 17px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.25rem;     /* 20px */
  --text-2xl:  1.5rem;      /* 24px */
  --text-3xl:  1.875rem;    /* 30px */
  --text-4xl:  2.25rem;     /* 36px */
  --text-5xl:  3rem;        /* 48px */
  --text-6xl:  3.75rem;     /* 60px */

  /* Font weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold:800;

  /* Line heights */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.12em;

  /* Spacing scale */
  --space-1:   0.25rem;    /* 4px  */
  --space-2:   0.5rem;     /* 8px  */
  --space-3:   0.75rem;    /* 12px */
  --space-4:   1rem;       /* 16px */
  --space-5:   1.25rem;    /* 20px */
  --space-6:   1.5rem;     /* 24px */
  --space-7:   1.75rem;    /* 28px */
  --space-8:   2rem;       /* 32px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-16:  4rem;       /* 64px */
  --space-20:  5rem;       /* 80px */
  --space-24:  6rem;       /* 96px */

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.6);
  --shadow-xl:   0 16px 48px rgba(0,0,0,0.7);

  /* Layout */
  --max-width:         1220px;
  --sidebar-width:     300px;
  --header-height:     64px;
  --content-gap:       var(--space-8);
}

/* ── Base Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

p:last-child { margin-bottom: 0; }

a {
  color: var(--color-accent-blue);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover { color: var(--color-text-primary); }

strong { font-weight: var(--weight-semibold); color: var(--color-text-primary); }
em     { font-style: italic; }

ul, ol {
  padding-left: var(--space-5);
  color: var(--color-text-secondary);
}

li { margin-bottom: var(--space-2); line-height: var(--leading-relaxed); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}

/* Primary — gold fill */
.btn--primary {
  background: var(--color-premium-gold);
  border-color: var(--color-premium-gold);
  color: #0A0D12;
}
.btn--primary:hover {
  background: #e4c06e;
  border-color: #e4c06e;
  color: #0A0D12;
  box-shadow: 0 0 20px rgba(214, 178, 94, 0.3);
}

/* Secondary — blue outline */
.btn--secondary {
  background: transparent;
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}
.btn--secondary:hover {
  background: rgba(70, 167, 255, 0.08);
  color: var(--color-text-primary);
  box-shadow: 0 0 16px rgba(70, 167, 255, 0.15);
}

/* Ghost — no border, text only */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
  padding-left: 0;
  padding-right: 0;
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  font-size: var(--text-sm);
}
.btn--ghost:hover { color: var(--color-text-primary); }

/* Small modifier */
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
}

/* ── Chips & Tags ─────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: default;
}

.chip--default {
  background: rgba(70, 167, 255, 0.08);
  border: 1px solid rgba(70, 167, 255, 0.2);
  color: var(--color-accent-blue);
}
.chip--default:hover { background: rgba(70, 167, 255, 0.14); cursor: pointer; }

.chip--gold {
  background: rgba(214, 178, 94, 0.08);
  border: 1px solid rgba(214, 178, 94, 0.25);
  color: var(--color-premium-gold);
}

.chip--violet {
  background: rgba(124, 92, 255, 0.08);
  border: 1px solid rgba(124, 92, 255, 0.25);
  color: var(--color-accent-violet);
}

.chip--neutral {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* Status chips */
.chip--available { background: rgba(62, 207, 142, 0.08); border-color: rgba(62, 207, 142, 0.25); color: var(--color-available); }
.chip--reserved  { background: rgba(214, 178, 94, 0.08); border-color: rgba(214, 178, 94, 0.25); color: var(--color-reserved); }
.chip--sold      { background: rgba(94, 110, 130, 0.08); border-color: rgba(94, 110, 130, 0.25); color: var(--color-sold); }

/* Tag groups */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ── Panels & Surfaces ────────────────────────────────────────────────────── */
.panel {
  background: var(--color-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.panel--surface {
  background: var(--color-surface);
}

.panel--raised {
  background: var(--color-panel-raised);
}

/* ── Section headings ─────────────────────────────────────────────────────── */
.section-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

/* ── Dividers ─────────────────────────────────────────────────────────────── */
hr, .divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

/* ── Utility ──────────────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.text-muted      { color: var(--color-text-muted); }
.text-secondary  { color: var(--color-text-secondary); }
.text-gold       { color: var(--color-premium-gold); }
.text-blue       { color: var(--color-accent-blue); }
.text-sm         { font-size: var(--text-sm); }
.text-xs         { font-size: var(--text-xs); }
.font-semibold   { font-weight: var(--weight-semibold); }
.font-bold       { font-weight: var(--weight-bold); }
.uppercase       { text-transform: uppercase; letter-spacing: var(--tracking-wide); }