/* ==========================================================================
   FLOWPOMODORO GLOBAL DESIGN TOKENS
   ========================================================================== */

:root {
  /* =====================
     BRAND COLORS (CONSTANT)
     ===================== */
  --brand-primary:      #FFB800;
  --brand-bright:       #FFC400;
  --brand-soft:         #FFF7D6;
  --brand-glow:         rgba(255, 184, 0, 0.25);
  --brand-glow-strong:  rgba(255, 184, 0, 0.4);

  /* Modes (Focus is Yellow, Breaks can use subtle variations or just stick to yellow, let's stick to brand for focus) */
  --mode-focus:         var(--brand-primary);
  --mode-short:         #22d3a0; /* Keeping a calm green for short break as secondary accent if needed, or we can use all yellow. Prompt says "Use yellow for timer progress ring, active states". */
  --mode-long:          #00d4ff; 
  /* Actually, to stick to the minimal philosophy, we'll use brand primary for everything active unless specified. */

  /* =====================
     SPACING SCALE
     ===================== */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* =====================
     BORDER RADIUS
     ===================== */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* =====================
     TYPOGRAPHY
     ===================== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Outfit', 'Inter', -apple-system, sans-serif;
  
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3rem;
  --text-5xl:  4rem;

  /* =====================
     TRANSITIONS
     ===================== */
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;

  /* =====================
     Z-INDEX SCALE
     ===================== */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   50;
  --z-overlay:  100;
  --z-drawer:   200;
  --z-modal:    1000;
  --z-toast:    2000;
}

/* =====================
   LIGHT THEME (DEFAULT)
   ===================== */
:root {
  --bg-main:        #FAFAF7;
  --bg-surface:     #FFFFFF;
  --bg-surface-hover: #F3F3EF;
  --bg-surface-active: #EBEBE5;
  
  --border-color:   #E6E6DF;
  --border-subtle:  rgba(0, 0, 0, 0.05);

  --text-primary:   #111827;
  --text-secondary: #667085;
  --text-muted:     #9CA3AF;
  
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.05);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.05);
  --shadow-lg:      0 12px 32px rgba(0,0,0,0.08);
  
  --bg-glass:       rgba(255, 255, 255, 0.85);
  --ring-bg:        #E6E6DF;
}

/* =====================
   DARK THEME
   ===================== */
html[data-theme="dark"] {
  --bg-main:        #080B12;
  --bg-surface:     #111722;
  --bg-surface-hover: #1A212E;
  --bg-surface-active: #222B3B;
  
  --border-color:   #252B36;
  --border-subtle:  rgba(255, 255, 255, 0.05);

  --text-primary:   #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted:     #64748B;
  
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:      0 12px 32px rgba(0,0,0,0.5);
  
  --bg-glass:       rgba(17, 23, 34, 0.85);
  --ring-bg:        #252B36;
}