/* =================================================================
   SURFACE: ZAG PIM Studio  (the operator web app)
   Repo of record: pioneerwork/project-zag @ main — frontend/src/index.css

   This file layers the PIM Studio accent, type scale, spacing, radii,
   shadows and motion on top of the shared brand layer. Colors that are
   common to every ZAG surface live in ../../brand/colors.css and are
   NOT redeclared here.

   Verified against project-zag@main on 2026-08-30. Deltas between this
   file and the live build are marked "LIVE:" inline — those are real
   divergences awaiting reconciliation, not typos.
   ================================================================= */

@import url("./zag-colors.css");

/* ---------- Webfonts ----------
   CDN here; the live product self-hosts these via Vite. If you fork this
   into a shipping build, swap to self-hosted woff2 — a hard performance
   requirement, and a privacy one for JP enterprise customers
   (zag-v2-operator/docs/PRIVACY.md §10 forbids any font request leaving
   the origin). Files are identical: Inter v4, Manrope v15, JBM v2.304. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  /* ===========================================
     ACCENT — aliases onto the brand AI signal.

     The purple->blue gradient is a BRAND-level token now: it means
     "a machine did this" on every ZAG surface, not just this one
     (DECISIONS.md S-2). These --accent-* names are kept because every
     component, preview card and the built bundle references them; they
     are aliases, not a second definition. Change the value in
     ../../brand/colors.css.

     The corporate brand color is --zag-blue #0014DF, also in the brand
     layer. This surface uses it for brand-equity moments (the wordmark,
     watermarks), not for chrome.
     =========================================== */
  --accent-purple:       var(--ai-purple);
  --accent-purple-600:   var(--ai-purple-600);
  --accent-blue:         var(--ai-blue);
  --accent-tint:         var(--ai-tint);
  --accent-tint-soft:    var(--ai-tint-soft);
  --accent-border:       var(--ai-border);

  --accent-gradient:     var(--ai-gradient); /* @kind color */
  --accent-gradient-h:   var(--ai-gradient-h); /* @kind color */
  --accent-gradient-hdr: var(--ai-gradient-hdr); /* @kind color */

  /* ===========================================
     SURFACES
     =========================================== */
  --bg-canvas:       #FFFFFF;
  --surface-sunken:  #F8F9FA;  /* tab body, chat scroll, input bg */
  --surface-hover:   #F4F6FA;  /* row / nav hover */
  /* LIVE: project-zag@main paints `body { background-color: #F2F3F7 }` and
     uses #F8F9FA for row hover. This file keeps the documented values;
     DECISIONS.md D-3 tracks the reconciliation. */

  /* ===========================================
     FILL SOURCE-KIND CELL TINTS
     Deliberately very desaturated — the fill grid is dense and these are
     cell BACKGROUNDS, read at a glance to show where a value came from.
     =========================================== */
  --src-exact:      #FFFFFF;
  --src-alias:      #F0F5FF;
  --src-ai:         #FFF8EE;
  --src-transform:  #FFFBE8;
  --src-constant:   #F7F7F2;
  --src-missing:    #FEF1EE;

  /* ===========================================
     TYPOGRAPHY
     Inter is the workhorse; Manrope handles display sizes (page titles,
     stat values); JetBrains Mono carries every "machine value" — SKUs,
     UPCs, raw column headers, file sizes, cost numbers, token counts.

     LIVE DELTA: project-zag@main sets `body { font-family: "Manrope",
     "Inter", ... }` — Manrope first, at every size — and a 15px root with
     0.9375rem body (~14px), 0.8125rem for p/li (~13px). This file keeps
     the Inter-first / 13.5px system the design docs specify. One of the
     two has to give; DECISIONS.md D-3.

     JAPANESE: the app runs bilingual (en/ja). Elements carrying JP text
     get lang="ja", which switches to Noto Sans JP and enables
     font-feature-settings: "palt". That rule lives in the live build and
     is reproduced at the bottom of this file. */
  --font-sans:    "Inter", "Manrope", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --font-display: "Manrope", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale (matches §2 of P6 design system) */
  --fs-display-l:  26px;       /* big stat value */
  --fs-display-m:  22px;       /* page title (h1) */
  --fs-display-s:  20px;       /* strip stat value */
  --fs-h2:         14px;       /* card title */
  --fs-body:       13.5px;     /* body */
  --fs-body-s:     12.5px;     /* table cell */
  --fs-label:      10.5px;     /* uppercase eyebrow */
  --fs-meta:       11.5px;     /* meta / caption */
  --fs-mono:       12px;       /* inline mono (sku / upc) */
  --fs-mono-micro: 10px;       /* raw column header */

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-label:   0.06em;

  /* ===========================================
     SPACING
     4px base; primary scale is 4/8/12/16/24/32/48.
     =========================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ===========================================
     RADII
     ZAG leans on soft-but-not-pillowy radii:
     - 4–6px for chips and inline elements
     - 8–10px for inputs, file icons, small cards
     - 12px for stat tiles & main cards
     - 16px for hero containers
     - 999px for pills, badges, segment controls
     =========================================== */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  10px;
  --radius-xl:  12px;
  --radius-2xl: 16px;
  --radius-pill: 999px;

  /* ===========================================
     SHADOWS / ELEVATION
     Cards are flat-with-border by default;
     elevation appears only on hover / overlays.
     =========================================== */
  --shadow-xs: 0 1px 0 rgba(15, 17, 23, 0.04);
  --shadow-sm: 0 1px 2px rgba(15, 17, 23, 0.06), 0 1px 0 rgba(15, 17, 23, 0.03);
  --shadow-md: 0 4px 12px rgba(15, 17, 23, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 17, 23, 0.12);
  --shadow-focus-purple: 0 0 0 4px rgba(122, 92, 255, 0.10);
  --shadow-focus-purple-strong: 0 0 0 4px rgba(122, 92, 255, 0.18);
  --shadow-glow-purple: 0 0 0 6px rgba(122, 92, 255, 0.18);

  /* ===========================================
     MOTION
     Quick and confident. No bouncy easing —
     this is enterprise software for operators.
     =========================================== */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    200ms; /* @kind other */
  --dur-slow:    320ms; /* @kind other */
}

/* =================================================================
   SEMANTIC ELEMENT RULES
   These give a sensible default look to raw HTML; components can
   override locally.
   ================================================================= */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--gray-900);
  background: var(--bg-canvas);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
  color: var(--gray-900);
  margin: 0;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.3;
  color: var(--gray-900);
  margin: 0;
}

h3 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--gray-800);
  margin: 0;
}

p {
  font-size: var(--fs-body);
  color: var(--gray-700);
  margin: 0;
  text-wrap: pretty;
}

small, .meta {
  font-size: var(--fs-meta);
  color: var(--gray-500);
}

.label, .eyebrow {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gray-500);
}

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  color: var(--gray-800);
}

.mono-micro {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-micro);
  font-weight: 400;
  color: var(--gray-500);
}

.stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  color: var(--gray-900);
}

a {
  color: var(--accent-purple-600);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}

a:hover {
  color: var(--accent-purple);
}

/* =================================================================
   JAPANESE TEXT
   Reproduced from project-zag@main/frontend/src/index.css. Any element
   whose content is Japanese must carry lang="ja" (or .lang-ja): it
   switches to a JP-first stack and turns on proportional kana metrics.
   Without it, JP text renders in Inter's fallback and the spacing is
   visibly wrong to a native reader.
   ================================================================= */
[lang="ja"], .lang-ja {
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo",
               "Inter", "Manrope", system-ui, sans-serif;
  font-feature-settings: "palt";
}

/* Machine values stay mono even inside JP text — a 品番 is still a
   machine value. JetBrains Mono has no JP coverage, so the JP fallback
   is explicit rather than accidental. */
[lang="ja"] code, [lang="ja"] .mono, .lang-ja .mono {
  font-family: "JetBrains Mono", "Noto Sans JP", "Hiragino Sans", monospace;
}