/* IntoChat — Color tokens
 * Warm paper + warm ink, one electric accent, purposeful status colors.
 * Status colors map to real product microcopy: Working = amber, Done/Connected = green.
 */

:root {
  /* ---- Base neutrals (warm) ---- */
  --ink-900: #17140F; /* primary text, strong borders, ink surfaces */
  --ink-800: #2A251E;
  --ink-700: #423B31;
  --ink-600: #5E554A;
  --ink-500: #7C7264; /* muted text */
  --ink-400: #9C9182;
  --ink-300: #C2B9AB;
  --ink-200: #E4DFD5; /* hairline borders */
  --ink-100: #F0ECE4;
  --ink-50:  #F7F4EE;

  --paper:      #FBFAF7; /* app / page background (warm off-white) */
  --paper-sunk: #F2EFE9; /* recessed wells, muted panels */
  --surface:    #FFFFFF; /* raised cards */
  --white:      #FFFFFF;

  /* ---- Accent (electric blue — action, links, focus) ---- */
  --accent-700: #1541C7;
  --accent-600: #1F5EFF; /* primary accent */
  --accent-500: #4B7DFF;
  --accent-300: #A9C1FF;
  --accent-100: #E7EEFF; /* tint fills */
  --accent-050: #F2F6FF;

  /* ---- Status: green = done / connected / positive ---- */
  --green-700: #0B7A3D;
  --green-600: #12A150;
  --green-300: #8FE0AF;
  --green-100: #E1F6EA;

  /* ---- Status: amber = working / in progress ---- */
  --amber-700: #B87708;
  --amber-600: #E8A317;
  --amber-300: #F6D28A;
  --amber-100: #FCF1DA;

  /* ---- Status: red = error / destructive ---- */
  --red-700: #B02418;
  --red-600: #E0402F;
  --red-300: #F3A99F;
  --red-100: #FCE7E3;

  /* ================= Semantic aliases ================= */

  /* Text */
  --text-strong:  var(--ink-900);
  --text-body:    var(--ink-800);
  --text-muted:   var(--ink-500);
  --text-subtle:  var(--ink-400);
  --text-inverse: var(--paper);
  --text-accent:  var(--accent-600);
  --text-link:    var(--accent-600);

  /* Surfaces */
  --surface-page:   var(--paper);
  --surface-card:   var(--surface);
  --surface-sunk:   var(--paper-sunk);
  --surface-ink:    var(--ink-900); /* inverted dark sections */
  --surface-accent: var(--accent-600);

  /* Borders */
  --border-hairline: var(--ink-200);
  --border-strong:   var(--ink-900);
  --border-accent:   var(--accent-600);
  --border-input:    var(--ink-300);

  /* Interactive / focus */
  --focus-ring: var(--accent-600);

  /* Chat semantics */
  --bubble-user-bg:   var(--ink-900);
  --bubble-user-text: var(--paper);
  --bubble-sys-bg:    var(--surface);
  --bubble-sys-text:  var(--ink-800);
  --bubble-sys-border: var(--ink-200);

  /* Status semantics */
  --status-working: var(--amber-600);
  --status-done:    var(--green-600);
  --status-error:   var(--red-600);
  --status-idle:    var(--ink-400);
}
/* IntoChat — Typography tokens
 * Families, weights, a display/text/mono scale, line-heights, tracking.
 */

:root {
  /* Families */
  --font-sans: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-black:   800;

  /* Type scale (root 16px) */
  --text-display-2xl: 5rem;    /* 80 — hero on large screens */
  --text-display-xl:  4rem;    /* 64 */
  --text-display-lg:  3.25rem; /* 52 */
  --text-display:     2.5rem;  /* 40 */
  --text-h1:          2rem;    /* 32 */
  --text-h2:          1.5rem;  /* 24 */
  --text-h3:          1.25rem; /* 20 */
  --text-body-lg:     1.125rem;/* 18 */
  --text-body:        1rem;    /* 16 */
  --text-body-sm:     0.875rem;/* 14 */
  --text-caption:     0.8125rem; /* 13 */
  --text-micro:       0.75rem; /* 12 — mono labels */

  /* Line-heights */
  --leading-tight:  1.04;  /* display */
  --leading-snug:   1.18;  /* headings */
  --leading-normal: 1.5;   /* body */
  --leading-relaxed: 1.65;

  /* Letter-spacing */
  --tracking-tight:  -0.03em; /* large display */
  --tracking-snug:   -0.015em;/* headings */
  --tracking-normal: 0em;
  --tracking-wide:   0.02em;
  --tracking-label:  0.08em;  /* mono uppercase labels */
}
/* IntoChat — Spacing & layout tokens (4px base) */

:root {
  --space-0: 0;
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem;  /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem;    /* 16 */
  --space-5: 1.25rem; /* 20 */
  --space-6: 1.5rem;  /* 24 */
  --space-8: 2rem;    /* 32 */
  --space-10: 2.5rem; /* 40 */
  --space-12: 3rem;   /* 48 */
  --space-16: 4rem;   /* 64 */
  --space-20: 5rem;   /* 80 */
  --space-24: 6rem;   /* 96 */
  --space-32: 8rem;   /* 128 */

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: 1.5rem;
  --section-y: 6rem;
}
/* IntoChat — Effects: radii, borders, shadows, motion */

:root {
  /* Radii — precise, moderate; chat bubbles are rounder/friendlier */
  --radius-xs:  6px;
  --radius-sm:  8px;
  --radius-md:  10px;  /* buttons */
  --radius-lg:  12px;  /* inputs */
  --radius-xl:  14px;  /* cards */
  --radius-2xl: 20px;  /* large panels */
  --radius-bubble: 18px; /* chat bubbles */
  --radius-pill: 999px;

  /* Border widths */
  --border-thin: 1px;
  --border-mid:  1.5px;
  --border-thick: 2px;

  /* Shadows — soft, low, warm-tinted (ink alpha) */
  --shadow-xs: 0 1px 2px rgba(23, 20, 15, 0.06);
  --shadow-sm: 0 1px 3px rgba(23, 20, 15, 0.07), 0 1px 2px rgba(23, 20, 15, 0.04);
  --shadow-md: 0 4px 12px rgba(23, 20, 15, 0.08), 0 1px 3px rgba(23, 20, 15, 0.05);
  --shadow-lg: 0 12px 32px rgba(23, 20, 15, 0.10), 0 4px 10px rgba(23, 20, 15, 0.05);
  --shadow-xl: 0 24px 60px rgba(23, 20, 15, 0.14), 0 8px 20px rgba(23, 20, 15, 0.06);

  /* Focus ring */
  --ring-width: 3px;
  --ring-color: rgba(31, 94, 255, 0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-med: 200ms; /* @kind other */
  --dur-slow: 340ms; /* @kind other */
}