/* ==========================================================================
   NOVERA DESIGN SYSTEM — CSS VARIABLES
   Easily modify any brand color, font, spacing, or shadow from this single file.
   ========================================================================== */

:root {
  /* Core Brand Palette (Inspired by Official NOVERA Packaging) */
  --color-bg-primary: #F7F5F0;       /* Warm Off-White */
  --color-bg-surface: #FFFFFF;       /* Pure White */
  --color-bg-elevated: #FAF9F6;      /* Subtle Elevated Cream */
  --color-text-primary: #171717;     /* Deep Black */
  --color-text-secondary: #555555;   /* Dark Gray */
  --color-text-muted: #767676;       /* Muted Caption Gray */
  --color-border: #E8E6E1;           /* Light Gray */
  --color-border-strong: #D4D1C9;    /* Medium Warm Border */
  --color-accent: #174C3A;           /* Dark Green Accent */
  --color-accent-hover: #11392B;     /* Deeper Forest Green */
  --color-accent-soft: rgba(23, 76, 58, 0.08);
  --color-accent-border: rgba(23, 76, 58, 0.22);

  /* Status Colors */
  --color-gold-warranty: #B89241;    /* Packaging 2-Year Warranty Seal Accent */
  --color-danger: #B91C1C;
  --color-danger-soft: rgba(185, 28, 28, 0.08);
  --color-success: #174C3A;
  --color-warning: #92400E;

  /* Typography */
  --font-arabic: 'IBM Plex Sans Arabic', 'Cairo', system-ui, -apple-system, sans-serif;
  --font-latin: 'IBM Plex Sans', 'Inter', system-ui, -apple-system, sans-serif;

  /* Layout & Container */
  --container-max: 1320px;
  --container-narrow: 960px;
  --header-height: 82px;
  --announcement-height: 40px;

  /* Border Radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Shadows — Subtle, International Luxury Feel */
  --shadow-xs: 0 2px 8px rgba(23, 23, 23, 0.03);
  --shadow-sm: 0 6px 20px rgba(23, 23, 23, 0.05);
  --shadow-md: 0 14px 36px rgba(23, 23, 23, 0.07);
  --shadow-lg: 0 24px 60px rgba(23, 23, 23, 0.11);

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s var(--ease-out);
  --transition-base: 0.35s var(--ease-out);
  --transition-slow: 0.6s var(--ease-out);
}