/*
 * .brtr — Design Tokens
 * All CSS custom properties: colors, gradients, typography, spacing.
 * This is the single source of truth for the visual system.
 * Edit values here to change the entire site's look.
 */

:root {
  /* ── Page backgrounds ── */
  --bg:         #ece7df;
  --bg-el:      #f7f4ee;
  --bg-white:   #ffffff;
  --bg-view:    #fafaf8;

  /* ── Text scale (1 = darkest, 4 = lightest) ── */
  --text-1:     #1a1816;
  --text-2:     #5c5650;
  --text-3:     #8a8279;
  --text-4:     #b5b0a8;

  /* ── Borders ── */
  --border-1:   #d8d3cb;
  --border-t:   rgba(0,0,0,0.06);

  /* ── Gold palette ── */
  --gold:             #b8922e;
  --gold-text:        #8a6a18;
  --gold-dark:        #a08020;
  --gold-bg:          rgba(184,146,46,0.12);
  --gold-bg-light:    rgba(184,146,46,0.08);
  --gold-bg-strong:   rgba(184,146,46,0.15);
  --gold-border:      rgba(184,146,46,0.18);
  --gold-border-strong: rgba(184,146,46,0.25);
  --gold-glow:        rgba(184,146,46,0.06);

  /* ── Copper palette ── */
  --copper:           #a06830;
  --copper-text:      #8a5a20;
  --copper-bg:        rgba(160,104,48,0.12);
  --copper-bg-light:  rgba(160,104,48,0.06);
  --copper-bg-strong: rgba(160,104,48,0.15);
  --copper-border:    rgba(160,104,48,0.15);
  --copper-glow:      rgba(160,104,48,0.06);

  /* ── Silver palette ── */
  --silver:           #7a7a80;
  --silver-text:      #626268;
  --silver-bg:        rgba(122,122,128,0.1);
  --silver-bg-strong: rgba(122,122,128,0.12);

  /* ── Status colors ── */
  --status-online:    #34a853;
  --status-busy:      #e8a520;
  --status-offline:   #c4bfb7;

  /* ── CTA button (copper gradient) ── */
  --cta-gradient:     linear-gradient(135deg, #c08050 0%, #9a5e28 25%, #d09868 50%, #7e4e18 75%, #a87038 100%);
  --cta-border:       rgba(184,115,51,0.25);
  --cta-shadow:       0 2px 12px rgba(160,104,40,0.25);
  --cta-shadow-hover: 0 4px 20px rgba(160,104,40,0.35);
  --cta-text-shadow:  0 1px 2px rgba(0,0,0,0.2);

  /* ── Highlight box (punchline, tag-on state) ── */
  --highlight-bg:     linear-gradient(135deg, rgba(184,146,46,0.1) 0%, rgba(160,104,48,0.07) 100%);
  --highlight-border: rgba(184,146,46,0.18);
  --highlight-shadow: 0 0 20px rgba(184,146,46,0.06);

  /* ── Sidebar ── */
  --sidebar-bg:       linear-gradient(180deg, #f5f1ea 0%, #f0ece5 100%);

  /* ── Frame border gradient ── */
  --frame-border:     linear-gradient(180deg, rgba(184,146,46,0.25) 0%, rgba(184,146,46,0.08) 20%, rgba(0,0,0,0.04) 50%, rgba(0,0,0,0.02) 100%);
  --frame-shadow:     0 4px 30px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);

  /* ── Brand logo gradient ── */
  --logo-gradient:    linear-gradient(135deg, #c08050 0%, #9a5e28 30%, #d09868 55%, #7e4e18 80%, #a87038 100%);

  /* ── Typography ── */
  --font:     'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
  --brand:    'Instrument Serif', Georgia, serif;
  --heading:  'League Spartan', sans-serif;

  /* ── Layout ── */
  --wrap-max:     1436px;
  --wrap-pad:     78px;
  --frame-max:    1320px;
  --frame-pad:    60px;
  --sidebar-w:    210px;
  --nav-h:        72px;
}