/* =====================================================================
   PALMSTAT ERP · THEME & DESIGN TOKENS
   Apple-inspired. Palm-leaf green brand. Light + Dark.
   ===================================================================== */

: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);

  color-scheme: light;
}

[data-theme="dark"] {
  --bg-base:     #000000;
  --bg-elevated: #1C1C1E;
  --bg-overlay:  rgba(28, 28, 30, 0.78);
  --bg-sidebar:  rgba(20, 20, 22, 0.72);
  --bg-card:     #1C1C1E;
  --bg-input:    #2C2C2E;
  --bg-hover:    rgba(255, 255, 255, 0.06);
  --bg-active:   rgba(255, 255, 255, 0.10);
  --bg-glass:    rgba(28, 28, 30, 0.65);

  --fg-primary:   #F5F5F7;
  --fg-secondary: #A1A1A6;
  --fg-tertiary:  #6E6E73;
  --fg-on-brand:  #07211A;

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

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 4px rgba(63, 166, 111, 0.28);

  --brand-bg-soft: rgba(63, 166, 111, 0.14);
  --brand-fg:      var(--brand-300);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-base:     #000000;
    --bg-elevated: #1C1C1E;
    --bg-overlay:  rgba(28, 28, 30, 0.78);
    --bg-sidebar:  rgba(20, 20, 22, 0.72);
    --bg-card:     #1C1C1E;
    --bg-input:    #2C2C2E;
    --bg-hover:    rgba(255, 255, 255, 0.06);
    --bg-active:   rgba(255, 255, 255, 0.10);
    --bg-glass:    rgba(28, 28, 30, 0.65);
    --fg-primary:   #F5F5F7;
    --fg-secondary: #A1A1A6;
    --fg-tertiary:  #6E6E73;
    --fg-on-brand:  #07211A;
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border:        rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.16);
    --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.6);
    --brand-bg-soft: rgba(63, 166, 111, 0.14);
    --brand-fg:      var(--brand-300);
    color-scheme: dark;
  }
}