/* =========================================================
   Weave AI — Design Tokens
   colors_and_type.css
   Import this file at the top of any HTML asset.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Color: foundations ---------- */
  --ink: #11131A;            /* primary text, construction lines */
  --ink-2: #2A2E38;          /* secondary text */
  --ink-3: #5B6271;          /* tertiary / muted text */
  --ink-4: #8C93A1;          /* disabled / placeholder */

  --paper: #F4F0E6;          /* default cream surface */
  --paper-2: #FBF8F0;        /* raised card / panel surface */
  --paper-3: #FFFFFF;        /* highest-elevation surface, hover */

  --graphite: #1F232C;       /* Inventor-side dark chrome */
  --graphite-2: #2A2F3A;     /* dark hover */
  --graphite-3: #383E4B;     /* dark border */

  /* ---------- Color: accents ---------- */
  --amber: #E8633E;          /* annotation amber — primary action */
  --amber-2: #D45530;        /* amber hover */
  --amber-3: #B84620;        /* amber press */
  --amber-tint: #FBE8DF;     /* amber soft fill */

  --blueprint: #1E3A8A;      /* technical blue — datum, links */
  --blueprint-2: #2849A3;
  --blueprint-tint: #E4EAF7;

  /* ---------- Color: semantic ---------- */
  --success: #1F7A4C;
  --success-tint: #DCEFE3;
  --warning: #B47A00;
  --warning-tint: #F8EAC2;
  --danger: #B3261E;
  --danger-tint: #FADAD7;

  /* ---------- Color: lines & rules ---------- */
  --rule: rgba(17, 19, 26, 0.10);     /* 1px hairline borders */
  --rule-soft: rgba(17, 19, 26, 0.06);
  --rule-strong: rgba(17, 19, 26, 0.18);
  --grid: rgba(17, 19, 26, 0.04);     /* isometric grid overlay */

  /* dark equivalents */
  --rule-d: rgba(255, 255, 255, 0.10);
  --rule-d-soft: rgba(255, 255, 255, 0.06);
  --rule-d-strong: rgba(255, 255, 255, 0.18);

  /* ---------- Type: families ---------- */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ---------- Type: scale ---------- */
  --t-display:    clamp(2.75rem, 4.6vw + 1rem, 4.75rem); /* hero */
  --t-h1:         clamp(2rem, 2.4vw + 1rem, 2.75rem);
  --t-h2:         1.875rem;   /* 30px */
  --t-h3:         1.375rem;   /* 22px */
  --t-h4:         1.125rem;   /* 18px */
  --t-body:       1rem;       /* 16px */
  --t-body-sm:    0.875rem;   /* 14px */
  --t-caption:    0.8125rem;  /* 13px */
  --t-micro:      0.6875rem;  /* 11px */

  --lh-tight:     1.08;
  --lh-snug:      1.2;
  --lh-normal:    1.45;
  --lh-relaxed:   1.6;

  --tk-tight:     -0.02em;
  --tk-normal:    -0.005em;
  --tk-wide:      0.04em;
  --tk-mono:      -0.01em;

  /* ---------- Spacing scale (4px base) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- Radii ---------- */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-pill: 999px;

  /* ---------- Shadows (sparing) ---------- */
  --shadow-1: 0 1px 0 0 rgba(17, 19, 26, 0.04);
  --shadow-2: 0 4px 12px -2px rgba(17, 19, 26, 0.08), 0 1px 0 0 rgba(17, 19, 26, 0.04);
  --shadow-3: 0 24px 48px -12px rgba(17, 19, 26, 0.18), 0 2px 4px -1px rgba(17, 19, 26, 0.06);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --d-fast: 120ms;
  --d-norm: 180ms;
  --d-slow: 400ms;
  --d-draw: 600ms; /* dimension-line draw animation */

  /* ---------- Layout ---------- */
  --content-max: 1200px;
  --panel-w: 320px;
}

/* =========================================================
   Semantic element styles
   ========================================================= */

html, body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--paper);
  letter-spacing: var(--tk-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display, h1.display {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tk-tight);
  color: var(--ink);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tk-tight);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tk-tight);
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tk-normal);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--tk-normal);
}

p, .body {
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--ink-2);
  text-wrap: pretty;
}

.body-sm { font-size: var(--t-body-sm); line-height: var(--lh-normal); }
.caption { font-size: var(--t-caption); line-height: var(--lh-normal); color: var(--ink-3); }
.micro   { font-size: var(--t-micro); line-height: var(--lh-normal); color: var(--ink-3); letter-spacing: var(--tk-wide); text-transform: uppercase; font-weight: 500; }

/* Eyebrow label — small uppercase tag used above headings */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tk-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

/* Monospace — annotations, dimensions, code */
code, .mono, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: var(--tk-mono);
}

.dim {
  /* dimension callout — used in product UI and marketing */
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  color: var(--ink);
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* Links */
a {
  color: var(--blueprint);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--d-fast) var(--ease);
}
a:hover { color: var(--blueprint-2); }

/* Selection */
::selection {
  background: var(--amber-tint);
  color: var(--ink);
}

/* Focus */
:focus-visible {
  outline: 2px solid rgba(30, 58, 138, 0.6);
  outline-offset: 2px;
  border-radius: var(--r-md);
}

/* Hairline rule */
hr, .rule {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: var(--s-5) 0;
}

/* Isometric paper grid utility — applies a faint construction grid */
.paper-grid {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}