/* ============================================
   @landlord/ui-shared — Design Tokens
   ============================================
   The canonical source of truth for the design-system token layer.
   Extracted from landlord-portal main.css (Phases 0–4b of the UI
   Visual Refresh Design Plan, §7).

   Contains:
     1. :root — light-mode token block (color, typography, spacing,
        radius, shadow, transition, focus tokens) + color-scheme.
     2. :root[data-theme="dark"] — dark-mode overrides (INERT until a
        theme toggle sets data-theme="dark"; Phase 4b gate holds).
     3. html { background-color } — flash-mitigation primitive.

   This file is build-time copied into every portal's static/css/_shared/
   via `npm run sync` (see packages/ui-shared/scripts/sync-css.js).
   It MUST be linked before the portal's main.css so portal-specific
   overrides win the cascade.
   ============================================ */

:root {
    /* Flash-mitigation primitive (plan §12.1 — adopt regardless of the
       dark-mode gate). Declares the UA canvas light so the browser does
       not paint its dark default canvas during navigation paint gaps
       when the OS is in dark mode. The [data-theme="dark"] block below
       overrides this to `dark` when (and if) dark mode is activated. */
    color-scheme: light;

    /*
     * Color Palette - Professional & Trustworthy
     * Deep navy primary with warm accents for approachability
     */
    --color-primary: #1e3a5f;
    --color-primary-dark: #152a45;
    --color-primary-light: #2d5a8a;
    --color-primary-hover: #264a73;

    --color-secondary: #0d9488;
    --color-secondary-light: #14b8a6;

    --color-accent: #d97706;
    --color-accent-light: #f59e0b;

    /* Neutral palette - warm grays for approachability */
    --color-text: #1a1a2e;
    --color-text-secondary: #4a5568;
    --color-text-light: #5a6b7d;
    --color-text-muted: #62748a;

    --color-background: #ffffff;
    --color-background-alt: #f7f8fa;
    --color-background-subtle: #edf2f7;

    /* Terminal / prompt surface (for AI prompt examples) */
    --color-surface-terminal: #1e1e2e;
    --color-terminal-prompt:  #4ade80;
    --color-terminal-text:    #e2e8f0;

    --color-border: #e2e8f0;
    --color-border-light: #edf2f7;
    --color-border-strong: #cbd5e0;

    /* Status colors */
    --color-success: #047857;
    --color-success-light: #d1fae5;
    --color-warning: #d97706;
    --color-warning-light: #fef3c7;
    --color-error: #dc2626;
    --color-error-light: #fee2e2;
    /* Error TEXT (inline validation messages). A separate token from the
       hue because text needs AA 4.5:1 in BOTH themes: #dc2626 is 4.83:1 on
       white but only 3.70:1 on the dark canvas (see the AA notes in the
       dark block). Light mode uses the hue itself; dark overrides it. */
    --color-error-text: var(--color-error);

    /* Financial semantics — intent-revealing aliases of status hues */
    --color-money-positive: var(--color-success);
    --color-money-negative: var(--color-error);
    --color-money-neutral:  var(--color-text);
    --color-trend-up:   var(--color-success);
    --color-trend-down: var(--color-error);
    --color-trend-flat: var(--color-text-muted);

    /* Chart palette — aliases of existing tokens so Phase 4b dark-mode
       overrides on the base colours propagate automatically. Never hardcode
       a chart palette in JS (AGENTS.md dark-mode rule: charts must be themeable). */
    --color-chart-inflow:  var(--color-trend-up);
    --color-chart-outflow: var(--color-trend-down);
    --color-chart-net:     var(--color-primary);
    --color-chart-axis:    var(--color-text-muted);
    --color-chart-grid:    var(--color-border-light);

    /*
     * Typography - Fira with system fallback
     * Optimized for older users with clear hierarchy
     */
    --font-family-base: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-heading: var(--font-family-base);
    --font-family-mono: "Fira Mono", ui-monospace, "SF Mono", "Cascadia Mono",
        "Roboto Mono", Menlo, Consolas, monospace;
    --font-family-numeric: var(--font-family-mono);

    /* Numeric rendering — tabular lining figures for aligned columns */
    --font-feature-numeric: "tnum" 1, "lnum" 1;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 2.75rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;

    /* Spacing - consistent rhythm */
    --spacing-xs: 0.5rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* Layout */
    --container-width: 1140px;
    --container-narrow: 720px;

    /* Border radius - subtle rounding for professional look */
    --border-radius-sm: 0.25rem;
    --border-radius: 0.375rem;
    --border-radius-lg: 0.5rem;
    --border-radius-xl: 0.75rem;
    --border-radius-full: 9999px;

    /* Shadows - subtle and layered */
    --box-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
    --box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --box-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Focus ring for accessibility */
    --focus-ring: 0 0 0 3px rgba(30, 58, 95, 0.25);
}

/* ──────────────────────────────────────────────────────────────────────
 * Dark-mode token overrides — Phase 4b (plan §3.3)
 *
 * GATE STATUS: SPECIFIED but INERT. This block only takes effect if
 * something sets data-theme="dark" on <html>. NOTHING does that yet.
 * The theme toggle is deferred behind the navigation-flash workstream
 * (plan §1.1): dark chrome on a light MPA root makes the inherent
 * multi-page paint gap glaring, so activation waits for script-defer
 * or SPA. Do NOT add a toggle button, a [data-theme] setter script, or
 * a prefers-color-scheme:dark auto-switch until that work lands.
 *
 * Scope: background/surface, border, and text tokens only. Brand hues
 * (navy/teal/amber) and status hues are intentionally NOT overridden
 * here — see the AA-contrast notes at the bottom of the block.
 * ────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
    /* Declares the UA canvas + native form-control chrome dark so widgets
       match when dark mode is eventually activated. Composes with the
       light `color-scheme` on :root above (plan §1.1, §12.1). */
    color-scheme: dark;

    /* Background / surface — deep navy scale (plan §3.3 indicative). */
    --color-background:        #0f172a; /* page canvas              */
    --color-background-alt:    #131c30; /* alternate panels         */
    --color-background-subtle: #1e293b; /* cards / raised surfaces  */

    /* Borders — lifted off the dark surface (plan §3.3 indicative). */
    --color-border:        #243044;
    --color-border-strong: #33415c;
    /* border-light doubles as --color-chart-grid; on a dark canvas the
       light-mode value (#edf2f7) would render as near-white grid lines,
       so it MUST be overridden for chart legibility (AGENTS.md: charts
       must be themeable via tokens). Added beyond the §3.3 indicative
       list for AA/legibility on dark surfaces. */
    --color-border-light:  #1c2638;

    /* Text — light slate scale (plan §3.3 indicative; see AA notes).
       Approx. contrast vs --color-background (#0f172a):
         text          #e2e8f0  ~14.5:1  (AAA)
         text-secondary#b6c2d4  ~9.9:1   (AAA)
         text-light    #8da0b8  ~6.7:1   (AA)
         text-muted    #7e93ac  ~5.7:1   (AA)  — nudged, see below   */
    --color-text:           #e2e8f0;
    --color-text-secondary: #b6c2d4;
    --color-text-light:     #8da0b8;
    /* NUDGED from §3.3's #6b7e96 (~4.3:1 — just below AA 4.5:1 for
       normal text) to #7e93ac (~5.7:1 on the canvas, ~4.6:1 on the
       subtle surface) so muted copy meets WCAG AA on both. Deviation
       documented per §3.3 ("may nudge a value for AA contrast"). */
    --color-text-muted:     #7e93ac;
    /* Error TEXT on dark surfaces: #f87171 is 6.45:1 on the canvas and
       5.29:1 on the subtle (card) surface - AA for normal text. Added
       2026-09-28 for inline validation messages; the status HUE itself is
       unchanged (brand-owner decision recorded below). */
    --color-error-text:     #f87171;

    /* ── AA-contrast notes for UNCHANGED status/brand hues (§3.3) ───────
     * Status hues are NOT overridden here (brand-owner decision). As a
     * TEXT/ICON colour directly on the dark canvas they are borderline:
     *   --color-success #047857 → ~3.3:1 (fails AA 4.5:1 normal text,
     *                                    passes 3:1 large text / icon)
     *   --color-error   #dc2626 → ~3.7:1 (fails AA 4.5:1 normal text,
     *                                    passes 3:1 large text / icon)
     *   --color-warning #d97706 → ~5.6:1 (passes AA)
     * In practice these are rendered as solid badge FILLS with light
     * text on top (where they pass), not as text on the bare canvas. If
     * a future view paints a status hue as text/icon directly on a dark
     * surface, it will need a lighter dark-mode variant — flagged for
     * the brand owner, not changed here.
     *
     * Money/trend aliases (--color-money-*, --color-trend-*) resolve to
     * the status hues above, so the same caveat applies: legible as
     * badge fills; success/error trend figures as bare inline text on
     * the dark canvas approach the AA edge.
     * ────────────────────────────────────────────────────────────────── */
}

/* Flash-mitigation primitive (plan §12.1 — adopt regardless of the
   dark-mode gate). Paints the <html> canvas with the background token
   so the page does not flash white during navigation paint gaps.
   Token-driven: resolves to the dark value automatically when (and
   if) [data-theme="dark"] is activated. body sets the same token in
   each portal's main.css, but the <html> canvas is what the browser
   paints during body gaps. */
html {
    background-color: var(--color-background);
}