/*
 * ============================================================
 * YAHYA AGRICOLA CATTLE RANGE — CSS Variables
 * ============================================================
 * Developer: Mohammed Imran, Lead App & Web Developer
 *            Softomatic BD Limited
 * ============================================================
 *
 * PERSONALIZATION GUIDE:
 * ─────────────────────
 * BRAND NAME   → Search "Yahya Agricola" to update site name
 * GOLD COLOR   → --gold: #C9A84C (dark) / --gold: #A67C00 (light)
 * GREEN COLOR  → --bg-primary: #0D1F0F — main background dark theme
 * LIGHT BG     → --bg-primary: #F5F0E8 — main background light theme
 * FONT HEADING → 'Cormorant Garamond' — change @import in global.css
 * FONT BODY    → 'Inter' — change @import in global.css
 * FONT ACCENT  → 'Bebas Neue' — used for stats, labels
 * ============================================================
 */

/* ── DARK THEME (Default) ─────────────────────────────────── */
[data-theme="dark"],
:root {
  --bg-primary:       #0D1F0F;
  --bg-secondary:     #1A2E1C;
  --bg-card:          #1E3520;
  --bg-card-hover:    #243D26;
  --bg-header:        rgba(13, 31, 15, 0.96);
  --bg-topbar:        #0A1A0C;
  --bg-footer:        #060F07;
  --bg-overlay:       rgba(0, 0, 0, 0.6);

  --text-primary:     #F0EDE6;
  --text-secondary:   #D4CFCA;
  --text-muted:       #A89F91;
  --text-inverse:     #0D1F0F;

  --gold:             #C9A84C;
  --gold-light:       #E8D5A3;
  --gold-dark:        #A67C00;
  --gold-glow:        rgba(201, 168, 76, 0.25);

  --green-accent:     #4A8C4F;
  --green-light:      #6BB870;

  --border:           #2A4A2C;
  --border-gold:      rgba(201, 168, 76, 0.4);
  --border-subtle:    rgba(255, 255, 255, 0.06);

  --shadow-sm:        0 2px 8px rgba(0,0,0,0.3);
  --shadow-md:        0 8px 32px rgba(0,0,0,0.4);
  --shadow-lg:        0 20px 60px rgba(0,0,0,0.5);
  --shadow-gold:      0 4px 24px rgba(201, 168, 76, 0.2);

  --badge-bg:         rgba(201, 168, 76, 0.12);
  --badge-border:     rgba(201, 168, 76, 0.35);

  --scrollbar-thumb: #2A4A2C;
  --scrollbar-track: #0D1F0F;

  --theme-icon: "🌙";
}

/* ── LIGHT THEME ──────────────────────────────────────────── */
[data-theme="light"] {
  --bg-primary:       #F5F0E8;
  --bg-secondary:     #EDE8DC;
  --bg-card:          #FFFFFF;
  --bg-card-hover:    #F9F5EE;
  --bg-header:        rgba(255, 255, 255, 0.96);
  --bg-topbar:        #1A2E1C;
  --bg-footer:        #1A2E1C;
  --bg-overlay:       rgba(0, 0, 0, 0.45);

  --text-primary:     #1A2E1C;
  --text-secondary:   #2E4A30;
  --text-muted:       #5A6B5C;
  --text-inverse:     #F0EDE6;

  --gold:             #A67C00;
  --gold-light:       #8B6500;
  --gold-dark:        #7A5800;
  --gold-glow:        rgba(166, 124, 0, 0.2);

  --green-accent:     #2E6B33;
  --green-light:      #3D8A43;

  --border:           #D4C9A8;
  --border-gold:      rgba(166, 124, 0, 0.4);
  --border-subtle:    rgba(0, 0, 0, 0.08);

  --shadow-sm:        0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:        0 8px 32px rgba(0,0,0,0.12);
  --shadow-lg:        0 20px 60px rgba(0,0,0,0.15);
  --shadow-gold:      0 4px 24px rgba(166, 124, 0, 0.15);

  --badge-bg:         rgba(166, 124, 0, 0.08);
  --badge-border:     rgba(166, 124, 0, 0.3);

  --scrollbar-thumb: #C9A84C;
  --scrollbar-track: #EDE8DC;

  --theme-icon: "☀️";
}

/* ── TYPOGRAPHY ───────────────────────────────────────────── */
:root {
  --font-heading:     'Cormorant Garamond', 'Georgia', serif;
  --font-body:        'Noto Sans Bengali', 'Hind Siliguri', 'Inter', sans-serif;
  --font-accent:      'Bebas Neue', 'Impact', sans-serif;
  --font-english:     'Inter', sans-serif;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;
  --text-4xl:   2.25rem;
  --text-5xl:   3rem;
  --text-6xl:   3.75rem;

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.8;
}

/* ── SPACING ──────────────────────────────────────────────── */
:root {
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  --container: 1200px;
  --container-sm: 960px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;
}

/* ── TRANSITIONS ──────────────────────────────────────────── */
:root {
  --transition-fast:   0.15s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.5s ease;
  --transition-theme:  background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

/* ── Z-INDEX ──────────────────────────────────────────────── */
:root {
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
}