/* ═══════════════════════════════════════════════════════════════
   base.css — Sivakasi666crackers
   Shared foundation: design tokens, reset and base element defaults.
   Loaded first by both the storefront (style.css) and the admin
   panel (admin.css). Page-specific layout lives in those files.
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  /* Brand colors */
  --clr-red:       #C1121F;
  --clr-red-dark:  #96040F;
  --clr-orange:    #FF6F00;
  --clr-amber:     #FFA000;
  --clr-gold:      #FFC107;
  --clr-teal:      #00897B;
  --clr-teal-dark: #00695C;
  --clr-magenta:   #D81B60;
  --clr-magenta-dk:#AD1457;

  /* Header gradient */
  --gradient-brand: linear-gradient(135deg, #96040F 0%, #C1121F 30%, #FF6F00 65%, #FFC107 100%);
  --gradient-gold:  linear-gradient(135deg, #FFC107, #FF6F00);
  --gradient-hero:  linear-gradient(135deg, #6A0000 0%, #C1121F 40%, #FF6F00 75%, #FFC107 100%);

  /* Neutrals */
  --clr-bg:        #FAFAFA;
  --clr-bg-card:   #FFFFFF;
  --clr-text:      #212121;
  --clr-text-muted:#757575;
  --clr-border:    #E0E0E0;
  --clr-divider:   #F0F0F0;

  /* Status colors */
  --clr-green:     #2E7D32;
  --clr-danger:    #B71C1C;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl:32px;

  /* Typography */
  --font-heading: 'Outfit', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-ui:      'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Radii */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-pill:999px;

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.14);
  --shadow-btn:   0 4px 12px rgba(193,18,31,0.35);

  /* Transitions */
  --transition: 0.2s ease;
  --transition-slow: 0.35s ease;

  /* Header height */
  --notice-height: 34px;
  --header-height: calc(56px + var(--notice-height));
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Base Elements ──────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* NOTE: font-family for form controls is page-specific on purpose.
   style.css pins it to --font-body; admin.css pins it to --font-ui.
   Do not switch these to `inherit` — many storefront components set
   --font-heading (Outfit) on their containers. */