/* ════════════════════════════════════════════════════════════════════════════
   MAIN.CSS - Design System Tokens + Base Styles
   RealSEOLife.com - Content Lab
   rsl-design v2: Dark Library (forest green) + Cream Editorial
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Roboto:wght@200;300;400&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;1,8..60,300&display=swap');

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

  /* ── Dark Library (header, hero sections, footer, CTA blocks) ───────────── */
  --dark-bg:           #0d1f0e;
  --dark-surface:      #142816;
  --dark-border:       #1e3d20;
  --dark-rule:         #2a4a2c;
  --dark-text:         #f0ead6;
  --dark-text-muted:   #a89b7a;
  --dark-text-faint:   #6b6048;

  /* ── Gold Accent (shared across both modes) ─────────────────────────────── */
  --gold-primary:      #c9a84c;
  --gold-muted:        #9e7e35;
  --gold-faint:        #5c4a1e;

  /* ── Cream Editorial (body, content, cards) ─────────────────────────────── */
  --cream-bg:          #ffffff;
  --cream-surface:     #faf9f5;
  --cream-hover:       #f8f7f3;
  --cream-border:      #e8e6df;
  --cream-border-mid:  #d3d1c7;
  --ink-primary:       #1a1a18;
  --ink-secondary:     #2c2c2a;
  --ink-tertiary:      #444441;
  --ink-muted:         #5f5e5a;
  --ink-faint:         #888780;
  --ink-ghost:         #b4b2a9;

  /* ── Badge Colors ───────────────────────────────────────────────────────── */
  --badge-live-bg:     #eaf3de;
  --badge-live-text:   #3b6d11;
  --badge-live-border: #b8d9a2;
  --badge-soon-bg:     #f1efe8;
  --badge-soon-text:   #888780;
  --badge-soon-border: #d3d1c7;
  --badge-new-bg:      #fdf3db;
  --badge-new-text:    #7a5a10;
  --badge-new-border:  #e8c96a;

  /* ── Backward-Compatible Color Vars (default = cream editorial) ─────────── */
  --color-bg:              var(--cream-bg);
  --color-surface:         var(--cream-surface);
  --color-panel:           var(--cream-hover);
  --color-panel-raised:    #f5f4f0;
  --color-border:          var(--cream-border);
  --color-border-subtle:   var(--cream-border-mid);
  --color-text-primary:    var(--ink-primary);
  --color-text-secondary:  var(--ink-secondary);
  --color-text-muted:      var(--ink-muted);
  --color-accent-blue:     #2a4a7a;
  --color-accent-violet:   var(--gold-primary);
  --color-premium-gold:    var(--gold-primary);
  --color-gold-muted:      var(--gold-muted);
  --color-available:       #3b6d11;
  --color-reserved:        var(--gold-primary);
  --color-sold:            var(--ink-faint);

  /* Glow / border accent values (adjusted for cream context) */
  --glow-blue:             rgba(42, 74, 122, 0.08);
  --glow-gold:             rgba(201, 168, 76, 0.14);
  --glow-violet:           rgba(201, 168, 76, 0.10);
  --border-blue:           rgba(42, 74, 122, 0.28);
  --border-gold:           rgba(201, 168, 76, 0.36);
  --border-violet:         rgba(201, 168, 76, 0.28);

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-sans:     'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-display:  'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:     'IBM Plex Mono', 'Courier New', 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 */
  --text-7xl:  4.5rem;      /* 72px */

  /* Font weights */
  --weight-extralight: 200;
  --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.85;

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

  /* Spacing scale */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-7:   1.75rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* 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 - lighter for cream context */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl:   0 16px 48px rgba(0,0,0,0.16);

  /* Layout */
  --max-width:       1220px;
  --sidebar-width:   300px;
  --header-height:   72px;
  --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-relaxed);
  color: var(--ink-secondary);
  background-color: var(--cream-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1 { font-size: var(--text-4xl);  font-weight: var(--weight-extralight); }
h2 { font-size: 2.0625rem;         font-weight: var(--weight-light); }
h3 { font-size: var(--text-2xl);  font-weight: var(--weight-regular); }
h4 { font-size: var(--text-xl);   font-weight: var(--weight-regular); }
h5 { font-size: var(--text-lg);   font-weight: var(--weight-regular); }
h6 { font-size: var(--text-base); font-weight: var(--weight-regular); }

/* ── Unified page header - applied across all content + archive templates ─── */
.page-header__title {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: var(--weight-extralight);
  line-height: var(--leading-tight);
  max-width: 880px;
  margin-bottom: var(--space-4);
}

.page-header__lead {
  font-size: calc(var(--text-xl) * 1.5);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  color: var(--ink-tertiary);
  line-height: var(--leading-snug);
  max-width: 680px;
  margin-bottom: var(--space-6);
  border-left: 2px solid var(--gold-primary);
  padding: var(--space-3) 0 var(--space-3) var(--space-5);
}

@media (max-width: 768px) {
  .page-header__title { font-size: var(--text-3xl); }
  .page-header__lead  { font-size: var(--text-xl); }
}

p {
  font-family: var(--font-sans);
  color: var(--ink-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(--ink-primary); }

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

ul, ol {
  padding-left: var(--space-5);
  color: var(--ink-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-mono);
  font-size: 11px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.12em;
  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);
  text-decoration: none;
  white-space: nowrap;
}

/* Primary - dark fill on cream pages */
.btn--primary {
  background: var(--ink-primary);
  border-color: var(--ink-primary);
  color: var(--cream-bg);
}
.btn--primary:hover {
  background: var(--dark-bg);
  border-color: var(--dark-bg);
  color: var(--gold-primary);
}

/* Secondary - gold outline */
.btn--secondary {
  background: transparent;
  border-color: var(--gold-primary);
  color: var(--gold-primary);
}
.btn--secondary:hover {
  background: #f5f0e8;
  border-color: #f5f0e8;
  color: var(--dark-bg);
}

/* Ghost - text only */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-muted);
  padding-left: 0;
  padding-right: 0;
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
}
.btn--ghost:hover { color: var(--ink-primary); }

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

/* ── Chips & Tags ─────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--space-3);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--transition-fast);
  cursor: default;
}

.chip--default {
  background: var(--cream-surface);
  border: 1px solid var(--cream-border-mid);
  color: var(--ink-muted);
  margin: 3px 2px;
}
.chip--default:hover { background: var(--cream-hover); cursor: pointer; }

.chip--gold {
  background: var(--badge-new-bg);
  border: 1px solid var(--badge-new-border);
  color: var(--badge-new-text);
}

.chip--violet {
  background: var(--cream-surface);
  border: 1px solid var(--cream-border-mid);
  color: var(--ink-muted);
}

.chip--neutral {
  background: var(--cream-surface);
  border: 1px solid var(--cream-border);
  color: var(--ink-faint);
}

/* Status chips */
.chip--available { background: var(--badge-live-bg); border: 1px solid var(--badge-live-border); color: var(--badge-live-text); }
.chip--reserved  { background: var(--badge-new-bg);  border: 1px solid var(--badge-new-border);  color: var(--badge-new-text); }
.chip--sold      { background: var(--cream-surface);  border: 1px solid var(--cream-border);      color: var(--ink-faint); }

.chip--xs {
  padding: 1px var(--space-2);
  font-size: 9px;
  letter-spacing: 0.04em;
}

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

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

.panel--surface { background: var(--cream-bg); }
.panel--raised  { background: var(--cream-hover); border-color: var(--cream-border-mid); }

/* ── View Count ───────────────────────────────────────────────────────────── */
.art-meta__views,
.cs-meta__views,
.stat-header__views,
.concept-header__views {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.concept-header__views { margin-top: var(--space-2); }

/* ── Section Labels ───────────────────────────────────────────────────────── */
.section-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-3);
}

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

/* ── CTA Block (reusable dark panel) ─────────────────────────────────────── */
.cta-block {
  background: var(--dark-bg);
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
  text-align: center;
  margin: var(--space-12) 0;
}

.cta-block--premium {
  background: var(--dark-bg);
  border-color: var(--dark-border);
  border-top: 2px solid var(--gold-primary);
}

.cta-block__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dark-text-faint);
  margin-bottom: var(--space-3);
}

.cta-block__heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--dark-text);
  margin-bottom: var(--space-3);
}

.cta-block__body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  font-style: italic;
  color: var(--dark-text-muted);
  max-width: 480px;
  margin: 0 auto var(--space-6);
  line-height: var(--leading-relaxed);
}

.cta-block__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* Button variant on dark CTA block */
.cta-block .btn--primary {
  background: var(--dark-text);
  border-color: var(--dark-text);
  color: var(--dark-bg);
}
.cta-block .btn--primary:hover {
  background: var(--gold-primary);
  border-color: var(--gold-primary);
  color: var(--dark-bg);
}
.cta-block .btn--ghost {
  color: var(--dark-text-muted);
}
.cta-block .btn--ghost:hover {
  color: var(--dark-text);
}

/* ── 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(--ink-muted); }
.text-secondary  { color: var(--ink-secondary); }
.text-gold       { color: var(--gold-primary); }
.text-blue       { color: var(--color-accent-blue); }
.text-sm         { font-size: var(--text-sm); }
.text-xs         { font-size: var(--text-xs); font-family: var(--font-mono); }
.font-semibold   { font-weight: var(--weight-semibold); }
.font-bold       { font-weight: var(--weight-bold); }
.uppercase       { text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--font-mono); }

/* ── Related Items ────────────────────────────────────────────────────────── */
.related-items__heading {
  margin-top: 0.1875rem;
  margin-bottom: 0.1875rem;
}