/* Just Rad Design — design tokens.
   Mirrors the design system bundle (just-rad-design-system-1d6d5586).
   Core principle: COOL color = STRUCTURE, WARM color = ACTION. Never mix roles.

   Fonts are loaded via <link> in index.html rather than @import so they
   don't block the CSSOM behind a second round trip. */

:root {
  /* ---- Warm neutral base ---- */
  --jr-bg:            #fcfbf7; /* card-inset background */
  --jr-surface:       #f6f5f1; /* card / surface */
  --jr-border:        #e6e3e1; /* borders / dividers */
  --jr-ink:           #252420; /* body text */
  --jr-muted:         #73706d; /* muted text */
  --jr-page:          #f3efe7; /* muted beige page background */

  /* ---- Structural accent — COOL. Links, node borders, system labels, focus rings. ---- */
  --jr-structure:       #04a5bb;
  --jr-structure-deep:  #00758f;
  --jr-structure-tint:  #d6ebef;

  /* ---- Action accent — WARM. CTAs and clickable actions ONLY. ---- */
  --jr-action:        #e1624f;
  --jr-action-light:  #fd8370;

  /* ---- Categorical fills — soft, desaturated. Node backgrounds. ---- */
  --jr-cat-1: #f5cab8;
  --jr-cat-2: #e2d5c7;
  --jr-cat-3: #d2a297;
  --jr-cat-4: #d9bda8;
  --jr-cat-5: #d6ebef;
  --jr-cat-green: #dde7d9;
  --jr-cat-clay:  #efd6cd;

  /* ---- Node border tones — boxes are white, colour-coded by their border ---- */
  --jr-bd-1:     #cf8d5f; /* terracotta */
  --jr-bd-2:     #b0936f; /* sand */
  --jr-bd-4:     #a07c54; /* tan */
  --jr-bd-5:     #04a5bb; /* cadet */
  --jr-bd-green: #6f8f78; /* sage */
  --jr-bd-clay:  #c2806a; /* clay */

  /* ---- Flow-step badge green — muted sage that sits with the warm neutrals ---- */
  --jr-flow-green:      #7e9b86;
  --jr-flow-green-deep: #5f7e6b;
  --jr-flow-green-hover:#4e6a59;

  /* ---- Semantic aliases ---- */
  --text-body:        var(--jr-ink);
  --text-muted:       var(--jr-muted);
  --text-link:        var(--jr-structure);
  --text-link-hover:  var(--jr-structure-deep);
  --surface-page:     var(--jr-page);
  --surface-card:     var(--jr-surface);
  --border-default:   var(--jr-border);
  --focus-ring:       var(--jr-structure);
  --cta:              var(--jr-action);
  --cta-hover:        var(--jr-action-light);
  --node-border:      var(--jr-structure);

  /* ---- Typography ---- */
  --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-body: var(--font-sans);
  --font-display: var(--font-sans);
  --font-system: var(--font-mono);

  /* Type scale (1.250 major-third, base 16px) */
  --text-xs:   0.75rem;   /* 12 — mono tags, captions */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 — body */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.563rem;  /* 25 */
  --text-2xl:  1.953rem;  /* 31 */
  --text-3xl:  2.441rem;  /* 39 */
  --text-4xl:  3.052rem;  /* 49 — display */

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-mono:   0.06em;
  --tracking-label:  0.08em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-display:  800;

  /* ---- Spacing scale (4px base) ---- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */

  /* ---- Radius — soft, rounded-rectangle node language ---- */
  --radius-sm:   4px;
  --radius-md:   8px;   /* nodes, inputs */
  --radius-lg:   12px;  /* cards */
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-width:      1px;
  --border-width-node: 1.5px;

  /* ---- Shadows — restrained, warm-tinted, never heavy ---- */
  --shadow-sm:    0 1px 2px rgba(37, 36, 32, 0.04);
  --shadow-md:    0 2px 8px rgba(37, 36, 32, 0.06);
  --shadow-focus: 0 0 0 3px rgba(4, 165, 187, 0.28);

  /* ---- Layout ---- */
  --container-max: 1080px;
  --reading-max:   680px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}