/* ============================================================
   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);

  color-scheme: light;
}


/* ============================================================
   Dark theme — follows the OS setting. The ramps keep their ROLES
   (neutral-0 = card surface, neutral-50 = app canvas, neutral-900 =
   primary ink) so every semantic alias and component var downstream
   flips automatically; only literals that don't route through a ramp
   are restated.

   Graphite direction: unlike the light theme's cool blue cast, dark
   is a NEUTRAL near-black — the logo azure is the only color on the
   page, so accents, links, and status read instantly against the
   uncolored ground.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* --- Neutral ramp (role-preserving, graphite — no blue cast) --- */
    --neutral-0:   #17171a;  /* card surface */
    --neutral-25:  #141417;
    --neutral-50:  #0c0c0e;  /* app canvas — near-black graphite ground */
    --neutral-100: #1f1f23;  /* code / inline fill, sunken hovers */
    --neutral-200: #29292e;  /* hairline borders */
    --neutral-300: #3b3b43;
    --neutral-400: #55555e;  /* pending / disabled glyphs */
    --neutral-500: #98989f;  /* muted text */
    --neutral-700: #c9c9ce;
    --neutral-900: #ededef;  /* primary ink */

    /* --- Brand blue. Tints become dark washes; the azure itself is
       BRIGHTENED a step so it pops on the graphite ground: --blue-500
       lifts to #2b8af9 (focus ring / glyphs), the action blue lifts to
       #1a73e8 (white text 4.5:1 — the darker light-theme action blue
       reads dim here), and --blue-700 flips role to the HOVER blue,
       going LIGHTER on hover instead of sinking darker. */
    --blue-50:  #131f30;
    --blue-100: #182a44;
    --blue-200: #223a63;
    --blue-500: #2b8af9;
    --blue-600: #1a73e8;
    --blue-700: #4292f4;

    /* Text on wash / links need LIGHT blues on the dark ground (the
       light theme's darkened-azure text colors would sink). */
    --text-link:       #93c1fa;
    --text-link-hover: #aed3fb;
    --accent-ink:      #82b6f7;
    --accent-foreground: #82b6f7;

    /* --- Semantic washes / feedback surfaces. Status greens go light
       (the light theme's #17925b is murky as text on a dark wash). --- */
    --green-500: #45b881;
    --green-600: #45b881;
    --green-50:  #142a1f;
    --green-200: #234636;
    --red-50:    #2a1616;
    --red-200:   #532525;
    --red-700:   #f0a1a1;  /* error message text, light on dark */
    --amber-50:  #2b2015;
    --amber-300: #5c4426;
    --amber-700: #e0aa77;  /* approval title text, light on dark */

    /* --- Literal aliases that bypass the ramps --- */
    --text-faint:      #727279;
    --line-soft:       #1c1c20;
    --surface-sidebar: #111113;  /* a touch deeper than the card surface */
  }

  /* Elevation reads differently on a dark ground: shadows go heavier
     and tighter so raised surfaces still separate. */
  :root {
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.32);
    --shadow:       0 2px 6px rgba(0, 0, 0, 0.45), 0 8px 28px rgba(0, 0, 0, 0.55);
    --shadow-menu:  0 12px 40px rgba(0, 0, 0, 0.6);
    --shadow-drawer:0 20px 60px rgba(0, 0, 0, 0.65);
    --shadow-lg:    0 18px 50px rgba(0, 0, 0, 0.55);
  }
}


: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);
}