/*
 * Qidaya design tokens — emitted from DESIGN.md
 * Loaded FIRST in base.html so Bootstrap can be overridden via --bs-* hooks.
 * Do not hardcode hex values in other CSS files; reference these vars instead.
 */
:root {
  /* ---------- Colors: surfaces ---------- */
  --color-bg:               #F8FAFC;
  --color-surface:          #FFFFFF;
  --color-surface-muted:    #F1F5F9;
  --color-surface-strong:   #E2E8F0;
  /* Lifted surface for sections that are dark-on-light in light mode
   * (sidebar, footer, CTA band). Equals --color-surface in light so
   * components stay correct; in dark mode it elevates one step above
   * the page bg so dark-on-dark sections remain visually distinct. */
  --color-surface-elevated: #FFFFFF;
  /* Sticky-nav background. Translucent so the page can blur through. */
  --color-nav-bg:           rgba(255, 255, 255, 0.92);

  /* ---------- Colors: text ---------- */
  --color-text:           #0F172A;
  --color-text-muted:     #64748B;
  --color-text-inverse:   #F8FAFC;

  /* ---------- Colors: borders ---------- */
  --color-border:         #E2E8F0;
  --color-border-strong:  #CBD5E1;

  /* ---------- Colors: sidebar ---------- */
  --color-sidebar-bg:     #0F172A;
  --color-sidebar-text:   #CBD5E1;
  --color-sidebar-muted:  #64748B;
  --color-sidebar-active: #06B6D4;
  --color-sidebar-hover:  #1E293B;

  /* ---------- Colors: accent + semantic ---------- */
  --color-accent:        #06B6D4;
  --color-accent-hover:  #0891B2;
  --color-accent-soft:   #CFFAFE;

  --color-success:       #10B981;
  --color-success-soft:  #D1FAE5;
  --color-warning:       #F59E0B;
  --color-warning-soft:  #FEF3C7;
  --color-danger:        #E11D48;
  --color-danger-soft:   #FFE4E6;
  --color-info:          #3B82F6;
  --color-info-soft:     #DBEAFE;

  /* ---------- Type ---------- */
  --type-family:        "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --type-family-mono:   ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace;

  --type-size-xs:       12px;
  --type-size-sm:       13px;
  --type-size-base:     15px;
  --type-size-lg:       17px;
  --type-size-xl:       20px;
  --type-size-2xl:      24px;
  --type-size-3xl:      32px;
  --type-size-4xl:      44px;
  --type-size-5xl:      60px;

  --type-weight-regular:  400;
  --type-weight-medium:   500;
  --type-weight-semibold: 600;
  --type-weight-bold:     700;

  --type-leading-tight: 1.2;
  --type-leading-base:  1.5;
  --type-leading-loose: 1.7;

  /* ---------- Spacing (4px scale) ---------- */
  --space-0:  0;
  --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;

  /* ---------- Radii ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-xs:    0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:    0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md:    0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg:    0 12px 24px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.06);
  --shadow-focus: 0 0 0 3px rgba(6, 182, 212, 0.25);
  --shadow-focus-danger: 0 0 0 3px rgba(225, 29, 72, 0.25);

  /* ---------- Motion ---------- */
  --motion-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-slow: 260ms cubic-bezier(0.4, 0, 0.2, 1);

  --ease-out-expo:  cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Sidebar shell ---------- */
  --sidebar-width:           240px;
  --sidebar-width-collapsed: 64px;

  /* ---------- Bootstrap 5 overrides ----------
   * These let stock Bootstrap classes (.btn, .card, .alert, .table, etc.)
   * adopt our palette without rewriting markup.
   */
  --bs-body-bg:        var(--color-bg);
  --bs-body-color:     var(--color-text);
  --bs-body-font-family: var(--type-family);
  --bs-body-font-size:   var(--type-size-base);

  --bs-primary:           #06B6D4;
  --bs-primary-rgb:       6, 182, 212;
  --bs-primary-bg-subtle: var(--color-accent-soft);
  --bs-primary-text-emphasis: var(--color-accent-hover);

  --bs-secondary:         #64748B;
  --bs-secondary-rgb:     100, 116, 139;

  --bs-success:           #10B981;
  --bs-success-rgb:       16, 185, 129;
  --bs-info:              #3B82F6;
  --bs-info-rgb:          59, 130, 246;
  --bs-warning:           #F59E0B;
  --bs-warning-rgb:       245, 158, 11;
  --bs-danger:            #E11D48;
  --bs-danger-rgb:        225, 29, 72;

  --bs-light:             var(--color-surface-muted);
  --bs-dark:              var(--color-text);

  --bs-border-color:      var(--color-border);
  --bs-border-radius:     var(--radius-md);
  --bs-border-radius-sm:  var(--radius-sm);
  --bs-border-radius-lg:  var(--radius-lg);
  --bs-border-radius-pill: var(--radius-pill);

  --bs-link-color:        var(--color-accent-hover);
  --bs-link-hover-color:  var(--color-accent);
  --bs-link-color-rgb:    8, 145, 178;
}

/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms linear;
    --motion-base: 0ms linear;
    --motion-slow: 0ms linear;
  }
}

/* ============================================================
 * Dark mode tokens.
 *
 * Two activation paths:
 *   1. Explicit:  <html data-theme="dark">           (user picked dark)
 *   2. Auto:      <html data-theme="auto"> + OS dark (follow system)
 *
 * Tokens not overridden here keep their light values. Only colors,
 * shadow opacities, and the lifted-surface stack change.
 *
 * The two selector blocks are duplicates by design — CSS doesn't have
 * a clean way to share a declaration block across both a selector and
 * a media-query without preprocessing, and ~15 lines of duplication is
 * cheaper than a build step.
 * ============================================================ */
:root[data-theme="dark"] {
  --color-bg:               #0F172A;
  --color-surface:           #1E293B;
  --color-surface-muted:     #1E293B;
  --color-surface-strong:    #334155;
  --color-surface-elevated:  #1E293B;
  --color-nav-bg:            rgba(15, 23, 42, 0.85);

  --color-text:              #F8FAFC;
  --color-text-muted:        #CBD5E1;
  /* --color-text-inverse stays light: it's used for text ON dark surfaces
     (sidebar, footer, CTA band, hero) which remain dark in both themes. */

  --color-border:            #334155;
  --color-border-strong:     #475569;

  /* Sidebar lifts one step in dark so it stays distinct from page bg. */
  --color-sidebar-bg:        #1E293B;
  --color-sidebar-text:      #E2E8F0;
  --color-sidebar-muted:     #94A3B8;
  --color-sidebar-hover:     #334155;

  --color-accent-soft:       rgba(6, 182, 212, 0.18);

  --color-success-soft:      rgba(16, 185, 129, 0.18);
  --color-warning-soft:      rgba(245, 158, 11, 0.18);
  --color-danger-soft:       rgba(225, 29, 72, 0.18);
  --color-info-soft:         rgba(59, 130, 246, 0.18);

  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.30);
  --shadow-lg:    0 12px 24px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.35);

  --bs-light:     var(--color-surface-muted);
  --bs-dark:      var(--color-text);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --color-bg:               #0F172A;
    --color-surface:           #1E293B;
    --color-surface-muted:     #1E293B;
    --color-surface-strong:    #334155;
    --color-surface-elevated:  #1E293B;

    --color-text:              #F8FAFC;
    --color-text-muted:        #CBD5E1;
    --color-text-inverse:      #0F172A;

    --color-border:            #334155;
    --color-border-strong:     #475569;

    --color-sidebar-bg:        #1E293B;
    --color-sidebar-text:      #E2E8F0;
    --color-sidebar-muted:     #94A3B8;
    --color-sidebar-hover:     #334155;

    --color-accent-soft:       rgba(6, 182, 212, 0.18);

    --color-success-soft:      rgba(16, 185, 129, 0.18);
    --color-warning-soft:      rgba(245, 158, 11, 0.18);
    --color-danger-soft:       rgba(225, 29, 72, 0.18);
    --color-info-soft:         rgba(59, 130, 246, 0.18);

    --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.30);
    --shadow-lg:    0 12px 24px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.35);

    --bs-light:     var(--color-surface-muted);
    --bs-dark:      var(--color-text);
  }
}