/* ============================================================
   variables.css — ImageResizer.me
   Design Tokens: Colors, Typography, Spacing, Shadows
   
   HOW TO USE:
   Kisi bhi CSS file mein var(--token-name) likh ke use karein
   Example: color: var(--color-blue);
   ============================================================ */

:root {

  /* ──────────────────────────────────────────
     BRAND COLORS
     Website ki main identity colors
  ────────────────────────────────────────── */

  /* Blue — Primary action color (buttons, links, hover) */
  --color-blue:          #2563EB;
  --color-blue-dark:     #1D4ED8;
  --color-blue-light:    #EFF6FF;
  --color-blue-mid:      #DBEAFE;
  --color-blue-border:   #BFDBFE;

  /* Gold — .me brand accent (logo dot, badges) */
  --color-gold:          #D97706;
  --color-gold-dark:     #B45309;
  --color-gold-light:    #FFFBEB;
  --color-gold-mid:      #FDE68A;
  --color-gold-border:   #FCD34D;

  /* ──────────────────────────────────────────
     NEUTRAL / GRAY SCALE
     Text, backgrounds, borders ke liye
  ────────────────────────────────────────── */

  --color-white:         #FFFFFF;
  --color-gray-50:       #F9FAFB;  /* Page background */
  --color-gray-100:      #F3F4F6;  /* Card hover bg */
  --color-gray-200:      #E5E7EB;  /* Borders */
  --color-gray-300:      #D1D5DB;  /* Disabled borders */
  --color-gray-400:      #9CA3AF;  /* Placeholder text */
  --color-gray-500:      #6B7280;  /* Secondary text */
  --color-gray-600:      #4B5563;  /* Nav links */
  --color-gray-700:      #374151;  /* Body text */
  --color-gray-800:      #1F2937;  /* Headings */
  --color-gray-900:      #111827;  /* Dark headings */

  /* ──────────────────────────────────────────
     CATEGORY COLORS
     Har tool category ka apna color
  ────────────────────────────────────────── */

  /* Resizer Category — Blue */
  --cat-resizer-bg:      #EFF6FF;
  --cat-resizer-border:  #BFDBFE;
  --cat-resizer-text:    #1D4ED8;
  --cat-resizer-accent:  #2563EB;

  /* Converter Category — Orange */
  --cat-converter-bg:    #FFF7ED;
  --cat-converter-border:#FED7AA;
  --cat-converter-text:  #C2410C;
  --cat-converter-accent:#EA580C;

  /* Compressor Category — Green */
  --cat-compress-bg:     #ECFDF5;
  --cat-compress-border: #A7F3D0;
  --cat-compress-text:   #065F46;
  --cat-compress-accent: #059669;

  /* Crop Category — Purple */
  --cat-crop-bg:         #F5F3FF;
  --cat-crop-border:     #DDD6FE;
  --cat-crop-text:       #5B21B6;
  --cat-crop-accent:     #7C3AED;

  /* More Tools Category — Pink */
  --cat-more-bg:         #FDF2F8;
  --cat-more-border:     #FBCFE8;
  --cat-more-text:       #9D174D;
  --cat-more-accent:     #DB2777;

  /* ──────────────────────────────────────────
     STATUS COLORS
     Success, Error, Warning
  ────────────────────────────────────────── */

  --color-success:       #059669;
  --color-success-light: #ECFDF5;
  --color-success-border:#A7F3D0;

  --color-error:         #DC2626;
  --color-error-light:   #FEF2F2;
  --color-error-border:  #FECACA;

  --color-warning:       #D97706;
  --color-warning-light: #FFFBEB;
  --color-warning-border:#FDE68A;

  /* ──────────────────────────────────────────
     TYPOGRAPHY
     Fonts aur sizes
  ────────────────────────────────────────── */

  /* Font Family */
  --font-primary:  'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Font Sizes — Mobile first */
  --text-xs:    0.70rem;   /* 11.2px — tiny labels */
  --text-sm:    0.80rem;   /* 12.8px — small text */
  --text-base:  0.875rem;  /* 14px   — body text */
  --text-md:    0.95rem;   /* 15.2px — medium text */
  --text-lg:    1.05rem;   /* 16.8px — large body */
  --text-xl:    1.20rem;   /* 19.2px — small heading */
  --text-2xl:   1.50rem;   /* 24px   — medium heading */
  --text-3xl:   1.875rem;  /* 30px   — large heading */
  --text-4xl:   2.25rem;   /* 36px   — hero heading */
  --text-5xl:   3.00rem;   /* 48px   — big hero */

  /* Font Weights */
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* Line Heights */
  --leading-tight:  1.20;
  --leading-snug:   1.375;
  --leading-normal: 1.60;
  --leading-relaxed:1.75;

  /* Letter Spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.10em;
  --tracking-widest:  0.15em;

  /* ──────────────────────────────────────────
     SPACING
     Padding, margin ke liye consistent values
  ────────────────────────────────────────── */

  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.50rem;   /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1.00rem;   /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.50rem;   /* 24px */
  --space-8:   2.00rem;   /* 32px */
  --space-10:  2.50rem;   /* 40px */
  --space-12:  3.00rem;   /* 48px */
  --space-16:  4.00rem;   /* 64px */
  --space-20:  5.00rem;   /* 80px */
  --space-24:  6.00rem;   /* 96px */

  /* ──────────────────────────────────────────
     BORDER RADIUS
     Corners ko round karne ke liye
  ────────────────────────────────────────── */

  --radius-sm:   6px;    /* Small buttons, tags */
  --radius-md:   10px;   /* Cards, inputs */
  --radius-lg:   14px;   /* Large cards */
  --radius-xl:   20px;   /* Upload zone */
  --radius-full: 9999px; /* Pills, badges */

  /* ──────────────────────────────────────────
     SHADOWS
     Depth feel ke liye
  ────────────────────────────────────────── */

  --shadow-xs:
    0 1px 2px rgba(0, 0, 0, 0.05);

  --shadow-sm:
    0 1px 3px rgba(0, 0, 0, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.06);

  --shadow-md:
    0 4px 6px  rgba(0, 0, 0, 0.07),
    0 2px 4px  rgba(0, 0, 0, 0.06);

  --shadow-lg:
    0 10px 15px rgba(0, 0, 0, 0.10),
    0 4px  6px  rgba(0, 0, 0, 0.05);

  --shadow-xl:
    0 20px 25px rgba(0, 0, 0, 0.10),
    0 10px 10px rgba(0, 0, 0, 0.04);

  --shadow-blue:
    0 4px 14px rgba(37, 99, 235, 0.30);

  --shadow-card-hover:
    0 8px 24px rgba(0, 0, 0, 0.12);

  /* ──────────────────────────────────────────
     TRANSITIONS
     Animation speed
  ────────────────────────────────────────── */

  --transition-fast:   all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: all 0.20s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   all 0.30s cubic-bezier(0.4, 0, 0.2, 1);

  /* ──────────────────────────────────────────
     LAYOUT
     Max widths, container sizes
  ────────────────────────────────────────── */

  --container-max:   1200px;  /* Main content max width */
  --container-sm:    640px;   /* Small (hero text) */
  --container-md:    768px;   /* Medium */
  --header-height:   62px;    /* Header ki height */
  --side-padding:    20px;    /* Left/right page padding */

  /* ──────────────────────────────────────────
     Z-INDEX LAYERS
     Kaunsa element upar dikhega
  ────────────────────────────────────────── */

  --z-base:       1;
  --z-dropdown:   100;
  --z-header:     200;
  --z-mobile-nav: 300;
  --z-modal:      400;
  --z-toast:      500;

  /* ──────────────────────────────────────────
     AD SLOTS
     Google AdSense ke liye reserved space
     (Invisible — Google khud fill karega)
  ────────────────────────────────────────── */

  --ad-top-height:    90px;   /* Top leaderboard */
  --ad-mid-height:    90px;   /* Mid content */
  --ad-sidebar-width: 300px;  /* Sidebar ad */
  --ad-bottom-height: 90px;   /* Bottom banner */

}

/* ──────────────────────────────────────────
   AD SLOT BASE STYLES
   Sirf invisible reserved space —
   koi color/border nahi dikhega users ko
────────────────────────────────────────── */
.ad-slot {
  display: block;
  width: 100%;
  min-height: 1px; /* Invisible jab tak AdSense load na ho */
  overflow: hidden;
}

/* ──────────────────────────────────────────
   SCREEN READER ONLY
   Accessibility ke liye — visually hidden
────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}