/* ============================================
   DRi X - Design Tokens & Theme Variables
   Change colors here to retheme the entire app
   ============================================ */

:root {
  /* ---- Brand gradient (cyan -> blue -> magenta -> orange -> yellow) ---- */
  --brand-gradient: linear-gradient(110deg,
    hsl(190 100% 50%),
    hsl(221 100% 56%),
    hsl(313 100% 56%),
    hsl(28 100% 55%),
    hsl(48 100% 58%));
  --brand-gradient-soft: linear-gradient(110deg,
    hsl(190 100% 50% / 0.14),
    hsl(221 100% 56% / 0.14),
    hsl(313 100% 56% / 0.14),
    hsl(28 100% 55% / 0.14),
    hsl(48 100% 58% / 0.14));

  /* ---- Accent (solid fallback drawn from the gradient's magenta) ---- */
  --accent:          hsl(322 95% 56%);
  --accent-hover:    hsl(322 95% 47%);
  --accent-subtle:   hsl(322 95% 56% / 0.12);
  --accent-glow:     hsl(322 95% 56% / 0.28);

  /* ---- Backgrounds ---- */
  --bg-primary:      #1a1a1a;
  --bg-secondary:    #222222;
  --bg-sidebar:      #161616;
  --bg-header:       #1e1e1e;
  --bg-surface:      #2a2a2a;
  --bg-surface-hover:#323232;
  --bg-input:        #2c2c2c;

  /* ---- Text ---- */
  --text-primary:    #e8e4e0;
  --text-secondary:  #9a9490;
  --text-muted:      #6b6560;
  --text-on-accent:  #ffffff;
  --text-inverse:    #ffffff;

  /* ---- Borders ---- */
  --border:          #2e2e2e;
  --border-light:    #3a3a3a;

  /* ---- Spacing ---- */
  --sidebar-width:   260px;
  --header-height:   56px;

  /* ---- Radius ---- */
  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       14px;
  --radius-full:     9999px;

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* ---- Typography ---- */
  --font-family:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs:    0.75rem;
  --font-size-sm:    0.8125rem;
  --font-size-base:  0.875rem;
  --font-size-lg:    1rem;
  --font-size-xl:    1.25rem;
  --font-size-2xl:   1.5rem;

  /* ---- Shadows ---- */
  --overlay-soft:    rgba(0, 0, 0, 0.5);
  --overlay-strong:  rgba(0, 0, 0, 0.6);

  --shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:       0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:       0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Brand gradient text helper (e.g. for headings / wordmark) */
.brand-gradient-text,
.spaces__card-link,
.space-config__tab.is-active,
.settings__tab--active,
.users__card-avatar span,
.profile__avatar-initials {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Light theme overrides */
[data-theme='light'] {
  /* ---- Backgrounds ---- */
  --bg-primary:      #f5f6f8;
  --bg-secondary:    #ffffff;
  --bg-sidebar:      #ffffff;
  --bg-header:       #ffffff;
  --bg-surface:      #eef0f3;
  --bg-surface-hover:#e4e7ec;
  --bg-input:        #ffffff;

  /* ---- Text ---- */
  --text-primary:    #1f2937;
  --text-secondary:  #4b5563;
  --text-muted:      #6b7280;
  --text-on-accent:  #ffffff;
  --text-inverse:    #ffffff;

  /* ---- Borders ---- */
  --border:          #d8dde6;
  --border-light:    #c7cfdc;

  /* ---- Shadows ---- */
  --overlay-soft:    rgba(15, 23, 42, 0.35);
  --overlay-strong:  rgba(15, 23, 42, 0.45);

  --shadow-sm:       0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow-md:       0 8px 24px rgba(15, 23, 42, 0.1);
  --shadow-lg:       0 16px 40px rgba(15, 23, 42, 0.14);
}