/* =============================================
   Amanah.az — Design Tokens as CSS Custom Properties
   Source of truth: design_tokens.json
   ============================================= */

:root {
  /* ── Colors ── */
  --color-primary: #0F4C3A;
  --color-accent: #D4AF37;
  --color-text: #333333;
  --color-text-secondary: #555555;
  --color-text-muted: #888888;
  --color-text-faint: #999999;
  --color-text-subtle: #aaaaaa;
  --color-heading: #0F4C3A;
  --color-bg: #FFFFFF;
  --color-bg-alt: #f4f4f4;
  --color-bg-warm: #fdfcf8;
  --color-bg-tint: #f9fcfb;
  --color-bg-card: #fcfcfc;
  --color-sidebar-bg: #051a14;
  --color-sidebar-text: #FFFFFF;
  --color-border: #eeeeee;
  --color-border-light: #f0f0f0;
  --color-border-medium: #e8e8e8;
  --color-border-accent: #dddddd;
  --color-highlight: rgba(212, 175, 55, 0.15);
  --color-overlay: rgba(0, 0, 0, 0.5);

  /* ── Typography ── */
  --font-heading: 'Alegreya', serif;
  --font-body: 'Inter', sans-serif;
  --size-body: 1rem;
  --size-body-article: 1.125rem;
  --size-h1-desktop: 2.5rem;
  --size-h1-mobile: 1.5rem;
  --size-h2: 1.5rem;
  --size-h3: 1.3rem;
  --size-h4: 1.15rem;
  --size-h2-mobile: 1.25rem;
  --size-h3-mobile: 1.125rem;
  --size-card-title: 1.4rem;
  --size-card-title-mobile: 1.125rem;
  --size-meta: 0.85rem;
  --size-excerpt: 1rem;
  --size-excerpt-mobile: 0.875rem;
  --size-small: 0.75rem;
  --size-nav: 0.95rem;
  --size-nav-mobile: 0.9375rem;
  --lh-body: 1.6;
  --lh-article: 1.8;
  --lh-heading: 1.3;
  --lh-mobile-article: 1.7;

  /* ── Spacing ── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* ── Layout ── */
  --sidebar-width-desktop: 20vw;
  --content-width-desktop: 80vw;
  --sidebar-width-post: 25vw;
  --post-max-width: 900px;
  --mobile-sidebar-width: 280px;
  --bp-desktop: 768px;

  /* ── Radius ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-round: 50%;

  /* ── Shadows ── */
  --shadow-card: 0 5px 15px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-table: 0 0 20px rgba(0, 0, 0, 0.05);
  --shadow-button: 0 2px 8px rgba(0, 0, 0, 0.2);

  /* ── Transitions ── */
  --transition-fast: 0.15s ease-out;
  --transition-default: 0.2s ease;
  --transition-color: 0.3s;
  --transition-sidebar: 0.3s ease;
}

/* ── Dark mode (to be activated when needed) ── */
[data-theme="dark"] {
  --color-primary: #2ECC71;
  --color-accent: #F0D060;
  --color-text: #E0E0E0;
  --color-text-secondary: #B0B0B0;
  --color-text-muted: #888888;
  --color-text-faint: #666666;
  --color-heading: #2ECC71;
  --color-bg: #121212;
  --color-bg-alt: #1E1E1E;
  --color-bg-warm: #1A1A1A;
  --color-bg-tint: #161616;
  --color-bg-card: #1E1E1E;
  --color-sidebar-bg: #0A0A0A;
  --color-border: #2A2A2A;
  --color-border-light: #222222;
  --color-border-medium: #333333;
  --color-highlight: rgba(240, 208, 96, 0.15);
  --color-overlay: rgba(0, 0, 0, 0.7);
}