/* Favedom Design System -- compiled token stylesheet. All tokens inlined. */
/* Favedom Color Tokens */
:root {
  /* ── Base surfaces ── */
  --color-bg:           #0B0D18;
  --color-surface-1:    #13162A;
  --color-surface-2:    #1B1F35;
  --color-surface-3:    #252A45;
  --color-surface-4:    #2E3355;
  --color-border:       #2B2F4E;
  --color-border-muted: #1D2038;

  /* ── Purple / Brand ── */
  --color-purple-50:  #EDE8FF;
  --color-purple-100: #D5CCFF;
  --color-purple-200: #BAA8FF;
  --color-purple-300: #9D84FF;
  --color-purple-400: #8A6BFF;
  --color-purple-500: #765CF6;  /* primary — #765CF6 gives 4.54:1 with white (AA compliant) */
  --color-purple-600: #6847E0;
  --color-purple-700: #5233C2;
  --color-purple-800: #3A21A0;
  --color-purple-900: #231472;

  /* ── Text ── */
  --color-text-primary:   #FFFFFF;
  --color-text-secondary: #9CA5C2;
  --color-text-muted:     #7E87AA;  /* lightened from #6C7498 → 5.47:1 on bg (AA) */
  --color-text-disabled:  #3D4468;
  --color-text-accent:    #9D84FF;
  --color-text-inverse:   #0B0D18;

  /* ── Semantic status ── */
  --color-success:         #22C55E;
  --color-success-subtle:  rgba(34,197,94,0.12);
  --color-warning:         #F59E0B;
  --color-warning-subtle:  rgba(245,158,11,0.12);
  --color-error:           #EF4444;
  --color-error-subtle:    rgba(239,68,68,0.12);
  --color-info:            #3B82F6;
  --color-info-subtle:     rgba(59,130,246,0.12);

  /* ── Library Popularity ── */
  --color-pop-very-high: #22C55E;
  --color-pop-high:      #84CC16;
  --color-pop-moderate:  #F59E0B;
  --color-pop-low:       #6C7498;

  /* ── Overlays & scrims ── */
  --color-overlay-sm:    rgba(255,255,255,0.04);
  --color-overlay-md:    rgba(255,255,255,0.08);
  --color-overlay-hover: rgba(255,255,255,0.06);
  --color-scrim-dark:    rgba(11,13,24,0.82);
  --color-scrim-cover:   linear-gradient(to top, rgba(11,13,24,0.95) 0%, rgba(11,13,24,0.4) 60%, transparent 100%);
}

/* Favedom Typography Tokens */
/* Google Fonts: DM Sans — closest match to the mockup's clean bold sans */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=Barlow+Condensed:wght@500;600;700&display=swap');

/* Cascadia Code — upload CascadiaCode.woff2 to assets/fonts/ to activate */
@font-face {
  font-family: 'Cascadia Code';
  src: url('../assets/fonts/CascadiaCode.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
/* NOTE: No official font files were provided. DM Sans is substituted as the nearest
   visual match to the bold sans-serif seen in the UI mockups. Supply .woff2 files to
   replace with the exact production typeface. */

:root {
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-condensed: 'Barlow Condensed', 'DM Sans', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', monospace;

  /* Scale */
  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.75rem;     /* 12px */
  --text-base: 0.875rem;    /* 14px */
  --text-md:   1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.25rem;     /* 20px */
  --text-2xl:  1.5rem;      /* 24px */
  --text-3xl:  1.875rem;    /* 30px */
  --text-4xl:  2.25rem;     /* 36px */
  --text-5xl:  3rem;        /* 48px */
  --text-6xl:  3.75rem;     /* 60px */

  /* Weight */
  --font-light:     300;
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.14em;
}

/* Favedom Spacing & Layout Tokens */
:root {
  /* 4px base grid */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */

  /* Border radii */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Layout */
  --max-width-content: 1200px;
  --max-width-wide:    1440px;
  --nav-height:        60px;
  --mobile-nav-height: 56px;
  --sidebar-width:     280px;
  --cover-ratio:       1.5; /* @kind other */
}

/* Favedom Effects Tokens — shadow, blur, animation */
:root {
  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-sm: 0 2px 6px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.55);
  --shadow-lg: 0 8px 28px rgba(0,0,0,0.65);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.75);

  /* Purple glow — buttons, focused elements */
  --shadow-purple-sm: 0 2px 12px rgba(123,92,246,0.22);
  --shadow-purple-md: 0 4px 24px rgba(123,92,246,0.32);
  --shadow-purple-lg: 0 8px 40px rgba(123,92,246,0.42);

  /* Cover card glow — book covers on hover */
  --shadow-cover: 0 12px 40px rgba(0,0,0,0.7);

  /* Blur */
  --blur-sm:  blur(4px);  /* @kind other */
  --blur-md:  blur(8px);  /* @kind other */
  --blur-lg:  blur(16px); /* @kind other */
  --blur-xl:  blur(24px); /* @kind other */

  /* Transitions */
  --ease-out:    cubic-bezier(0.16,1,0.3,1);   /* @kind other */
  --ease-bounce: cubic-bezier(0.34,1.56,0.64,1); /* @kind other */

  --duration-fast:   100ms; /* @kind other */
  --duration-base:   180ms; /* @kind other */
  --duration-slow:   300ms; /* @kind other */
  --duration-slower: 480ms; /* @kind other */

  --transition-fast:   var(--duration-fast)   var(--ease-out); /* @kind other */
  --transition-base:   var(--duration-base)   var(--ease-out); /* @kind other */
  --transition-slow:   var(--duration-slow)   var(--ease-out); /* @kind other */
}