/**
 * HBN Media Design Tokens
 * Single source of truth for all design values.
 * Extracted from Stitch project: 18084655077599459398
 *
 * DO NOT scatter values across component files.
 * Update here to propagate everywhere.
 */

:root {
  /* =========================================================
     BRAND COLORS
     ========================================================= */
  --hbn-red:         #E11D48;
  --hbn-red-hover:   #BE123C;
  --hbn-red-light:   #FFF1F4;
  --hbn-red-dim:     rgba(225, 29, 72, 0.08);

  /* =========================================================
     DARK SURFACES (Utility Bar, Footer)
     ========================================================= */
  --hbn-dark:        #0B0F19;
  --hbn-dark-card:   #141B2B;
  --hbn-slate:       #1E293B;
  --hbn-slate-mid:   #334155;
  --hbn-slate-muted: #94A3B8;
  --hbn-slate-dim:   #475569;

  /* =========================================================
     LIGHT SURFACES (Body, Cards, Header)
     ========================================================= */
  --hbn-canvas:      #F4F5F8;
  --hbn-white:       #FFFFFF;
  --hbn-card-bg:     #FFFFFF;
  --hbn-border:      #E5E7EB;
  --hbn-border-dark: #D1D5DB;

  /* =========================================================
     TEXT HIERARCHY
     ========================================================= */
  --hbn-text-primary:   #111827;
  --hbn-text-secondary: #374151;
  --hbn-text-muted:     #6B7280;
  --hbn-text-faint:     #9CA3AF;
  --hbn-text-link:      #E11D48;

  /* =========================================================
     SEMANTIC COLORS
     ========================================================= */
  --hbn-amber:       #D97706;
  --hbn-amber-bg:    rgba(217, 119, 6, 0.08);
  --hbn-blue:        #2563EB;
  --hbn-blue-bg:     rgba(37, 99, 235, 0.08);
  --hbn-green:       #16A34A;
  --hbn-green-bg:    rgba(22, 163, 74, 0.08);

  /* =========================================================
     TYPOGRAPHY — FONT FAMILIES
     ========================================================= */
  --font-sans:   'Inter', 'Noto Sans Devanagari', system-ui, -apple-system, sans-serif;
  --font-hindi:  'Noto Sans Devanagari', 'Inter', system-ui, sans-serif;
  --font-ui:     'Inter', system-ui, -apple-system, sans-serif;

  /* =========================================================
     TYPOGRAPHY — 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 */

  /* =========================================================
     TYPOGRAPHY — LINE HEIGHTS (Hindi-optimized)
     ========================================================= */
  --leading-tight:   1.25;
  --leading-snug:    1.35;  /* Optimized for Devanagari headlines */
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;  /* Optimal for Hindi body text */
  --leading-loose:   1.75;

  /* =========================================================
     SPACING SCALE (8pt grid)
     ========================================================= */
  --space-px:   1px;
  --space-0-5:  0.125rem;  /* 2px */
  --space-1:    0.25rem;   /* 4px */
  --space-1-5:  0.375rem;  /* 6px */
  --space-2:    0.5rem;    /* 8px */
  --space-2-5:  0.625rem;  /* 10px */
  --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 */

  /* =========================================================
     LAYOUT
     ========================================================= */
  --container-max:   1280px;
  --container-px:    2rem;      /* Desktop side padding */
  --container-px-sm: 1rem;      /* Mobile side padding */
  --sidebar-width:   300px;
  --article-max:     720px;     /* Max article reading width */

  /* =========================================================
     BORDER RADIUS
     ========================================================= */
  --radius-sm:   0.25rem;   /* 4px */
  --radius-md:   0.5rem;    /* 8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-full: 9999px;

  /* =========================================================
     SHADOWS
     ========================================================= */
  --shadow-card:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-hover:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-nav:    0 1px 3px rgba(0,0,0,0.05);
  --shadow-red:    0 2px 8px rgba(225, 29, 72, 0.25);

  /* =========================================================
     TRANSITIONS
     ========================================================= */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* =========================================================
     Z-INDEX SCALE
     ========================================================= */
  --z-base:       1;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-fixed:      300;
  --z-overlay:    400;
  --z-modal:      500;
  --z-toast:      600;

  /* =========================================================
     BREAKPOINTS (for reference — used in media queries)
     mobile:   360px – 767px
     tablet:   768px – 1023px
     desktop:  1024px – 1279px
     wide:     1280px+
     ========================================================= */
}

/* =========================================================
   DARK MODE TOKENS (when .dark or prefers-color-scheme: dark)
   Currently minimal — HBN design is light-mode first
   ========================================================= */
@media (prefers-color-scheme: dark) {
  :root {
    /* Override only if dark mode is desired in the future */
  }
}