/* PALMSTAT_DARKMODE_SWEEP_V1 — app-wide dark-mode correctness sweep.
   Adds a COMPATIBILITY-ALIAS layer (below) that defines every legacy /
   previously-UNDEFINED token name as an alias of a REAL theme token, so
   the stray `var(--undefined, <light-fallback>)` references scattered through
   components.css and the JS view inline-styles stop falling back to their
   hard-coded LIGHT values in dark mode. Because each alias points at a real
   token via var(), it re-resolves to the correct value in light, explicit
   dark ([data-theme="dark"]) AND system/auto dark
   (:root:not([data-theme]) @media prefers-color-scheme:dark) automatically —
   custom-property substitution is lazy, so one definition in :root flips
   in every theme context. No JS changes required. */
/* =====================================================================
   PALMSTAT ERP · THEME & DESIGN TOKENS
   Apple-inspired. Palm-leaf green brand. Light + Dark.
   PALMSTAT_THEME_BRIGHTEN_V1 — dark theme brightened/vivified for demo:
     elevated card surfaces lifted off flat black, brand + status colours
     brightened to pop, subtle accent glow on cards, brighter Live dot.
     Light mode given a gentle vibrancy nudge (kept clean, not washed).
   ===================================================================== */

:root {
  /* ----- PALMSTAT BRAND (palm-leaf green) ----- */
  --brand-50:  #EAF8F1;
  --brand-100: #CFEFDD;
  --brand-200: #A8E2BF;
  --brand-300: #7FD0A0;
  --brand-400: #5FBE87;
  --brand-500: #3FA66F;   /* primary */
  --brand-600: #339459;
  --brand-700: #297548;
  --brand-800: #1D5634;
  --brand-900: #103620;

  /* ----- APPLE-LIKE NEUTRAL ----- */
  --gray-50:  #FAFAFA;
  --gray-100: #F5F5F7;
  --gray-200: #EBEBEF;
  --gray-300: #D2D2D7;
  --gray-400: #AEAEB2;
  --gray-500: #86868B;
  --gray-600: #6E6E73;
  --gray-700: #48484A;
  --gray-800: #2C2C2E;
  --gray-900: #1D1D1F;
  --gray-950: #0A0A0C;

  /* ----- SEMANTIC ----- */
  --success: #34C759;
  --warning: #FF9F0A;
  --danger:  #FF3B30;
  --info:    #5AC8FA;

  /* ----- TYPOGRAPHY ----- */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Segoe UI Variable", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* ----- TIMING ----- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0, 1, 0.45);
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 120ms;
  --t-base: 220ms;
  --t-slow: 360ms;

  /* ----- SHAPE ----- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 999px;
}

:root,
[data-theme="light"] {
  --bg-base:     #F5F5F7;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  rgba(255, 255, 255, 0.78);
  --bg-sidebar:  rgba(245, 245, 247, 0.72);
  --bg-card:     #FFFFFF;
  --bg-input:    #FFFFFF;
  --bg-hover:    rgba(0, 0, 0, 0.04);
  --bg-active:   rgba(0, 0, 0, 0.08);
  --bg-glass:    rgba(255, 255, 255, 0.65);

  --fg-primary:   #1D1D1F;
  --fg-secondary: #6E6E73;
  --fg-tertiary:  #86868B;
  --fg-on-brand:  #FFFFFF;

  --border-subtle: rgba(0, 0, 0, 0.06);
  --border:        rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.16);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 0 4px rgba(63, 166, 111, 0.18);

  --brand-bg-soft: var(--brand-50);
  --brand-fg:      var(--brand-700);

  /* PALMSTAT_THEME_BRIGHTEN_V1 — gentle light-mode vibrancy: slightly stronger
     brand glow + marginally punchier status hues (kept clean, not washed). */
  --shadow-glow: 0 0 0 4px rgba(63, 166, 111, 0.22);
  --success: #28C24E;
  --warning: #FB9A06;
  --danger:  #FF3B30;
  --info:    #2BB6F0;

  color-scheme: light;
}

[data-theme="dark"] {
  /* PALMSTAT_THEME_BRIGHTEN_V1 — surfaces lifted off pure black so cards read
     as ELEVATED (was flat #1C1C1E on #000 = dull). Base is a deep slate, cards
     a brighter graphite with a faint cool tint. */
  --bg-base:     #0B0E13;
  --bg-elevated: #20242C;
  --bg-overlay:  rgba(32, 36, 44, 0.82);
  --bg-sidebar:  rgba(18, 21, 27, 0.78);
  --bg-card:     #1B1F26;
  --bg-input:    #262B34;
  --bg-hover:    rgba(255, 255, 255, 0.08);
  --bg-active:   rgba(95, 190, 135, 0.16);
  --bg-glass:    rgba(32, 36, 44, 0.68);

  /* Higher-contrast text for legibility + punch */
  --fg-primary:   #FBFCFE;
  --fg-secondary: #B6BCC6;
  --fg-tertiary:  #818892;
  --fg-on-brand:  #052017;

  --border-subtle: rgba(255, 255, 255, 0.08);
  --border:        rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.22);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.62);
  --shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.72);
  /* brighter, wider brand glow ring */
  --shadow-glow: 0 0 0 4px rgba(95, 190, 135, 0.40);

  /* Brighter palm-green accent so the gold/green pops on dark */
  --brand-bg-soft: rgba(95, 190, 135, 0.20);
  --brand-fg:      var(--brand-300);

  /* PALMSTAT_THEME_BRIGHTEN_V1 — vivid, clearly-distinct status colours */
  --success: #30E07A;
  --warning: #FFB23E;
  --danger:  #FF5A4D;
  --info:    #3FC8FF;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* PALMSTAT_THEME_BRIGHTEN_V1 — mirror the brightened explicit-dark tokens */
    --bg-base:     #0B0E13;
    --bg-elevated: #20242C;
    --bg-overlay:  rgba(32, 36, 44, 0.82);
    --bg-sidebar:  rgba(18, 21, 27, 0.78);
    --bg-card:     #1B1F26;
    --bg-input:    #262B34;
    --bg-hover:    rgba(255, 255, 255, 0.08);
    --bg-active:   rgba(95, 190, 135, 0.16);
    --bg-glass:    rgba(32, 36, 44, 0.68);
    --fg-primary:   #FBFCFE;
    --fg-secondary: #B6BCC6;
    --fg-tertiary:  #818892;
    --fg-on-brand:  #052017;
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border:        rgba(255, 255, 255, 0.14);
    --border-strong: rgba(255, 255, 255, 0.22);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.62);
    --shadow-glow: 0 0 0 4px rgba(95, 190, 135, 0.40);
    --brand-bg-soft: rgba(95, 190, 135, 0.20);
    --brand-fg:      var(--brand-300);
    --success: #30E07A;
    --warning: #FFB23E;
    --danger:  #FF5A4D;
    --info:    #3FC8FF;
    color-scheme: dark;
  }
}

/* =====================================================================
   PALMSTAT_DARKMODE_SWEEP_V1 · COMPATIBILITY-ALIAS LAYER
   Maps every legacy / undefined token name onto a real, theme-aware token.
   Defined once in :root — each alias resolves through var() to the real
   token, which itself flips per theme, so these are correct in light,
   explicit-dark and system/auto-dark without duplication. This neutralises
   the hard-coded LIGHT fallbacks in `var(--undefined, #fff/#f8fafc/...)`
   uses across components.css and the JS view inline styles.
   ===================================================================== */
:root {
  /* surfaces */
  --card-bg:        var(--bg-card);       /* WMS tiles / task tiles */
  --surface:        var(--bg-base);       /* recessed panel / feed bg */
  --surface-1:      var(--bg-base);       /* calendar out-of-month cells */
  --surface-2:      var(--bg-base);       /* toolbars, header strips, totals */
  --surface-hover:  var(--bg-hover);      /* row hover */
  --bg-secondary:   var(--bg-card);       /* legacy drawer bg fallback */
  --bg-tertiary:    var(--bg-elevated);   /* legacy (back-pill era) */
  --bg-quaternary:  var(--bg-elevated);   /* legacy */
  --bg-subtle:      var(--bg-base);       /* legacy */
  --bg-3:           var(--bg-base);       /* legacy */
  /* text */
  --text:           var(--fg-primary);
  --text-strong:    var(--fg-primary);
  --text-secondary: var(--fg-secondary);
  --text-muted:     var(--fg-tertiary);
  --text-tertiary:  var(--fg-tertiary);
  --muted:          var(--fg-tertiary);
  /* borders */
  --border-color:   var(--border);        /* legacy (back-pill era) */
}