/* ============================================================
   REBRANDLY — Colors & Type
   Editorial-boutique social media agency design system.
   ============================================================
*/

:root {
  /* ---------- COLOR — base ---------- */
  --rb-ivory:        #F5F1E8;
  --rb-ivory-soft:   #FBF8F1;
  --rb-ivory-deep:   #ECE6D7;
  --rb-ink:          #1A1815;
  --rb-ink-soft:     #2C2823;
  --rb-ink-mute:     #6B645A;
  --rb-ink-faint:    #A8A092;
  --rb-line:         #D9D2C2;
  --rb-line-soft:    #E8E2D3;

  /* ---------- COLOR — accents ---------- */
  --rb-sage:         #A8B5A0;
  --rb-sage-deep:    #6B7A60;
  --rb-sage-soft:    #D4DCC9;
  --rb-blush:        #E8C6BE;
  --rb-blush-deep:   #B8746A;
  --rb-blush-soft:   #F4DDD7;
  --rb-clay:         #C9A788;
  --rb-clay-deep:    #8B6B4F;

  /* ---------- COLOR — semantic ---------- */
  --rb-bg:           var(--rb-ivory);
  --rb-bg-elevated:  var(--rb-ivory-soft);
  --rb-bg-deep:      var(--rb-ivory-deep);
  --rb-fg:           var(--rb-ink);
  --rb-fg-soft:      var(--rb-ink-soft);
  --rb-fg-mute:      var(--rb-ink-mute);
  --rb-fg-faint:     var(--rb-ink-faint);
  --rb-fg-on-dark:   var(--rb-ivory);
  --rb-accent:       var(--rb-sage-deep);
  --rb-accent-2:     var(--rb-blush-deep);
  --rb-border:       var(--rb-line);
  --rb-border-soft:  var(--rb-line-soft);

  /* ---------- TYPE — families ---------- */
  --rb-font-display: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif;
  --rb-font-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --rb-font-sans:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --rb-font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ---------- TYPE — scale ---------- */
  --rb-text-xs:    12px;
  --rb-text-sm:    14px;
  --rb-text-base:  16px;
  --rb-text-md:    18px;
  --rb-text-lg:    22px;
  --rb-text-xl:   28px;
  --rb-text-2xl:  36px;
  --rb-text-3xl:  48px;
  --rb-text-4xl:  64px;
  --rb-text-5xl:  88px;
  --rb-text-6xl: 120px;

  /* ---------- TYPE — weights ---------- */
  --rb-w-light:    300;
  --rb-w-regular:  400;
  --rb-w-medium:   500;
  --rb-w-semi:     600;
  --rb-w-bold:     700;

  /* ---------- TYPE — leading & tracking ---------- */
  --rb-leading-tight:   1.05;
  --rb-leading-snug:    1.2;
  --rb-leading-normal:  1.45;
  --rb-leading-relaxed: 1.65;
  --rb-tracking-tight:  -0.02em;
  --rb-tracking-snug:   -0.01em;
  --rb-tracking-normal: 0;
  --rb-tracking-wide:   0.08em;
  --rb-tracking-wider:  0.16em;
  --rb-tracking-widest: 0.24em;

  /* ---------- SPACING ---------- */
  --rb-space-1:  4px;
  --rb-space-2:  8px;
  --rb-space-3:  12px;
  --rb-space-4:  16px;
  --rb-space-5:  24px;
  --rb-space-6:  32px;
  --rb-space-7:  48px;
  --rb-space-8:  64px;
  --rb-space-9:  96px;
  --rb-space-10:128px;

  /* ---------- RADII ---------- */
  --rb-radius-none: 0;
  --rb-radius-sm:   4px;
  --rb-radius-md:   8px;
  --rb-radius-lg:   16px;
  --rb-radius-xl:   24px;
  --rb-radius-pill: 999px;
  --rb-radius-full: 50%;

  /* ---------- SHADOWS ---------- */
  --rb-shadow-sm: 0 2px 12px rgba(26, 24, 21, 0.06);
  --rb-shadow-md: 0 12px 30px rgba(26, 24, 21, 0.10);
  --rb-shadow-lg: 0 24px 60px rgba(26, 24, 21, 0.12);
}

.rb-display { font-family: var(--rb-font-display); font-weight: var(--rb-w-regular); font-size: var(--rb-text-5xl); line-height: var(--rb-leading-tight); letter-spacing: var(--rb-tracking-tight); color: var(--rb-fg); }
.rb-h1 { font-family: var(--rb-font-display); font-weight: var(--rb-w-regular); font-size: var(--rb-text-4xl); line-height: var(--rb-leading-tight); letter-spacing: var(--rb-tracking-tight); color: var(--rb-fg); }
.rb-h2 { font-family: var(--rb-font-display); font-weight: var(--rb-w-regular); font-size: var(--rb-text-3xl); line-height: var(--rb-leading-snug); letter-spacing: var(--rb-tracking-snug); color: var(--rb-fg); }
.rb-h3 { font-family: var(--rb-font-serif); font-weight: var(--rb-w-medium); font-size: var(--rb-text-2xl); line-height: var(--rb-leading-snug); color: var(--rb-fg); }
.rb-h4 { font-family: var(--rb-font-sans); font-weight: var(--rb-w-semi); font-size: var(--rb-text-lg); line-height: var(--rb-leading-snug); letter-spacing: var(--rb-tracking-snug); color: var(--rb-fg); }
.rb-eyebrow { font-family: var(--rb-font-sans); font-weight: var(--rb-w-medium); font-size: var(--rb-text-xs); line-height: 1; letter-spacing: var(--rb-tracking-wider); text-transform: uppercase; color: var(--rb-fg-mute); }
.rb-body { font-family: var(--rb-font-sans); font-weight: var(--rb-w-regular); font-size: var(--rb-text-base); line-height: var(--rb-leading-relaxed); color: var(--rb-fg-soft); }
.rb-body-lg { font-family: var(--rb-font-sans); font-weight: var(--rb-w-regular); font-size: var(--rb-text-md); line-height: var(--rb-leading-relaxed); color: var(--rb-fg-soft); }
.rb-caption { font-family: var(--rb-font-sans); font-weight: var(--rb-w-regular); font-size: var(--rb-text-sm); line-height: var(--rb-leading-normal); color: var(--rb-fg-mute); }
.rb-wordmark { font-family: var(--rb-font-display); font-weight: var(--rb-w-regular); letter-spacing: var(--rb-tracking-wider); text-transform: uppercase; color: var(--rb-fg); }
.rb-code { font-family: var(--rb-font-mono); font-size: 0.92em; background: var(--rb-bg-deep); padding: 2px 6px; border-radius: 4px; color: var(--rb-fg); }