/* ============================================================
   Design Tokens — all CSS custom properties for nuez-website
   Source: sebastian/styles.css :root + body.dark-mode overrides
   ============================================================ */

:root {
  /* Colours */
  --bg:             #faf9f8;
  --surface:        #fff;
  --surface-muted:  #fafafa;
  --surface-hover:  #fdfdfd;
  --text:           #1a1a1a;
  --text-muted:     #888;
  --text-faint:     #bbb;
  --border:         #eee;
  --border-subtle:  #f0f0f0;
  --border-focus:   #1a1a1a;
  --accent:         #c8a87a;
  --accent-hover:   #b8924a;

  /* Spacing scale */
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  1.75rem;
  --space-xl:  3.5rem;

  /* Easing */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);

  /* Durations */
  --dur-fast: 0.2s;
  --dur-base: 0.3s;

  /* Card gradient opacity — differs by mode */
  --card-grad-opacity: 0.48;

  /* Lab chrome — hairlines + terminal comment + graph interior radial.
     Hairlines used by .lab-figure frame + .lab-listing
     borders. --comment replaces the dim-gray that read illegibly against
     #1a1a1a. --graph-int-* drives the soft warm radial inside .lab-figure-body
     for the J″ framed-figure treatment. Spec:
     docs/superpowers/specs/2026-05-10-lab-chrome-redesign.md */
  --hairline:    rgba(255,255,255,0.06);
  --hairline-2:  rgba(255,255,255,0.10);
  --comment:     hsl(var(--h, 38) 18% 55%);
  --graph-int-1: oklch(0.155 0.012 60);
  --graph-int-2: oklch(0.135 0.006 60);
}

/* Dark mode overrides */
body.dark-mode {
  --bg:             #111;
  --surface:        #1a1a1a;
  --surface-muted:  #161616;
  --surface-hover:  #202020;
  --text:           #e0e0e0;
  --text-muted:     #999;
  --text-faint:     #555;
  --border:         #333;
  --border-subtle:  #2a2a2a;
  --border-focus:   #e0e0e0;
  color: #e0e0e0 !important;
  --card-grad-opacity: 0.24;
}