/* ==========================================================================
   MDGRUPPE OS — Polish CSS
   Session 2.5 (Polish Pass) — extends shell.css with craft-tier values.

   tokens.css is MD-locked (commit 0fb15a6). This file additively overrides
   a small set of tokens via cascade (loaded after tokens.css and shell.css)
   and INTRODUCES new variables that did not exist before. The intent is to
   raise the visual quality bar without touching the locked design system.

   Ref: CAT-BRIEF-2026-05-01-OSUX02_5_Polish_Pass + MD post-walkthrough
   feedback "the attention to details are not there yet."
   ========================================================================== */

:root {

  /* ── TYPE SCALE — modular ───────────────────────────────────
     Overrides tokens.css scale (xs=11/sm=12/body=13/prose=14/lg=16/
     xl=18/2xl=20/3xl=28). Lifted to a stricter modular grid for
     better hierarchy at desktop reading distance. tokens.css names
     --type-body and --type-prose remain valid; this file ALSO adds
     --type-base / --type-md as the canonical names going forward. */
  --type-xs:   12px;
  --type-sm:   13px;
  --type-base: 14px;
  --type-md:   16px;
  --type-lg:   20px;
  --type-xl:   24px;
  --type-2xl:  32px;
  --type-3xl:  40px;

  /* ── LINE HEIGHT ──────────────────────────────────────────── */
  --leading-tight:    1.2;
  --leading-snug:     1.35;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  /* ── LETTER SPACING ───────────────────────────────────────── */
  --tracking-tight:     -0.01em;
  --tracking-normal:     0;
  --tracking-wide:       0.04em;
  --tracking-uppercase:  0.08em;

  /* ── SHADOWS — whisper-light, layered ─────────────────────
     Overrides tokens.css single-layer shadows. Two-layer stacks
     create a softer, more "Apple/Linear/Stripe" feel at small
     elevations. Modal stays a 4-layer for premium overlay depth. */
  --shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:    0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-md:    0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg:    0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
  --shadow-modal: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 10px 10px -5px rgba(15, 23, 42, 0.04);

  /* ── MOTION ───────────────────────────────────────────────
     --duration-fast already exists in tokens.css at 150ms.
     polish.css ADDS --duration-base (the canonical "almost-default"
     for hover/focus) and --duration-slow (250ms — overrides the
     400ms in tokens.css, which was tuned for cross-fades not
     micro-interactions). --ease-out and --ease-in-out are NEW. */
  --duration-fast:  100ms;
  --duration-base:  150ms;
  --duration-slow:  250ms;
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ── WARM NEUTRALS — replaces any cool grays ──────────────
     New scale; consumers in shell.css and other files should
     prefer these over Tailwind-style cool grays. tokens.css's
     --color-* set is unchanged. */
  --warm-50:  #FAFAF9;
  --warm-100: #F5F5F4;
  --warm-200: #E7E5E4;
  --warm-300: #D6D3D1;
  --warm-400: #A8A29E;
  --warm-500: #78716C;
  --warm-600: #57534E;
  --warm-700: #44403C;
  --warm-800: #292524;
  --warm-900: #1C1917;

  /* ── RADII ────────────────────────────────────────────────
     New canonical names. tokens.css's --r-sm/--r/--r-lg/--r-xl/
     --r-full remain valid for legacy consumers. */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 9999px;

  /* ── SPACING — 4px base ───────────────────────────────────
     Identical to tokens.css spacing scale. Re-declared here for
     completeness; cascade is a no-op. */
  --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;

  /* ── GOLD ALIASES ────────────────────────────────────────
     Tokens.css exposes --color-warning (#C9920E, the brand gold).
     Components below request --color-gold-700 for the AI-OS
     sub-label. Alias for clarity. */
  --color-gold-700: var(--color-warning);
}

/* ==========================================================================
   Session 2.6 — Zero-as-error softening.
   A KPI showing 0 is GOOD news — overdue=0 is a target, not an alarm.
   The page authors used to hardcode style="color:#DC3545" inline which
   forced the value to render red regardless of magnitude. Now the colour
   is conditional: warm-800 default; red ONLY when value > 0 AND the
   metric is genuinely an alarm (overdue/missing/defect counts).
   The class is toggled by per-page JS based on numeric value.
   ========================================================================== */

.kpi-value,
.sc-total-value,
.radar-value {
  color: var(--warm-800);
}

.kpi-value-alert {
  color: var(--color-danger);
}

/* ──────────────────────────────────────────────────────────────
   VARIANT C — Apple Sidebar-Forward layout (OSUX02)
   Source: Journal #1091 (MD pick) after 3-option diagnostic #1090.
   These rules override shell.css for the new layout architecture.
   ────────────────────────────────────────────────────────────── */

/* Page title — overrides shell.css .page-title (var(--type-3xl)/28px)
   with Variant C 40px Gotham Medium presence. Applies to every page
   that uses a top-level .page-title h1; visual change is global. */
.page-title {
  font-family: 'Gotham Medium', 'Gotham', sans-serif;
  font-size: 40px;
  font-weight: 500;
  color: var(--warm-900);
  margin: 0 0 32px 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Persona welcome — top-LEFT aligned (was margin auto, centered).
   max-width 640 unchanged from shell.css; margin override is the
   actual delta. */
.persona-welcome {
  max-width: 640px;
  margin: 0;
}

/* Responsive — narrow viewport (<= 768px): page title shrinks,
   content padding tightens, welcome card spans full width. */
@media (max-width: 768px) {
  .os-content {
    padding: 32px 24px;
  }
  .page-title {
    font-size: 32px;
  }
  .persona-welcome {
    max-width: 100%;
  }
}

/* Responsive — tablet band (769-1024px): moderate padding. */
@media (max-width: 1024px) and (min-width: 769px) {
  .os-content {
    padding: 40px 40px;
  }
}