/* ============================================
   Design Tokens — Ramble

   Layer 1: Primitives (raw values)
   Layer 2: Semantic (what components use)
   ============================================ */

/* --- Geist Pixel --- */
@font-face { font-family: 'Geist Pixel Square'; src: url('fonts/GeistPixel-Square.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Geist Pixel Grid'; src: url('fonts/GeistPixel-Grid.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Geist Pixel Circle'; src: url('fonts/GeistPixel-Circle.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Geist Pixel Triangle'; src: url('fonts/GeistPixel-Triangle.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Geist Pixel Line'; src: url('fonts/GeistPixel-Line.woff2') format('woff2'); font-display: swap; }

/* --- Layer 1: Primitives --- */
:root {
  /* Color */
  --white:    #fff;
  --black:    #0d0d0d;
  --gray-400: #999;
  --gray-800: #2a2a2a;
  --gray-900: #212121;
  --orange:   #fe470f;

  /* Type */
  --font: 'Plus Jakarta Sans', sans-serif;
  --text-base: 24px;
  --text-sm:   13px;
  --weight-regular: 400;
  --weight-medium:  500;
  --leading-tight:   1;
  --leading-relaxed: 1.3;
  --tracking-tight: -0.3px;

  /* Space */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-7: 56px;
  --sp-8: 64px;
  --sp-9: 72px;
  --sp-10: 80px;

  /* Size */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --btn-h:   48px;
  --content-w: 880px;
  --col-w:     440px;
  --radius-full: 9999px;
}

/* --- Layer 2: Semantic --- */
:root {
  --bg:           var(--black);
  --text:         var(--white);
  --text-muted:   var(--gray-400);
  --text-inverse: var(--black);
  --surface:      var(--gray-900);
  --border:       var(--gray-800);
  --accent:       var(--orange);

  --heading-size:     var(--text-base);
  --heading-weight:   var(--weight-medium);
  --heading-leading:  var(--leading-tight);
  --heading-tracking: var(--tracking-tight);

  --body-size:    var(--text-base);
  --body-weight:  var(--weight-regular);
  --body-leading: var(--leading-relaxed);

  --label-size:   var(--text-sm);
  --label-weight: var(--weight-medium);

  --gap-section: var(--sp-10);
  --gap-block:   var(--sp-4);
  --gap-element: var(--sp-2);
  --gap-inline:  var(--sp-1);
}

/* --- Light theme (uncomment / toggle when ready) ---
[data-theme="light"] {
  --bg:           var(--white);
  --text:         var(--black);
  --text-inverse: var(--white);
  --surface:      #f5f5f5;
  --border:       #e5e5e5;
}
*/