/* ============================================================
   MODULUSIQ MARKETING — DESIGN TOKENS
   ModulusOS palette: warm taupe greyscale, deeper red accent.
   Larger type, softer radius, softer shadows than the trade apps.
   ============================================================ */

:root {
  /* Typography — ModulusOS scale (15px body) */
  --font-family:        'Nunito Sans', system-ui, sans-serif;
  --font-size-micro:    11px;
  --font-size-label:    12px;
  --font-size-small:    13px;
  --font-size-body:     15px;
  --font-size-heading:  18px;
  --font-size-title:    22px;
  --font-size-display:  32px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi:   600;
  --font-weight-bold:   700;
  --font-weight-black:  800;
  --line-height:        1.45;

  /* Spacing — 1.5x the trade apps */
  --space-xxs:  3px;
  --space-xs:   6px;
  --space-sm:   9px;
  --space-md:   12px;
  --space-lg:   18px;
  --space-xl:   24px;
  --space-xxl:  36px;
  --space-3xl:  56px;
  --space-4xl:  88px;

  /* Radius — soft, not sharp */
  --radius-none:   0;
  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     14px;
  --radius-pill:   999px;
  --radius-round:  50%;

  /* Transitions */
  --transition-fast:   0.1s ease;
  --transition-normal: 0.18s ease;
  --transition-slow:   0.3s ease;

  /* Z-index */
  --z-panel:     1;
  --z-dropdown:  50;
  --z-floating:  100;
  --z-modal:     200;
  --z-toast:     300;

  /* Shadows — warm, soft */
  --shadow-sm:   0 1px 3px rgba(40, 26, 20, 0.06);
  --shadow-md:   0 4px 14px rgba(40, 26, 20, 0.08);
  --shadow-lg:   0 12px 32px rgba(40, 26, 20, 0.10);
  --shadow-xl:   0 24px 60px rgba(40, 26, 20, 0.14);

  /* Focus */
  --focus-ring-width:  2px;
  --focus-ring-offset: 1px;

  /* ===== COLORS — ModulusOS warm taupe ===== */
  --color-accent:        #b34519;
  --color-accent-hover:  #9a3a14;
  --color-accent-light:  #f2eae6;
  --color-accent-fill:   #8c3410;
  --color-accent-ring:   rgba(179, 69, 25, 0.20);

  --color-bg:            #f6f4f1;
  --color-surface:       #ffffff;
  --color-panel:         #efece8;
  --color-hover:         #e8e5e0;
  --color-viewport:      #f6f4f1;

  --color-border:        #e0dcd6;
  --color-border-strong: #b8b2a9;

  --color-text-primary:   #2b2825;
  --color-text-secondary: #6a645c;
  --color-text-tertiary:  #9a9289;
  --color-text-inverse:   #ffffff;

  --color-success: #5a7a52;
  --color-warning: #a88440;
  --color-danger:  #a14a2a;
  --color-info:    #4a6680;

  --color-focus-ring: var(--color-accent);

  /* Hero — deeper warm panel that contrasts against the taupe page bg */
  --color-hero-bg:           #2b2825;
  --color-hero-panel:        #34302b;
  --color-hero-text:         #f6f4f1;
  --color-hero-text-secondary: #b8b2a9;
  --color-hero-border:       #4a443e;
}