/* ============================================================
   PRIMATE — Color & Type Foundations
   "Frontend QA Just Evolved."
   Fonts loaded from Google Fonts CDN (exact families used in
   the Figma source: Inter, Geist Mono, Space Mono, Trispace).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Geist+Mono:wght@400;500;600&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Trispace:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND ---------- */
  --gold:            #EBBB36;   /* primary brand mark + primary buttons   */
  --gold-bright:     #F4CE56;   /* hover / highlight gold                 */
  --gold-amber:      #FDC617;   /* shadow / glow accents                  */
  --gold-mid:        #D29921;   /* gold strokes on dark                   */
  --gold-deep:       #714C05;   /* deep gold (gradient stop)              */
  --gold-deeper:     #5E470C;   /* deeper gold                            */
  --gold-ink:        #160D01;   /* near-black warm (gradient base)        */
  --on-gold:         #09090B;   /* text/icon sitting on a gold fill       */

  /* ---------- NEUTRALS (warm-tinted dark) ---------- */
  --bg:              #191918;   /* app + page canvas, sidebar             */
  --bg-card:         #121212;   /* cards, panels, tables                  */
  --bg-elevated:     #27272A;   /* inputs, hover rows, kbd                */
  --bg-elevated-2:   #3F3F46;   /* icon button / pressed surfaces         */
  --bg-row-alt:      #1c1c1b;   /* zebra row                              */

  --border:          #3A3A3A;   /* primary divider / card border          */
  --border-subtle:   rgba(255,255,255,0.10); /* hairline on dark          */
  --border-hover:    rgba(255,255,255,0.22); /* subtle control hover      */
  --border-faint:    rgba(255,255,255,0.06);

  --fg:              #FFFFFF;   /* primary text                           */
  --fg-secondary:    #B5B5B5;   /* secondary / descriptive text           */
  --fg-muted:        #A0A0A0;   /* de-emphasized                          */
  --fg-placeholder:  #A1A1AA;   /* placeholder text                       */
  --fg-faint:        #71717A;   /* labels, badge text, timestamps         */

  /* ---------- SEMANTIC ---------- */
  --success:         #238637;   /* passed / completed fill                */
  --success-fg:      #3FB950;
  --danger:          #EF4444;   /* failed / build error                   */
  --danger-bg:       rgba(239,68,68,0.10);
  --danger-border:   rgba(239,68,68,0.20);
  --info:            #3B82F6;   /* links / running                        */
  --neutral-badge-bg: rgba(113,113,123,0.10);
  --neutral-badge-bd: rgba(113,113,123,0.20);

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display: "Space Mono", "Geist Mono", ui-monospace, monospace; /* hero headline only */
  --font-accent:  "Trispace", "Geist Mono", monospace;                 /* rare label accent  */

  /* ---------- TYPE SCALE (px / line-height) ----------
     Sans (Inter) for everything UI; Mono (Geist Mono) for the
     wordmark, buttons, headings-as-labels, and code/hashes;
     Space Mono Bold for the single marketing hero headline.    */
  --t-hero:        700 72px/72px var(--font-display);  /* "UX Testing / Just Evolved" */
  --t-wordmark:    400 24px/32px var(--font-mono);     /* "Primate" logotype          */
  --t-display-mono:400 36px/32px var(--font-mono);     /* "Create an account"         */
  --t-h1:          500 30px/36px var(--font-sans);     /* page title (PR #35)         */
  --t-h2:          600 20px/28px var(--font-sans);     /* section heading "Summary"   */
  --t-h3:          500 16px/24px var(--font-sans);
  --t-body:        400 16px/24px var(--font-sans);     /* body copy                   */
  --t-body-sm:     400 14px/20px var(--font-sans);     /* table cells, secondary      */
  --t-label:       500 14px/20px var(--font-sans);     /* nav + form labels           */
  --t-caption:     400 12px/16px var(--font-sans);     /* timestamps, meta            */
  --t-badge:       500 12px/16px var(--font-sans);     /* badge text                  */
  --t-btn:         400 16px/24px var(--font-mono);     /* button label (Geist Mono!)  */
  --t-code:        400 14px/20px var(--font-mono);     /* commit hashes, code         */
  --t-eyebrow:     500 12px/16px var(--font-mono);     /* sidebar section labels      */

  /* ---------- RADII ---------- */
  --r-xs: 4px;    /* badge-on-rect, kbd, small chips      */
  --r-sm: 6px;    /* nav items, code/video frames         */
  --r-md: 8px;    /* buttons, inputs, cards, panels       */
  --r-lg: 12px;   /* large containers                     */
  --r-pill: 999px;/* pill badges, status dots, avatars    */

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ---------- ELEVATION ---------- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.40);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:  0 24px 64px rgba(0,0,0,0.55);
  --glow-gold:  0 0 0 1px rgba(235,187,54,0.30), 0 8px 28px rgba(253,198,23,0.18);
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS — opt in by adding class "primate"
   to a wrapper, or copy these rules into a kit.
   ============================================================ */
.primate {
  background: var(--bg);
  color: var(--fg);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
}
.primate h1 { font: var(--t-h1);   color: var(--fg); margin: 0; letter-spacing: -0.02em; }
.primate h2 { font: var(--t-h2);   color: var(--fg); margin: 0; }
.primate h3 { font: var(--t-h3);   color: var(--fg); margin: 0; }
.primate p  { font: var(--t-body); color: var(--fg-secondary); margin: 0; }
.primate code, .primate .mono { font: var(--t-code); color: var(--fg-secondary); }
.primate a  { color: var(--fg); text-decoration: none; }
.primate a:hover { color: var(--gold); }