/* DROIX Design System — Colors & Typography Tokens
 * Source: DROIX Figma (Ui-kit/Colors, Ui-kit/Typography).
 * Shared base loaded as a dependency of the utility-page stylesheets
 * (404, terms, contact, compare, thank-you, account, login, notifications)
 * so it never bleeds site-wide.
 *
 * Fonts (Ubuntu + Inter) are self-hosted via assets/css/fonts.css — do NOT
 * re-import Google Fonts here.
 */

:root {
  /* ──────────────── Brand ──────────────── */
  --droix-green:        #B0CB1F;  /* primary brand — logo leaf, CTAs, accents */
  --droix-green-dark:   #74A401;  /* hover / pressed / stroke on green */
  --droix-green-soft:   #6DA544;  /* secondary leaf tone (logo inner) */
  --droix-green-tint:   #F3F8DC;  /* subtle fill / chip bg */

  --droix-purple:       #BB3DA1;  /* brand accent — "Purple" in kit */
  --droix-yellow:       #FFDA44;  /* promo / offer chip */
  --droix-red-sale:     #D80027;  /* sale / price-drop */

  /* ──────────────── Foreground / text ──────────────── */
  --fg-1: #0B0B0B;   /* Black — primary text */
  --fg-2: #242421;   /* Near-black — headings / nav */
  --fg-3: #484848;   /* Third — secondary text */
  --fg-4: #666666;   /* Grey — muted labels */
  --fg-5: #999999;   /* Caption / placeholder-ish */
  --fg-disabled: #AAAAAA;

  /* Tailwind-aligned neutrals seen heavily in Figma */
  --fg-gray-900: #111827;
  --fg-gray-800: #1F2937;
  --fg-gray-500: #6B7280;
  --fg-gray-400: #9CA3AF;
  --fg-gray-300: #D1D5DB;
  --fg-gray-200: #E5E7EB;
  --fg-gray-100: #F3F4F6;

  /* ──────────────── Backgrounds / surfaces ──────────────── */
  --bg-0:  #FFFFFF;  /* page */
  --bg-1:  #FCFCFC;  /* Grey surface */
  --bg-2:  #F8F8F8;  /* Secondary surface */
  --bg-3:  #F6F8FA;  /* panel / card bg used in UI-kit sheets */
  --bg-4:  #F0F0F0;  /* divider / subtle fill */
  --bg-dark: #11182C; /* dark utility bar */

  /* ──────────────── Stroke / divider ──────────────── */
  --stroke-1: #F0F0F0;
  --stroke-2: #EEEEEE;
  --stroke-3: #D9D9D9;
  --stroke-strong: #0B0B0B;

  /* ──────────────── Semantic ──────────────── */
  --danger:  #DC3545;
  --warning: #FFBE1E;
  --success: #6DA544;
  --info:    #017DC5;
  --blue:    #0052B4;

  /* ──────────────── Radii ──────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 30px;
  --radius-3xl: 40px;
  --radius-pill: 9999px;

  /* ──────────────── Spacing scale (8/4) ──────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ──────────────── Shadows (soft, low-contrast) ──────────────── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
  --shadow-sm: 0 2px 6px rgba(38,38,38,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --shadow-md: 0 8px 24px rgba(17,24,39,0.06), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 20px 40px rgba(17,24,39,0.08), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-cta: 0 8px 20px rgba(176,203,31,0.35);

  /* ──────────────── Typography stacks ──────────────── */
  --font-ui:      "Ubuntu", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", "Ubuntu", system-ui, -apple-system, sans-serif;
  --font-display: "PP Pangram Sans", "Ubuntu", "Inter", system-ui, sans-serif;

  /* ──────────────── Base type tokens ──────────────── */
  --fs-hero:   80px;
  --fs-h1:     48px;
  --fs-h2:     36px;
  --fs-h2-mob: 24px;
  --fs-h3:     20px;
  --fs-title:  16px;
  --fs-title2: 14px;
  --fs-body:   14px;
  --fs-body-sm:12px;
  --fs-button: 16px;

  --lh-tight:  1.0;
  --lh-snug:   1.25;
  --lh-normal: 1.5;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
}

/* ════════════════════════════════════════════════════════════════
   Utility pages render in the theme's content+sidebar layout, which
   constrains .content-area to ~58% and left-shifts it. Force full
   width + drop the (usually empty) sidebar so the centred page
   wrappers (.ct-main-wrap / .cmp-main / .tos-main / .e404-*) actually
   centre. Scoped to the utility body classes so home/PDP are untouched.
   ════════════════════════════════════════════════════════════════ */
body.error404 #primary.content-area,        body.error404 .content-area,
body.droix-contact #primary.content-area,   body.droix-contact .content-area,
body.droix-compare #primary.content-area,   body.droix-compare .content-area,
body.droix-static-page #primary.content-area, body.droix-static-page .content-area {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
body.error404 #secondary,        body.error404 .widget-area,
body.droix-contact #secondary,   body.droix-contact .widget-area,
body.droix-compare #secondary,   body.droix-compare .widget-area,
body.droix-static-page #secondary, body.droix-static-page .widget-area { display: none !important; }