/* ============================================================
   Stake — design tokens
   Pulled from /Volumes/DataArchive/stake/DESIGN.md
   Computed-style values from the live site (not estimates).
   ============================================================ */

:root {
  /* Surfaces — darkest → lightest */
  --surface-900: #13232D;            /* header / nav rail / deepest wells */
  --surface-800: #1A2E39;            /* page background */
  --surface-700: #2F4553;            /* raised panels, search bar — visibly lighter */
  --surface-600: #1A2C38;            /* cards, list rows — clearly darker than 700 */
  --surface-500: #395565;            /* secondary buttons, tabs */
  --surface-400: #4A6678;            /* hover lift */
  --overlay:     rgba(0, 0, 0, 0.32);
  --hairline:    rgba(255, 255, 255, 0.04);
  --hairline-2:  rgba(255, 255, 255, 0.08);

  /* Brand accents */
  --brand-blue:        #1475E1;
  --brand-blue-hover:  #2188F7;
  --brand-green:       #03E625;
  --brand-green-soft:  #00B821;
  --brand-gold:        #E8B341;
  --brand-purple:      #7C5CFF;
  --brand-red:         #E5484D;
  --brand-orange:      #E89C41;
  --brand-pink:        #E945A5;

  /* Text */
  --text-primary:  #F7FAFC;
  --text-muted:    #B1BAD3;
  --text-dim:      #8B95B0;
  --text-on-brand: #FFFFFF;

  /* Typography */
  /* Stake uses Proxima Nova; we use Inter as a near-identical free substitute
     in the prototype (same geometric grotesque feel, same metrics class). */
  --font-sans: "Inter", "Proxima Nova", ui-sans-serif, -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs:   0.75rem;     /* 12 */
  --text-sm:   0.875rem;    /* 14 */
  --text-base: 1rem;        /* 16 */
  --text-lg:   1.125rem;    /* 18 */
  --text-xl:   1.25rem;     /* 20 */
  --text-2xl:  1.75rem;     /* 28 */
  --text-3xl:  2rem;        /* 32 */
  --text-4xl:  2.5rem;      /* 40 */

  /* Radius */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-pill: 64px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.20), 0 1px 2px rgba(0,0,0,.12);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.20), 0 2px 4px -1px rgba(0,0,0,.12);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.20), 0 4px 6px -2px rgba(0,0,0,.10);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.40);
  --shadow-inset-top: inset 0 1px rgba(255,255,255,.04);
  --btn-shadow: var(--shadow-sm), var(--shadow-inset-top);

  /* Layout */
  --rail-w: 240px;            /* left rail width (desktop) */
  --rail-w-collapsed: 68px;
  --topbar-h: 60px;
  --tabbar-h: 72px;
  --content-max: 1480px;
  --gutter: 16px;
  --gutter-lg: 24px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 120ms;
  --t: 180ms;
  --t-slow: 280ms;

  color-scheme: dark;
}