/* =====================================================
   SalonOS V2 — Design Tokens
   Soft Premium Beauty SaaS
   ===================================================== */

:root {
  /* Typography */
  --font-base: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Radii */
  --radius-xs:   8px;
  --radius-sm:   10px;
  --radius-md:   12px;
  --radius-lg:   14px;
  --radius-xl:   18px;
  --radius-2xl:  22px;
  --radius-pill: 999px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 16px;
  --space-7: 18px;
  --space-8: 20px;
  --space-9: 24px;

  /* Sizing */
  --sidebar-width: 260px;
  --control-h:     32px;
  --control-h-lg:  40px;

  /* Motion */
  --motion-fast: 140ms ease;
  --motion-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── LIGHT THEME (default) ── */
  --color-bg:         #F5F1EB;
  --color-bg-alt:     #F1ECE5;
  --color-surface:    #FFFCF8;
  --color-surface-2:  #F8F4EE;
  --color-sidebar:    #F2ECE5;

  --color-text:       #252525;
  --color-text-strong:#111111;
  --color-muted:      #7A746D;
  --color-soft:       #9A948D;

  --color-border:     #E6DDD1;
  --color-border-strong: #D9CFBF;

  --color-accent:        #C4A882;
  --color-accent-hover:  #B08B5C;
  --color-accent-soft:   #EDE5D8;
  --color-accent-text:   #3A2E24;

  --color-ok:      #4F7A56;
  --color-ok-bg:   #E7F3E7;
  --color-ok-border: #CFE5CF;

  --color-warn:    #A8741A;
  --color-warn-bg: #F8E9CC;
  --color-warn-border: #EDD5A7;

  --color-info:    #5173A6;
  --color-info-bg: #E7EEF8;
  --color-info-border: #CFDCF0;

  --color-done:    #5D745C;
  --color-done-bg: #E9F0E6;
  --color-done-border: #D5E2D1;

  --color-danger:     #A15A52;
  --color-danger-bg:  #F6E1DE;
  --color-danger-border: #EBC8C3;

  --color-row-hover:  #FCF7F0;
  --color-focus-ring: rgba(196, 168, 130, 0.35);

  --shadow-xs: 0 1px 2px rgba(20, 16, 12, 0.04);
  --shadow-sm: 0 2px 8px rgba(20, 16, 12, 0.05), 0 1px 2px rgba(20, 16, 12, 0.03);
  --shadow-md: 0 4px 16px rgba(20, 16, 12, 0.06), 0 2px 4px rgba(20, 16, 12, 0.04);
  --shadow-lg: 0 8px 32px rgba(20, 16, 12, 0.08), 0 4px 8px rgba(20, 16, 12, 0.04);
  --shadow-xl: 0 16px 48px rgba(20, 16, 12, 0.10), 0 8px 16px rgba(20, 16, 12, 0.05);
  --shadow-glow: 0 0 20px rgba(196, 168, 130, 0.15);

  --chart-primary:   #C4A882;
  --chart-secondary: #6f7cff;
  --chart-grid:      rgba(37, 37, 37, 0.08);
}

/* ── DARK THEME ── */
:root[data-theme="dark"] {
  --color-bg:         #1E1F23;
  --color-bg-alt:     #191A1E;
  --color-surface:    #26282E;
  --color-surface-2:  #2B2E34;
  --color-sidebar:    #191A1E;

  --color-text:       #F3F4F6;
  --color-text-strong:#FFFFFF;
  --color-muted:      #9CA3AF;
  --color-soft:       #6B7280;

  --color-border:       #32353C;
  --color-border-strong:#3E424B;

  --color-accent:       #C4A882;
  --color-accent-hover: #A8896A;
  --color-accent-soft:  rgba(196, 168, 130, 0.18);
  --color-accent-text:  #F0E2CE;

  --color-ok:       #8FD19E;
  --color-ok-bg:    rgba(80, 160, 100, 0.15);
  --color-ok-border:rgba(80, 160, 100, 0.28);

  --color-warn:       #E0B56B;
  --color-warn-bg:    rgba(200, 150, 60, 0.18);
  --color-warn-border:rgba(200, 150, 60, 0.28);

  --color-info:       #8FA8E6;
  --color-info-bg:    rgba(80, 120, 200, 0.18);
  --color-info-border:rgba(80, 120, 200, 0.28);

  --color-done:       #A7C4A0;
  --color-done-bg:    rgba(120, 160, 120, 0.15);
  --color-done-border:rgba(120, 160, 120, 0.28);

  --color-danger:       #D48B84;
  --color-danger-bg:    rgba(200, 90, 80, 0.15);
  --color-danger-border:rgba(200, 90, 80, 0.28);

  --color-row-hover:  rgba(200, 155, 82, 0.06);
  --color-focus-ring: rgba(200, 155, 82, 0.32);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.36);

  --chart-primary:   #C4A882;
  --chart-secondary: #8FA8E6;
  --chart-grid:      rgba(243, 244, 246, 0.08);
}

/* ── LIGHT THEME explicit ── */
:root[data-theme="light"] {
  --color-bg:         #F5F1EB;
  --color-bg-alt:     #F1ECE5;
  --color-surface:    #FFFCF8;
  --color-surface-2:  #F8F4EE;
  --color-sidebar:    #F2ECE5;

  --color-text:       #252525;
  --color-text-strong:#171717;
  --color-muted:      #7A746D;
  --color-soft:       #9A948D;

  --color-border:     #E6DDD1;
  --color-border-strong: #D9CFBF;

  --color-accent:        #C4A882;
  --color-accent-hover:  #A8896A;
  --color-accent-soft:   #EDE5D8;
  --color-accent-text:   #3A2E24;

  --color-ok:      #4F7A56;
  --color-ok-bg:   #E7F3E7;
  --color-ok-border: #CFE5CF;

  --color-warn:    #A8741A;
  --color-warn-bg: #F8E9CC;
  --color-warn-border: #EDD5A7;

  --color-info:    #5173A6;
  --color-info-bg: #E7EEF8;
  --color-info-border: #CFDCF0;

  --color-done:    #5D745C;
  --color-done-bg: #E9F0E6;
  --color-done-border: #D5E2D1;

  --color-danger:     #A15A52;
  --color-danger-bg:  #F6E1DE;
  --color-danger-border: #EBC8C3;

  --color-row-hover:  #FCF7F0;
  --color-focus-ring: rgba(200, 155, 82, 0.28);

  --shadow-sm: 0 2px 8px rgba(20, 16, 12, 0.05);
  --shadow-md: 0 8px 24px rgba(20, 16, 12, 0.07);
  --shadow-lg: 0 12px 32px rgba(20, 16, 12, 0.10);
}