/* ============================================================
   SeoCute — theme.css
   Single source of truth for all CSS custom properties.
   Light + Dark mode via body.theme-light / body.theme-dark
   ============================================================ */

/* ── Google Font ── */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700;800&display=swap');

/* ── Light mode (default) ── */
:root,
body.theme-light {
  /* Backgrounds */
  --color-bg:           #f4f5fb;
  --color-surface:      #ffffff;
  --color-card:         #ffffff;
  --color-sidebar-bg:   #ffffff;
  --color-hover:        #f1f3fa;

  /* Text */
  --color-text:         #21243d;
  --color-text-sec:     #566a7f;
  --color-muted:        #8592a3;

  /* Brand */
  --color-primary:      #696cff;
  --color-primary-hover:#5f61e6;
  --color-primary-soft: #e7e7ff;

  /* Semantic */
  --color-success:      #71dd37;
  --color-success-soft: #e8fbd0;
  --color-warning:      #ffab00;
  --color-warning-soft: #fff3cd;
  --color-danger:       #ff3e1d;
  --color-danger-soft:  #ffe0db;
  --color-info:         #03c3ec;
  --color-info-soft:    #d0f3fb;

  /* Border */
  --color-border:       #dbdfe9;
  --color-border-strong:#b4bdc6;

  /* Shadows */
  --shadow-xs:  0 1px 3px rgba(67,89,113,.12);
  --shadow-sm:  0 2px 6px rgba(67,89,113,.12);
  --shadow-md:  0 4px 16px rgba(67,89,113,.15);
  --shadow-lg:  0 8px 32px rgba(67,89,113,.18);

  /* Sidebar */
  --color-sidebar-text:        #566a7f;
  --color-sidebar-text-active: #21243d;
  --color-sidebar-icon-active: #696cff;

  /* Scrollbar */
  --scrollbar-track: #f4f5fb;
  --scrollbar-thumb: #dbdfe9;
  --scrollbar-hover: #b4bdc6;

  /* Misc */
  --transition:      150ms ease;
  --radius-sm:       6px;
  --radius-md:       8px;
  --radius-lg:       12px;
  --radius-xl:       16px;
  --radius-input:    8px;
}

/* ── Dark mode ── */
body.theme-dark {
  --color-bg:           #232333;
  --color-surface:      #2b2c40;
  --color-card:         #2b2c40;
  --color-sidebar-bg:   #2b2c40;
  --color-hover:        #36374e;

  --color-text:         #cfd3ec;
  --color-text-sec:     #a3a4cc;
  --color-muted:        #7b7d9d;

  --color-primary:      #696cff;
  --color-primary-hover:#5f61e6;
  --color-primary-soft: #3a3b69;

  --color-success:      #71dd37;
  --color-success-soft: #2a3d1e;
  --color-warning:      #ffab00;
  --color-warning-soft: #3d3000;
  --color-danger:       #ff3e1d;
  --color-danger-soft:  #3d1a15;
  --color-info:         #03c3ec;
  --color-info-soft:    #0d3040;

  --color-border:       #434468;
  --color-border-strong:#5a5c82;

  --shadow-xs:  0 1px 3px rgba(0,0,0,.3);
  --shadow-sm:  0 2px 6px rgba(0,0,0,.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,.35);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.4);

  --color-sidebar-text:        #a3a4cc;
  --color-sidebar-text-active: #cfd3ec;
  --color-sidebar-icon-active: #696cff;

  --scrollbar-track: #232333;
  --scrollbar-thumb: #434468;
  --scrollbar-hover: #5a5c82;
}