/* ============================================
   APP — Design Tokens (extends landing page tokens)
   ============================================ */

:root {
  /* ── Same core palette ── */
  --clr-primary:       #1a1a2e;
  --clr-primary-light: #2d2d44;
  --clr-primary-dark:  #0f0f1a;
  --clr-accent:        #e8a838;
  --clr-accent-light:  #f0c06a;
  --clr-accent-dark:   #c98a1e;
  --clr-sage:          #6b9080;
  --clr-sage-light:    #8fb5a6;
  --clr-sage-dark:     #4f7366;
  --clr-coral:         #e07a5f;
  --clr-coral-light:   #e99983;
  --clr-coral-dark:    #c45d42;
  --clr-cream:         #faf8f5;
  --clr-cream-dark:    #f0ece6;
  --clr-text:          #2c2c3a;
  --clr-text-light:    #6b6b7b;
  --clr-text-muted:    #9a9aad;
  --clr-white:         #ffffff;
  --clr-black:         #0a0a12;
  --clr-border:        #e4e2de;
  --clr-success:       #4caf7d;
  --clr-warning:       #f0ad4e;
  --clr-error:         #e05252;

  /* ── App-specific ── */
  --sidebar-width: 260px;
  --sidebar-collapsed: 72px;
  --header-height: 64px;

  --clr-bg:         var(--clr-cream);
  --clr-surface:    var(--clr-white);
  --clr-surface-hover: #f7f5f2;

  /* ── Typography ── */
  --ff-heading: 'Inter', sans-serif;
  --ff-body:    'DM Sans', sans-serif;
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem;
  --fs-md: 1.125rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem;
  --fs-2xl: 2rem; --fs-3xl: 2.5rem;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ── Spacing ── */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;
  --sp-12: 3rem; --sp-16: 4rem;

  /* ── Radius ── */
  --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
  --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(26,26,46,0.04);
  --shadow-sm:  0 2px 4px rgba(26,26,46,0.06);
  --shadow-md:  0 4px 12px rgba(26,26,46,0.08);
  --shadow-lg:  0 8px 24px rgba(26,26,46,0.10);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms; --dur-normal: 300ms; --dur-slow: 500ms;
}

/* Dark theme */
[data-theme="dark"] {
  --clr-bg:           #121218;
  --clr-surface:      #1e1e2a;
  --clr-surface-hover: #2a2a3a;
  --clr-text:         #e8e8f0;
  --clr-text-light:   #a0a0b8;
  --clr-text-muted:   #6b6b80;
  --clr-border:       #2d2d3f;
  --clr-primary:      #e8e8f0;
  --clr-cream:        #121218;
  --clr-cream-dark:   #1a1a24;
  --clr-white:        #1e1e2a;
}