/* ======================================================
   SBOS DESIGN TOKENS (Light + Dark) - Bright Tech Blue
   Warm greys, semantic colors, monochromatic accents
   ====================================================== */

/* -------------------------
   Core tokens - Light Theme
   ------------------------- */
:root{
  /* Primary (Bright Tech Blue) */
  --primary-50:  #EAF4FF;
  --primary-100: #CFE9FF;
  --primary-200: #A7D8FF;
  --primary-300: #7ABFFF;
  --primary-400: #4A9EFF;
  --primary-500: #3C82F6; /* brand */
  --primary-600: #2E6BE0;
  --primary-700: #1D4ED8;
  --primary-800: #143C9B;
  --primary-900: #0F2A66;

  /* Monochromatic accents - blue family */
  --accent-1: #60A7FF;
  --accent-2: #8FBEFF;
  --accent-3: #BFD8FF;

  /* Warm neutrals (warm greys) */
  --neutral-0:  #FFFFFF;
  --neutral-50: #FCFBFA;
  --neutral-100:#F7F6F4;
  --neutral-200:#EFECE7;
  --neutral-300:#E2DDD6;
  --neutral-400:#D1C9BF;
  --neutral-500:#B9AFA6;
  --neutral-600:#968B82;
  --neutral-700:#6F645C;
  --neutral-800:#4C4139;
  --neutral-900:#2C241F;

  /* Surfaces / elevation */
  --surface-0: var(--neutral-0);
  --surface-1: #FEFEFE;
  --surface-2: #FBF9F7;
  --surface-3: #F3EFEB;

  /* Borders & dividers */
  --border-1: #E6E0DA;
  --border-2: #D6CFC6;

  /* Semantic */
  --success-50:  #E6FBF0;
  --success:      #2CBF6E;
  --warning-50:   #FFF6E6;
  --warning:      #FFC145;
  --danger-50:    #FFECEC;
  --danger:       #E94B4B;
  --info-50:      #EAF4FF;
  --info:         #3C82F6;

  /* Text */
  --text-900: #111014;
  --text-800: #2A2B2D;
  --text-700: #3F4246;
  --text-600: #6B6F75;

  /* Radius / shadows / transitions */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-1: 0 6px 18px rgba(17,17,17,0.06);
  --shadow-2: 0 10px 30px rgba(17,17,17,0.08);
  --transition-fast: 0.14s ease;
  --transition: 0.24s ease;

  /* Misc */
  --focus-ring: 3px;
  --disabled: #CFC7BF;
}

/* -------------------------
   Dark theme override (class-based)
   ------------------------- */
html.theme-dark{
  --primary-50:  #1E2F4B;
  --primary-100: #213E63;
  --primary-200: #264C7C;
  --primary-300: #2A61A6;
  --primary-400: #2D78D0;
  --primary-500: #5BA2FF; /* brand alt in dark */
  --primary-600: #4A90E2;
  --primary-700: #2D6CDF;
  --primary-800: #174A9F;
  --primary-900: #0E2A66;

  --accent-1: #80B9FF;
  --accent-2: #A7CDFF;
  --accent-3: #D7EDFF;

  /* Warm neutrals go darker */
  --neutral-0:  #0F1113;
  --neutral-50: #121416;
  --neutral-100:#15161A;
  --neutral-200:#1D1F22;
  --neutral-300:#2A2D31;
  --neutral-400:#43474D;
  --neutral-500:#74787F;
  --neutral-600:#9AA0A6;
  --neutral-700:#BDC2C8;
  --neutral-800:#DEE2E7;
  --neutral-900:#F4F6F8;

  --surface-0: #0F1113;
  --surface-1: #141617;
  --surface-2: #181A1D;
  --surface-3: #202428;

  --border-1: #2E2F33;
  --border-2: #222426;

  /* Semantic (slightly brighter in dark) */
  --success-50:  rgba(44,191,110,0.12);
  --success:      #36D381;
  --warning-50:   rgba(255,193,69,0.12);
  --warning:      #FFD07A;
  --danger-50:    rgba(233,75,75,0.12);
  --danger:       #FF7878;
  --info-50:      rgba(60,130,246,0.12);
  --info:         #7FB7FF;

  --text-900: #F8FAFB;
  --text-800: #E4E7EB;
  --text-700: #C9D1DB;
  --text-600: #99A3B3;
}

/* -------------------------
   Utility tokens (surface roles)
   ------------------------- */
:root{
   --bg-page: var(--surface-0);
   --bg-panel: var(--surface-1);
   --bg-card: var(--surface-2);
   --muted: var(--neutral-500);
   --link: var(--primary);
   --link-hover: var(--primary-dark);
   --success-bg: var(--success-50);
   --warning-bg: var(--warning-50);
   --danger-bg: var(--danger-50);
   --info-bg: var(--info-50);
   
   --primary: var(--primary-500);
   --primary-light: var(--primary-300);
   --primary-lighter: var(--primary-100);
   --primary-dark: var(--primary-700);
   --primary-darker: var(--primary-900);
}