/* === Tokens ===========================================================
 * DISO Books design system.
 * Light SaaS aesthetic. Primary green #1aeb5f. Multi-color accents.
 * ===================================================================== */

:root {
  /* ─── Backgrounds ───────────────────────────────────────────────── */
  --bg:         #F6F8FB;
  --bg-2:       #FFFFFF;
  --surface:    #FFFFFF;
  --surface-2:  #F1F4F9;
  --surface-3:  #E5EAF2;

  /* ─── Borders ───────────────────────────────────────────────────── */
  --b0:         #EEF1F6;
  --b1:         #DDE3EC;
  --b2:         #C4CDD9;
  --b3:         #94A3B8;

  /* ─── Text (deep navy on light) ─────────────────────────────────── */
  --tx:         #0F1A2E;
  --t2:         #475569;
  --t3:         #64748B;
  --t4:         #94A3B8;

  /* ─── DISO Green — primary action ───────────────────────────────── */
  --primary:       #1aeb5f;
  --primary-hi:    #4DF182;
  --primary-lo:    #14B548;
  --primary-deep:  #0D8F39;
  --primary-tint:  rgba(26, 235, 95, 0.12);
  --primary-soft:  rgba(26, 235, 95, 0.06);
  --primary-glow:  rgba(26, 235, 95, 0.22);
  /* Text-on-primary — green is bright, dark text needed for contrast */
  --on-primary:    #062814;

  /* ─── Secondary accents (multi-color status palette) ────────────── */
  --coral:      #F97066;
  --coral-hi:   #FB9183;
  --coral-tint: rgba(249, 112, 102, 0.10);

  --amber:      #F59E0B;
  --amber-hi:   #FBBF24;
  --amber-lo:   #D97706;
  --amber-tint: rgba(245, 158, 11, 0.12);

  --rose:       #EF4444;
  --rose-hi:    #F87171;
  --rose-lo:    #DC2626;
  --rose-tint:  rgba(239, 68, 68, 0.10);

  --indigo:     #4F46E5;
  --indigo-hi:  #7C75EE;
  --indigo-tint: rgba(79, 70, 229, 0.10);

  --purple:     #8B5CF6;
  --purple-tint: rgba(139, 92, 246, 0.10);

  --pink:       #EC4899;
  --pink-tint:  rgba(236, 72, 153, 0.10);

  /* Semantic — what we use everywhere */
  --positive:        var(--primary);
  --positive-deep:   var(--primary-deep);
  --positive-tint:   var(--primary-tint);
  --negative:        var(--rose);
  --negative-tint:   var(--rose-tint);
  --warning:         var(--amber);
  --warning-tint:    var(--amber-tint);
  --info:            var(--indigo);
  --info-tint:       var(--indigo-tint);

  /* ─── Typography ────────────────────────────────────────────────── */
  --fd: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --fb: 'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --fm: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --font-display: var(--fd);
  --font-body:    var(--fb);
  --font-mono:    var(--fm);

  /* Type scale */
  --text-2xs:  0.6875rem;   /* 11px */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 0.9375rem;   /* 15px */
  --text-md:   1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.5rem;      /* 24px */
  --text-2xl:  2rem;        /* 32px */
  --text-3xl:  2.75rem;     /* 44px */
  --text-4xl:  3.5rem;      /* 56px */

  --w-regular: 400;
  --w-medium:  500;
  --w-semibold: 600;
  --w-bold:    700;

  /* ─── Spacing (4px base) ────────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* ─── Radius ────────────────────────────────────────────────────── */
  --r:   12px;
  --rs:  8px;
  --r-1: 4px;
  --r-2: var(--rs);
  --r-3: var(--r);
  --r-4: 16px;
  --r-full: 999px;

  /* ─── Layout ────────────────────────────────────────────────────── */
  --sidebar-w: 244px;
  --topbar-h:  60px;
  --bottom-h:  62px;
  --content-max: 1320px;

  /* ─── Shadows — essential for depth on light bg ─────────────────── */
  --sh-1: 0 1px 2px rgba(15,26,46,0.05), 0 1px 3px rgba(15,26,46,0.06);
  --sh-2: 0 2px 6px rgba(15,26,46,0.06), 0 4px 12px rgba(15,26,46,0.08);
  --sh-3: 0 4px 12px rgba(15,26,46,0.08), 0 12px 32px rgba(15,26,46,0.10);
  --sh-4: 0 8px 24px rgba(15,26,46,0.12), 0 20px 48px rgba(15,26,46,0.14);

  /* Primary-tinted shadows for the green CTAs */
  --sh-primary:        0 4px 14px rgba(26,235,95,0.25), 0 1px 3px rgba(26,235,95,0.15);
  --sh-primary-hover:  0 8px 24px rgba(26,235,95,0.35), 0 2px 6px rgba(26,235,95,0.20);

  /* ─── Motion ────────────────────────────────────────────────────── */
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --t-fast:   180ms var(--ease);
  --t-base:   340ms var(--ease);
  --t-slow:   600ms var(--ease);

  /* ─── Z-index scale ─────────────────────────────────────────────── */
  --z-base:     1;
  --z-sticky:   50;
  --z-sidebar:  100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;

  color-scheme: light;
}