/* ============================================================
   Irongrid Agents — Design tokens (canonical)
   Adopted from design/irongrid-design/tokens/*.css. The single
   source of truth for color ramps, spacing, radius, elevation,
   and type. Component vars (--canvas, --panel, --ink, …) are
   mapped onto these in css/style.css.
   ============================================================ */


:root {
  /* --- Neutral ramp -------------------------------------------------
     Cool, low-chroma grays for the modern airy theme. The app canvas is
     a light blueprint ground (#eaeef4), surfaces are pure white, ink is
     near-black with a faint blue cast. */
  --neutral-0:   #ffffff;
  --neutral-25:  #f9fafb;
  --neutral-50:  #eaeef4;  /* app canvas — airy cool ground */
  --neutral-100: #f1f4f9;  /* code / inline fill, sunken hovers */
  --neutral-200: #e3e8f0;  /* hairline borders */
  --neutral-300: #dcdde3;
  --neutral-400: #b6b8c1;  /* pending / disabled glyphs */
  --neutral-500: #64707e;  /* muted text */
  --neutral-700: #3a4350;
  --neutral-900: #1b2230;  /* primary ink (faint blue cast) */

  /* --- Brand blue (accent) ------------------------------------------
     Rebuilt around the Iron Grid Networks logo azure (#1880f8, measured
     from logo_color.png). Because #1880f8 is bright, white text on it is
     only 3.83:1 — below the 4.5:1 body-text bar. So the pure logo azure
     (--blue-500) is reserved for chrome/glyphs/highlights and the focus
     ring (graphical, ≥3:1), while --blue-600 (#1268d8, a ~14%-darker
     azure of the same hue) is the action colour that carries white text
     on buttons and user bubbles at 5.25:1. --blue-700 is the deep ink for
     text-on-wash. Tints are azure-derived washes for active rows /
     highlights. */
  --blue-50:  #eef5ff;   /* faint wash / soft hover */
  --blue-100: #dcebfe;   /* active session row / accent wash */
  --blue-200: #bcdcfd;   /* message border tint */
  --blue-500: #1880f8;   /* logo azure — focus ring, glyphs, highlights */
  --blue-600: #1268d8;   /* action accent (white text 5.25:1) — buttons, bubbles */
  --blue-700: #0f52ad;   /* accent ink / hover — text on wash (7.4:1 on white) */

  /* --- Microsoft sign-in ---------------------------------------------
     The dark neutral used for the "Sign in with Microsoft" button and,
     by convention, the primary Send action. */
  --ms-ink:      #2f2f2f;
  --ms-ink-soft: #3a3a3a;

  /* --- Semantic: success --------------------------------------------- */
  --green-500: #1f9d5f;  /* status dot (ok, refined) */
  --green-600: #17925b;  /* approve button (refined) */
  --green-50:  #e6f3ec;  /* success wash (online pill) */
  --green-200: #c6e3d3;  /* success border */

  /* --- Semantic: danger ---------------------------------------------- */
  --red-500: #dc2626;    /* status dot (fail) */
  --red-600: #c23b3b;    /* destructive button / error text (refined) */
  --red-700: #8f2f2f;    /* error message text */
  --red-50:  #fbecec;    /* error surface */
  --red-200: #eecaca;    /* error / deny outline border */

  /* --- Semantic: warning (approval) ----------------------------------
     Warm terracotta-orange — a calm "attention needed" that fits the
     steel palette without reading as alarm (and is not yellow). */
  --amber-700: #9a4f24;  /* approval title text */
  --amber-300: #e6c2a6;  /* approval border */
  --amber-50:  #f7efe6;  /* approval surface */

  /* ================================================================
     SEMANTIC ALIASES — reference these in components, not raw ramps.
     ================================================================ */

  /* Surfaces & canvas */
  --bg:            var(--neutral-50);
  --surface-card:  var(--neutral-0);
  --surface-sunken:var(--neutral-50);
  --surface-fill:  var(--neutral-100);
  --surface-sidebar: #f4f7fb;   /* sidebar panel — a touch cooler than white */

  /* Text */
  --text-primary:  var(--neutral-900);
  --text-muted:    var(--neutral-500);
  --text-faint:    #98a2b3;
  --text-on-accent:#ffffff;
  --text-link:     var(--blue-600);        /* 5.25:1 on white */
  --text-link-hover: var(--blue-700);

  /* Borders */
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --line-soft:     #eef1f7;
  --focus-ring:    var(--blue-500);        /* bright logo azure (graphical) */

  /* Accent
     --accent is the action colour (white text on it must pass 4.5:1) so it
     resolves to the darker azure --blue-600; --brand-azure keeps the pure
     logo azure #1880f8 for decorative fills / glyphs / mark tiles. */
  --accent:        var(--blue-600);
  --accent-hover:  var(--blue-700);
  --accent-ink:    var(--blue-700);
  --accent-wash:   var(--blue-100);
  --accent-soft:   var(--blue-50);
  --brand-azure:   var(--blue-500);

  /* Primary action — the trust-blue accent, matching the app's Send /
     sign-in / New-chat buttons. (--ms-ink is kept only for the
     Microsoft brand button chrome if ever needed.) */
  --action-primary:       var(--accent);
  --action-primary-hover: var(--accent-hover);

  /* Status */
  --status-ok:      var(--green-500);
  --status-fail:    var(--red-500);
  --status-pending: var(--neutral-400);

  /* Feedback surfaces */
  --success:        var(--green-600);
  --success-surface:var(--green-50);
  --success-border: var(--green-200);
  --danger:         var(--red-600);
  --danger-surface: var(--red-50);
  --danger-border:  var(--red-200);
  --danger-text:    var(--red-700);
  --warning-surface:var(--amber-50);
  --warning-border: var(--amber-300);
  --warning-text:   var(--amber-700);

  /* ================================================================
     BASECOAT / shadcn variables — the vendored Basecoat CSS
     (basecoat.cdn.min.css) reads these. Themed here to the brand
     blue / white palette so the first-loaded token sheet already
     carries the final values (no post-load re-theme, no flash).
     Vars the app also owns (--accent, --muted, --border, --card) are
     intentionally left to their app semantics defined above / in
     style.css, which win as the final value.
     ================================================================ */
  --background:         var(--neutral-0);
  --foreground:         var(--neutral-900);
  --card-foreground:    var(--neutral-900);
  --popover:            var(--neutral-0);
  --popover-foreground: var(--neutral-900);
  --primary:            var(--blue-600);
  --primary-foreground: #ffffff;
  --secondary:          var(--neutral-100);
  --secondary-foreground: var(--neutral-900);
  --muted-foreground:   var(--neutral-500);
  --accent-foreground:  var(--blue-700);
  --destructive:        var(--red-500);
  --input:              var(--neutral-200);
  --ring:               var(--blue-500);
  --sidebar:            var(--surface-sidebar);
  --sidebar-foreground: var(--neutral-900);
  --sidebar-primary:    var(--blue-600);
  --sidebar-accent:     var(--blue-100);
  --sidebar-border:     var(--neutral-200);
  --sidebar-ring:       var(--blue-500);
}


:root {
  /* --- Spacing scale ------------------------------------------------
     The app is built in rem increments; this is a normalized px scale
     that covers the real gaps (0.15rem–3rem) used in the chat UI. */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  12px;
  --space-6:  16px;
  --space-7:  20px;
  --space-8:  24px;
  --space-10: 32px;
  --space-12: 40px;
  --space-16: 56px;

  /* Common layout measures pulled from the app */
  --sidebar-width:   260px;   /* chat thread list */
  --thread-max:      820px;   /* message column max width */
  --container-max:   960px;   /* marketing / auth container */
  --header-height:   57px;    /* site header */

  /* --- Radius --------------------------------------------------------
     Generous, airy radii for the modern theme. */
  --radius-xs:   6px;   /* inline code */
  --radius-sm:   10px;  /* tool rows, small chips */
  --radius-md:   12px;  /* buttons, inputs, sidebar rows */
  --radius-lg:   18px;  /* composer, message bubbles, cards-in-chat */
  --radius-xl:   22px;  /* page cards */
  --radius-pill: 999px; /* suggestion chips */

  /* --- Elevation -----------------------------------------------------
     Soft, diffuse, low-opacity shadows with a cool ink cast — surfaces
     float gently on the airy canvas. Resting cards carry a subtle
     shadow; raised surfaces (composer) more; menus and modals clearly. */
  --shadow-none:  none;
  --shadow-sm:    0 1px 2px rgba(16, 23, 36, 0.05), 0 1px 3px rgba(16, 23, 36, 0.04);
  --shadow:       0 2px 6px rgba(16, 23, 36, 0.05), 0 8px 28px rgba(16, 23, 36, 0.08);
  --shadow-menu:  0 12px 40px rgba(16, 23, 36, 0.15);
  --shadow-drawer:0 20px 60px rgba(16, 23, 36, 0.18);
  --shadow-lg:    0 18px 50px rgba(16, 23, 36, 0.12);

  /* --- Motion --------------------------------------------------------
     Short, functional easing. No bounces; fades and simple slides. */
  --ease-standard: ease; /* @kind other */
  --ease-out:      cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --dur-fast:   0.18s; /* @kind other */
  --dur-base:   0.2s; /* @kind other */
  --spin-dur:   0.8s; /* @kind other */
  --pulse-dur:  1.2s; /* @kind other */
}


:root {
  /* --- Families ------------------------------------------------------
     The Iron Grid Networks brand type system (per irongrid.net): Raleway
     for headings, Roboto for body / UI. Both are vendored in css/fonts.css
     (no CDN); the system stack falls back before they load. */
  --font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  --font-heading: "Raleway", "Roboto", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  /* --- Type scale ----------------------------------------------------
     Compact, UI-first. Body sits at 15.2px (0.95rem) — the app default.
     Values are the real sizes used across the chat interface. */
  --text-2xs:  0.7rem;    /* 11.2px — labels, uppercase eyebrows */
  --text-xs:   0.75rem;   /* 12px   — tool args, chip meta */
  --text-sm:   0.8rem;    /* 12.8px — secondary UI, hints */
  --text-sm2:  0.85rem;   /* 13.6px — session links, settings */
  --text-base: 0.95rem;   /* 15.2px — body / messages (app default) */
  --text-md:   1.1rem;    /* 17.6px — brand wordmark, small headings */
  --text-lg:   1.4rem;    /* 22.4px — auth / page headings */
  --text-xl:   1.75rem;   /* 28px   — empty-state hero */
  --text-2xl:  2.25rem;   /* 36px   — marketing display */
  --text-3xl:  3rem;      /* 48px   — hero display */

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

  /* --- Line heights -------------------------------------------------- */
  --leading-tight:   1.2;
  --leading-snug:    1.4;
  --leading-normal:  1.5;   /* body default */
  --leading-relaxed: 1.6;   /* rendered prose */

  /* --- Letter spacing ------------------------------------------------ */
  --tracking-eyebrow: 0.04em; /* uppercase labels */
  --tracking-normal:  0;

  /* --- Semantic aliases ---------------------------------------------- */
  --text-body:    var(--text-base);
  --text-heading: var(--text-lg);
  --text-code:    var(--text-xs);
}