/* ==========================================================================
   Redwood Design Tokens
   Oracle Redwood–aligned tokens for the APIO wireframe. Replaces the original
   "Sketchwood" lo-fi system. Inter as the closest open analogue to Oracle Sans.
   The token *names* are intentionally preserved (--ink, --paper, --shadow-sketch,
   etc.) so the existing inline-styled components continue to resolve without
   a wholesale rewrite — only the *values* change. A few new tokens
   (--border, --surface, --accent, --shadow-1/2/3) are added so the component
   sweep can replace heavy sketch borders with subtle Redwood lines.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     COLOR — Redwood neutral palette (warm whites, charcoal text, Oracle red
     accent used sparingly). Selection uses a soft blue rather than a yellow
     highlighter.
     -------------------------------------------------------------------------- */

  /* Page surfaces (backgrounds) */
  --paper:        #f5f4f1;   /* page background — Redwood warm canvas */
  --paper-dim:    #fafaf7;   /* raised surface (sidebar, modal header, drawer header) */
  --paper-edge:   #e3e0d7;   /* page edge / divider */

  /* Text (foregrounds) */
  --ink:          #161513;   /* primary text */
  --ink-2:        #3a3735;   /* secondary text */
  --ink-3:        #6e6a64;   /* tertiary — captions, helper text */
  --ink-4:        #9a958c;   /* placeholder, disabled */
  --ink-5:        #d6d3ca;   /* faintest — fine borders, low-contrast dividers */

  /* Surface + line tokens (NEW — these are the Redwood semantic primitives the
     component sweep targets. The legacy --ink references for borders get
     replaced with --border / --line to drop the heavy sketch stroke.) */
  --surface:      #ffffff;   /* card / panel base */
  --surface-dim:  #fafaf7;   /* subdued raised surface */
  --border:       #d6d3ca;   /* default 1px line */
  --border-strong:#aeaba2;   /* emphasised line */
  --line:         #e3e0d7;   /* divider / hairline */

  /* Brand + status (Redwood is restrained — accent only on interactive primary
     and on truly destructive/error signals) */
  --marker:       #c74634;   /* Oracle red — primary brand accent */
  --marker-2:     #a83b2b;   /* Oracle red, pressed/hover */
  --accent:       #0571c3;   /* link / focus blue */
  --accent-2:     #045a9c;   /* link hover */
  --highlight:    #dbe9f4;   /* selection / soft attention background */
  --redline:      #c74634;   /* annotation / error */
  --success:      #2c7a3f;
  --warning:      #b85e00;

  /* Semantic */
  --fg:           var(--ink);
  --fg-muted:     var(--ink-3);
  --fg-faint:     var(--ink-4);
  --bg:           var(--paper);
  --bg-raised:    var(--surface);
  --border-faint: var(--line);

  /* --------------------------------------------------------------------------
     TYPE — Inter as the open analogue to Oracle Sans. Same variable names
     (--font-sketch, --font-display) so existing JSX keeps resolving; the
     "sketch" font is now a clean sans, and "display" is Inter Tight (a
     slightly tighter variant for headers). Mono goes to JetBrains Mono.
     -------------------------------------------------------------------------- */

  --font-sketch:    "Inter", "Oracle Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display:   "Inter Tight", "Inter", "Oracle Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;

  /* Type scale — Redwood reads on screen at normal distance, so the scale
     is tighter than Sketchwood's "arm's length" sizing. */
  --fs-display: 36px;
  --fs-h1:      28px;
  --fs-h2:      22px;
  --fs-h3:      18px;
  --fs-body:    14px;
  --fs-small:   13px;
  --fs-caption: 12px;

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-body:    1.5;
  --lh-loose:   1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* --------------------------------------------------------------------------
     STROKE — Redwood uses hairlines almost everywhere; emphasis goes through
     weight + colour, not stroke thickness.
     -------------------------------------------------------------------------- */

  --stroke-hair:  1px;
  --stroke-thin:  1px;
  --stroke:       1px;
  --stroke-bold:  1.5px;
  --stroke-heavy: 2px;

  --radius-sm:   4px;
  --radius:      6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-pill: 999px;

  /* --------------------------------------------------------------------------
     SPACING — Redwood is dense but breathable. Same scale as before.
     -------------------------------------------------------------------------- */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;

  /* --------------------------------------------------------------------------
     ELEVATION — Redwood layered shadows (subtle). Legacy --shadow-sketch is
     remapped onto --shadow-1 so existing components inherit Redwood elevation
     without per-site changes.
     -------------------------------------------------------------------------- */

  --shadow-1:        0 1px 2px rgba(22,21,19,0.06), 0 1px 1px rgba(22,21,19,0.04);
  --shadow-2:        0 4px 10px rgba(22,21,19,0.08), 0 1px 2px rgba(22,21,19,0.06);
  --shadow-3:        0 12px 28px rgba(22,21,19,0.12), 0 4px 8px rgba(22,21,19,0.08);
  --shadow-focus:    0 0 0 3px rgba(5,113,195,0.25);

  /* Legacy aliases — keep these so existing inline styles referencing
     --shadow-sketch keep rendering, but in the Redwood register. */
  --shadow-sketch:    var(--shadow-1);
  --shadow-sketch-lg: var(--shadow-2);
  --shadow-paper:     var(--shadow-1);

  /* --------------------------------------------------------------------------
     LEGACY MOTIF TOKENS — kept as variables so anything still referencing
     them doesn't break, but their values are de-sketched into Redwood
     equivalents (no hatching, no dashed borders by default).
     -------------------------------------------------------------------------- */

  --dash-border:   1px solid var(--border);
  --hatch-fill:    linear-gradient(transparent, transparent);  /* no-op so background: var(--hatch-fill), var(--paper) still parses */
  --notebook-rule: linear-gradient(transparent, transparent);
  --grid-paper:    linear-gradient(transparent, transparent);
}

/* ==========================================================================
   Semantic element styles — Redwood defaults applied directly to tags
   so plain HTML reads correctly without classNames.
   ========================================================================== */

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sketch);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-h1); font-weight: var(--fw-semibold); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-body); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }

p {
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

small, .caption {
  font-size: var(--fs-caption);
  color: var(--ink-3);
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }

hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: var(--space-5) 0;
}

/* Legacy sketch-helpers — kept for compatibility, restyled to Redwood. */
.sketch-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-4);
  box-shadow: var(--shadow-1);
}

.sketch-box--dashed { border-style: solid; }
.sketch-box--hatch  { background: var(--surface-dim); }

.scribble {
  background-image: linear-gradient(transparent 65%, var(--highlight) 65%);
  padding: 0 2px;
}

.redline {
  color: var(--redline);
  font-family: var(--font-sketch);
  font-weight: var(--fw-semibold);
}

/* Focus ring — Redwood-style accessible focus. */
*:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}