/* ============================================================================
   ErpAi — THEME + RESPONSIVE SYSTEM (the SSOT, D31 + D53)
   ----------------------------------------------------------------------------
   ONE place for design tokens + the centralized responsive system. Every page
   and component inherits this automatically — no per-screen, per-component work.

   Responsive strategy (modern best practice, researched):
     • FLUID type + space (Utopia/clamp) — every size scales smoothly between a
       360px phone and a 1920px display, then caps; one scale covers ALL widths
       (phone → 13"/15"/16"/27"/30"+). rem-based so it stays zoomable (a11y).
     • CONTAINER QUERIES — components adapt to THEIR container, not the viewport,
       so the same component is correct in a hero OR the narrow side-wizard.
     • INTRINSIC LAYOUT PRIMITIVES — container/stack/cluster/auto-grid/cover that
       reflow with no media queries.
   ============================================================================ */

:root {
    /* ── COLOR (Apple-minimal monochrome + restrained Crolle navy) ── */
    --bg: #ffffff;
    --surface: #fafafa;
    --surface-2: #f5f5f7;
    --ink: #1d1d1f;
    --ink-2: #6e6e73;
    --line: #d2d2d7;
    --accent: #1e3c72;
    --accent-ink: #16305c;

    /* ── TYPOGRAPHY ── */
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;

    /* FLUID type scale — clamp(min @360px, fluid, max @1920px). Set-and-forget. */
    --fs-xs:   clamp(0.750rem, 0.736rem + 0.064vw, 0.813rem);
    --fs-sm:   clamp(0.875rem, 0.861rem + 0.064vw, 0.938rem);
    --fs-base: clamp(1.000rem, 0.971rem + 0.128vw, 1.125rem);
    --fs-md:   clamp(1.125rem, 1.082rem + 0.192vw, 1.313rem);
    --fs-lg:   clamp(1.313rem, 1.240rem + 0.321vw, 1.625rem);
    --fs-xl:   clamp(1.563rem, 1.447rem + 0.513vw, 2.063rem);
    --fs-2xl:  clamp(1.875rem, 1.673rem + 0.897vw, 2.750rem);
    --fs-3xl:  clamp(2.250rem, 1.904rem + 1.538vw, 3.750rem);
    --fs-hero: clamp(1.875rem, 1.269rem + 2.692vw, 4.500rem); /* 30px @360 → 72px @1920 (fits small phones) */

    /* ── SPACING — FLUID scale (same clamp method) ── */
    --space-3xs: clamp(0.250rem, 0.236rem + 0.064vw, 0.313rem);
    --space-2xs: clamp(0.500rem, 0.471rem + 0.128vw, 0.625rem);
    --space-xs:  clamp(0.750rem, 0.692rem + 0.256vw, 1.000rem);
    --space-sm:  clamp(1.000rem, 0.885rem + 0.513vw, 1.500rem);
    --space-md:  clamp(1.500rem, 1.327rem + 0.769vw, 2.250rem);
    --space-lg:  clamp(2.250rem, 1.962rem + 1.282vw, 3.500rem);
    --space-xl:  clamp(3.000rem, 2.538rem + 2.051vw, 5.000rem);
    --space-2xl: clamp(4.500rem, 3.808rem + 3.077vw, 7.500rem);
    --space-3xl: clamp(6.000rem, 5.077rem + 4.103vw, 10.000rem);

    /* ── SHAPE / ELEVATION / MOTION ── */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-pill: 9999px;
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.06);
    --ease: cubic-bezier(0.33, 0, 0.1, 1);
    --dur: 260ms;

    /* ── LAYOUT ── */
    --container: 1120px;          /* content cap; centers + gutters beyond this (ultra-wide) */
    --container-narrow: 720px;    /* reading width (forms, prose) */
    --grid-min: 16rem;            /* auto-grid: min column before it wraps */

    /* ── HARD breakpoints (used sparingly — fluid + container queries come first) ── */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1366px;

    /* ── SHELL DESIGN SYSTEM (the workspace rhythm — set ONCE, consumed everywhere) ──
       Consistency is structural: every control is --ctrl, every toolbar is --bar-h, the
       panels resize within fixed min/max, the input bar caps at --compose-max. Change a
       token here and the whole shell updates — no per-element hand-tuning. */
    --ctrl: 32px;              /* one square interactive control (icon buttons · attach · send) */
    --ctrl-icon: 1rem;         /* the glyph inside a control */
    --bar-h: 44px;             /* one toolbar height — chat top bar AND wizard bar align across the seam */
    --rail-min: 220px;
    --rail-max: 360px;
    --wizard-min: 360px;
    --wizard-max: 720px;
    --compose-max: 820px;      /* chat column + input bar max width (centered on the canvas) — wider so the reply isn't a narrow strip */
    --canvas: var(--surface-2); /* the gray conversation/workspace canvas */
}

/* (H18-A) IBM Plex — the prototype's actual typeface, shipped LOCALLY (SIL OFL 1.1; no CDN dependency).
   Sans is the variable file (wght 100-700); Mono ships the two weights the shell uses. */
@font-face { font-family: 'IBM Plex Sans'; src: url('/fonts/IBMPlexSans-var.woff2') format('woff2'); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/IBMPlexMono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('/fonts/IBMPlexMono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

/* ── RESET + BASE ── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; } /* honor user zoom (a11y) */
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    min-height: 100svh;
}
/* (H15-C1) When the page IS the app shell, the shell owns the whole viewport: no document scrollbar; only the
   shell's own regions scroll (rail list, transcript, popovers). :has-scoped so marketing/docs pages keep flow. */
body:has(.shell) { overflow: hidden; height: 100dvh; min-height: 0; }
h1, h2, h3, h4, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

/* ============================================================================
   LAYOUT PRIMITIVES (intrinsically responsive — reuse everywhere, no media queries)
   ============================================================================ */

/* Centered, capped content column with fluid gutters — handles ultra-wide screens. */
.l-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-sm); }
.l-container--narrow { max-width: var(--container-narrow); }

/* Vertical rhythm: consistent spacing between stacked children. */
.l-stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-sm)); }

/* Horizontal group that wraps gracefully (toolbars, button rows, tag lists). */
.l-cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--space-xs)); align-items: center; }

/* Responsive grid with NO breakpoints: columns fit, wrap, and fill automatically. */
.l-grid { display: grid; gap: var(--grid-gap, var(--space-sm));
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min)), 1fr)); }

/* Full-viewport section (hero/empty states); svh handles mobile browser chrome. */
.l-cover { display: flex; flex-direction: column; min-height: 100svh; }

/* Section vertical padding (fluid). */
.l-region { padding-block: var(--space-2xl); }

/* Mark an element as a query container so descendants can use @container (D53). */
.l-cq { container-type: inline-size; }

/* ── ACCESSIBILITY ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }