/* ============================================================
   BumuRise — Design Tokens (variables.css)
   Import this first in every page
   ============================================================ */

/* Google Fonts — Sora + DM Sans */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ============================================================
   LIGHT MODE (default)
   ============================================================ */
:root {
  /* --- Brand Core --- */
  --br-900:        #061C1A;
  --br-800:        #0F3D38;   /* Primary — deep forest teal */
  --br-700:        #145049;
  --br-600:        #1A6459;
  --br-500:        #1F7A6B;
  --br-400:        #2A9480;
  --br-300:        #4DB8A3;
  --br-200:        #8FD9CC;
  --br-100:        #CAEEE8;
  --br-50:         #EBF8F5;

  /* --- Amber Accent --- */
  --amber-900:     #3D2200;
  --amber-800:     #7A4400;
  --amber-700:     #A85F00;
  --amber-600:     #D47B00;
  --amber-500:     #F4A227;   /* Primary Amber */
  --amber-400:     #F7B84E;
  --amber-300:     #FACB7B;
  --amber-200:     #FCDDA4;
  --amber-100:     #FDEECE;
  --amber-50:      #FEF8EC;

  /* --- Semantic --- */
  --success-bg:    #E8F5EE;
  --success-text:  #0B5E34;
  --success-border:#B2DFCA;
  --warning-bg:    #FEF3DC;
  --warning-text:  #7A5200;
  --warning-border:#F9D98A;
  --danger-bg:     #FDECEA;
  --danger-text:   #8B1A1A;
  --danger-border: #F5B8B5;
  --info-bg:       #E6F1FB;
  --info-text:     #0C3B6E;
  --info-border:   #B5D0EF;

  /* --- Surfaces --- */
  --surface-base:   #F7F5F0;   /* Page background */
  --surface-card:   #FFFFFF;   /* Cards, panels */
  --surface-raised: #FFFFFF;   /* Elevated cards */
  --surface-sunken: #EDEAE3;   /* Input backgrounds, recessed areas */
  --surface-hover:  #F0EDE6;   /* Hover states */
  --surface-overlay:rgba(15,61,56,0.06);

  /* --- Text --- */
  --text-primary:   #1A1A18;
  --text-secondary: #4A4840;
  --text-muted:     #6E6C64;
  --text-pale:      #9E9C94;
  --text-inverse:   #FFFFFF;
  --text-brand:     #0F3D38;
  --text-amber:     #7A4400;
  --text-link:      #1A6459;

  /* --- Borders --- */
  --border-faint:   rgba(0,0,0,0.06);
  --border-light:   rgba(0,0,0,0.09);
  --border-medium:  rgba(0,0,0,0.15);
  --border-strong:  rgba(0,0,0,0.25);
  --border-brand:   #2A9480;

  /* --- Sidebar (always dark) --- */
  --sidebar-bg:         #0C3430;
  --sidebar-bg-mid:     #0F3D38;
  --sidebar-border:     rgba(255,255,255,0.07);
  --sidebar-text:       rgba(255,255,255,0.58);
  --sidebar-text-hover: rgba(255,255,255,0.90);
  --sidebar-item-hover: rgba(255,255,255,0.07);
  --sidebar-item-active-bg: #F4A227;
  --sidebar-item-active-text: #0C3430;
  --sidebar-badge-bg:   rgba(244,162,39,0.2);
  --sidebar-badge-text: #F7B84E;

  /* --- Typography --- */
  --font-display:   'Sora', 'Trebuchet MS', sans-serif;
  --font-body:      'DM Sans', 'Segoe UI', sans-serif;
  --font-mono:      'JetBrains Mono', 'Cascadia Code', 'Menlo', 'Consolas', monospace;

  /* --- Sizing --- */
  --sidebar-width:    230px;
  --topbar-height:    56px;
  --radius-xs:        6px;
  --radius-sm:        8px;
  --radius-md:        12px;
  --radius-lg:        16px;
  --radius-xl:        20px;
  --radius-pill:      999px;

  /* --- Shadows --- */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:   0 2px 6px rgba(0,0,0,0.07);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.09);
  --shadow-lg:   0 8px 30px rgba(0,0,0,0.12);
  --shadow-brand:0 4px 16px rgba(15,61,56,0.25);
  --shadow-amber:0 4px 16px rgba(244,162,39,0.30);

  /* --- Transitions --- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --duration-xs: 100ms;
  --duration-sm: 150ms;
  --duration-md: 250ms;
  --duration-lg: 400ms;

  /* --- Z-index scale --- */
  --z-base:      1;
  --z-sticky:    100;
  --z-sidebar:   200;
  --z-topbar:    300;
  --z-dropdown:  400;
  --z-modal:     500;
  --z-toast:     600;
  --z-tooltip:   700;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
  /* --- Surfaces --- */
  --surface-base:   #091918;
  --surface-card:   #0F2421;
  --surface-raised: #142E2A;
  --surface-sunken: #071411;
  --surface-hover:  #1A3832;
  --surface-overlay:rgba(42,148,128,0.08);

  /* --- Text --- */
  --text-primary:   #EAE8E0;
  --text-secondary: #B8B5AD;
  --text-muted:     #8A8880;
  --text-pale:      #4E4D48;
  --text-inverse:   #0F2421;
  --text-brand:     #4DB8A3;
  --text-amber:     #F7B84E;
  --text-link:      #4DB8A3;

  /* --- Borders --- */
  --border-faint:   rgba(255,255,255,0.05);
  --border-light:   rgba(255,255,255,0.08);
  --border-medium:  rgba(255,255,255,0.14);
  --border-strong:  rgba(255,255,255,0.25);
  --border-brand:   #2A9480;

  /* --- Semantic --- */
  --success-bg:    rgba(11,94,52,0.20);
  --success-text:  #5ECFA0;
  --success-border:rgba(11,94,52,0.35);
  --warning-bg:    rgba(122,82,0,0.20);
  --warning-text:  #FACB7B;
  --warning-border:rgba(244,162,39,0.25);
  --danger-bg:     rgba(139,26,26,0.20);
  --danger-text:   #F08080;
  --danger-border: rgba(192,57,43,0.30);
  --info-bg:       rgba(12,59,110,0.20);
  --info-text:     #85B7EB;
  --info-border:   rgba(24,95,165,0.30);

  /* --- Shadows --- */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.20);
  --shadow-sm:   0 2px 6px rgba(0,0,0,0.30);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.40);
  --shadow-lg:   0 8px 30px rgba(0,0,0,0.50);
}