/* ============================================================
   AboutDigitalCameras.com — CSS Custom Properties (Version C)
   /css/variables.css
   ============================================================ */

:root {
  /* ── Brand Colors ─────────────────────────────────────── */
  --clr-primary:        #2563eb;
  --clr-primary-hover:  #1e4fc7;
  --clr-primary-light:  #eff6ff;
  --clr-accent:         #f59e0b;
  --clr-success:        #16a34a;
  --clr-danger:         #dc2626;

  /* ── Light Mode Surface ───────────────────────────────── */
  --clr-bg:             #fafafa;
  --clr-bg-card:        #ffffff;
  --clr-bg-muted:       #f3f4f6;
  --clr-border:         #e5e7eb;
  --clr-border-muted:   #d1d5db;

  /* ── Light Mode Text ──────────────────────────────────── */
  --clr-text:           #111111;
  --clr-text-muted:     #555555;
  --clr-text-light:     #888888;
  --clr-link:           #2563eb;
  --clr-link-hover:     #1e4fc7;

  /* ── Navigation ───────────────────────────────────────── */
  --clr-nav-bg:         #ffffff;
  --clr-nav-border:     #e5e5e5;
  --clr-nav-text:       #111111;
  --clr-nav-text-hover: #2563eb;

  /* ── Footer ───────────────────────────────────────────── */
  --clr-footer-bg:      #1a1a1a;
  --clr-footer-text:    #ffffff;
  --clr-footer-link:    #cccccc;
  --clr-footer-muted:   #888888;
  --clr-footer-border:  #333333;

  /* ── Typography ───────────────────────────────────────── */
  --font-body:          Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-heading:       Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono:          'Courier New', Courier, monospace;

  --text-xs:    0.75rem;   /*  12px */
  --text-sm:    0.875rem;  /*  14px */
  --text-base:  1rem;      /*  16px */
  --text-md:    1.1rem;    /* ~18px */
  --text-lg:    1.25rem;   /*  20px */
  --text-xl:    1.6rem;    /* ~26px */
  --text-2xl:   2.2rem;    /* ~35px */

  --leading-tight:  1.3;
  --leading-base:   1.6;
  --leading-loose:  1.8;

  --fw-normal:  400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* ── Layout ───────────────────────────────────────────── */
  --max-width:          900px;
  --max-width-wide:     1200px;
  --nav-height:         120px;
  --gutter:             1.5rem;
  /* --gutter-lg:          120px; */
  --gutter-lg: 120px;
  --gutter-xl: 160px;


  /* ── Spacing Scale ────────────────────────────────────── */
  --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 */

  /* ── Borders & Radius ─────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 999px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.14);

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.35s ease;

  /* ── Z-Index Scale ────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-nav:    1000;
  --z-modal:  2000;
  --z-toast:  3000;

  /* ── Breakpoints (reference only — use in media queries) ─ */
  /* sm: 480px | md: 768px | lg: 900px | xl: 1200px          */
}

/* ── Dark Mode Overrides ────────────────────────────────── */
body.dark {
  --clr-bg:             #0d0d0d;
  --clr-bg-card:        #1a1a1a;
  --clr-bg-muted:       #222222;
  --clr-border:         #333333;
  --clr-border-muted:   #444444;

  --clr-text:           #e5e5e5;
  --clr-text-muted:     #cccccc;
  --clr-text-light:     #999999;
  --clr-link:           #4ea3ff;
  --clr-link-hover:     #93c5fd;

  --clr-nav-bg:         #111111;
  --clr-nav-border:     #333333;
  --clr-nav-text:       #eeeeee;
  --clr-nav-text-hover: #ffffff;

  --clr-footer-bg:      #000000;
  --clr-footer-border:  #222222;

  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.6);
}