/* ============================================================
   Fine Dashboard — Design Tokens
   Apple-inspired soft white theme
   ============================================================ */

:root {
  /* ── Primary Palette ── */
  --color-bg:              #F5F5F7;
  --color-surface:         #FFFFFF;
  --color-surface-alt:     #FAFAFA;
  --color-surface-hover:   #F0F0F2;
  --color-border:          #E8E8ED;
  --color-border-light:    #F0F0F2;
  --color-divider:         #E5E5EA;

  /* ── Text ── */
  --color-text-primary:    #1D1D1F;
  --color-text-secondary:  #6E6E73;
  --color-text-muted:      #86868B;
  --color-text-placeholder:#AEAEB2;
  --color-text-inverse:    #FFFFFF;

  /* ── Accent Colors ── */
  --color-accent:          #4A9FDB;
  --color-accent-hover:    #3A8FC8;
  --color-accent-light:    rgba(74, 159, 219, 0.10);
  --color-accent-surface:  rgba(74, 159, 219, 0.05);

  /* ── Semantic Colors ── */
  --color-success:         #34C759;
  --color-success-light:   rgba(52, 199, 89, 0.10);
  --color-success-surface: rgba(52, 199, 89, 0.06);

  --color-warning:         #FF9500;
  --color-warning-light:   rgba(255, 149, 0, 0.10);
  --color-warning-surface: rgba(255, 149, 0, 0.06);

  --color-danger:          #FF3B30;
  --color-danger-light:    rgba(255, 59, 48, 0.10);
  --color-danger-surface:  rgba(255, 59, 48, 0.06);

  --color-info:            #5AC8FA;
  --color-info-light:      rgba(90, 200, 250, 0.10);

  /* ── Chart Palette (Apple-inspired) ── */
  --chart-blue:            #0071E3;
  --chart-green:           #34C759;
  --chart-orange:          #FF9500;
  --chart-red:             #FF3B30;
  --chart-purple:          #AF52DE;
  --chart-teal:            #5AC8FA;
  --chart-pink:            #FF2D55;
  --chart-indigo:          #5856D6;
  --chart-mint:            #00C7BE;
  --chart-cyan:            #32ADE6;

  /* ── Typography ── */
  --font-family:           'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs:          0.6875rem;   /* 11px */
  --font-size-sm:          0.75rem;     /* 12px */
  --font-size-base:        0.8125rem;   /* 13px */
  --font-size-md:          0.875rem;    /* 14px */
  --font-size-lg:          1rem;        /* 16px */
  --font-size-xl:          1.25rem;     /* 20px */
  --font-size-2xl:         1.5rem;      /* 24px */
  --font-size-3xl:         2rem;        /* 32px */
  --font-size-4xl:         2.5rem;      /* 40px */
  
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;

  --line-height-tight:     1.2;
  --line-height-normal:    1.5;
  --line-height-relaxed:   1.7;

  --letter-spacing-tight:  -0.022em;
  --letter-spacing-normal: -0.01em;

  /* ── Spacing ── */
  --space-1:  0.25rem;    /* 4px */
  --space-2:  0.5rem;     /* 8px */
  --space-3:  0.75rem;    /* 12px */
  --space-4:  1rem;       /* 16px */
  --space-5:  1.25rem;    /* 20px */
  --space-6:  1.5rem;     /* 24px */
  --space-8:  2rem;       /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-16: 4rem;       /* 64px */

  /* ── Border Radius ── */
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-full:9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-xl:  0 12px 40px rgba(0, 0, 0, 0.12);
  --shadow-card:0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.10);

  /* ── Glassmorphism ── */
  --glass-bg:          rgba(255, 255, 255, 0.72);
  --glass-bg-heavy:    rgba(255, 255, 255, 0.88);
  --glass-border:      rgba(255, 255, 255, 0.30);
  --glass-blur:        20px;

  /* ── Transitions ── */
  --transition-fast:   150ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-base:   250ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-slow:   400ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ── */
  --sidebar-width:           272px;
  --sidebar-width-collapsed: 64px;
  --header-height:           78px;
  --content-max-width:       1440px;
}