/* ============================================
   DESIGN TOKENS — İnfolian Color System
   ============================================ */
:root {
  /* Brand Colors */
  --clr-primary:        hsl(258, 90%, 66%);
  --clr-primary-light:  hsl(258, 90%, 80%);
  --clr-primary-dark:   hsl(258, 90%, 50%);
  --clr-accent:         hsl(192, 95%, 60%);
  --clr-accent-warm:    hsl(30,  100%, 65%);

  /* Background Layers */
  --bg-base:        hsl(230, 22%, 7%);
  --bg-surface:     hsl(230, 18%, 10%);
  --bg-card:        hsl(230, 16%, 13%);
  --bg-card-hover:  hsl(230, 16%, 16%);
  --bg-input:       hsl(230, 18%, 16%);
  --bg-glass:       hsla(230, 20%, 14%, 0.7);

  /* Text */
  --txt-primary:    hsl(220, 20%, 95%);
  --txt-secondary:  hsl(220, 10%, 65%);
  --txt-muted:      hsl(220, 8%, 45%);
  --txt-inverse:    hsl(230, 22%, 7%);

  /* Borders */
  --border-subtle:  hsla(220, 20%, 30%, 0.4);
  --border-medium:  hsla(220, 20%, 40%, 0.6);
  --border-focus:   var(--clr-primary);
  --border-glass:   hsla(220, 30%, 60%, 0.12);

  /* Shadows */
  --shadow-sm:   0 2px 8px hsla(230, 30%, 5%, 0.4);
  --shadow-md:   0 8px 24px hsla(230, 30%, 5%, 0.5);
  --shadow-lg:   0 20px 48px hsla(230, 30%, 5%, 0.6);
  --shadow-glow: 0 0 24px hsla(258, 90%, 66%, 0.25);
  --shadow-accent-glow: 0 0 32px hsla(192, 95%, 60%, 0.2);

  /* Status Colors */
  --clr-success:  hsl(142, 70%, 50%);
  --clr-error:    hsl(4, 90%, 60%);
  --clr-warning:  hsl(38, 95%, 56%);
  --clr-info:     hsl(210, 90%, 60%);

  /* Category Colors */
  --cat-tech:      hsl(192, 95%, 55%);
  --cat-science:   hsl(142, 70%, 52%);
  --cat-art:       hsl(300, 80%, 65%);
  --cat-lifestyle: hsl(30, 100%, 62%);
  --cat-business:  hsl(220, 90%, 65%);

  /* Spacing */
  --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;

  /* Border Radius */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-full: 9999px;

  /* Typography */
  --font-ui:     'Outfit', sans-serif;
  --font-prose:  'Crimson Pro', serif;

  /* Transitions */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  150ms;
  --dur-normal: 250ms;
  --dur-slow:  400ms;
  --dur-page:  500ms;

  /* Layout */
  --nav-height:   68px;
  --max-content:  1180px;
  --max-prose:    760px;
}