/*
 * Marketingbright — Design Tokens
 *
 * Single source of truth for all design decisions.
 * Loaded globally before all other custom stylesheets.
 *
 * Color tokens map to Astra's verified palette variables.
 * If the Astra palette changes, update both the variable references
 * and the fallback hex values in the Colors section below.
 */

:root {

  /* =========================================================================
     Colors — mapped to Astra's palette variables
     Astra palette (verified):
       0: #f45a2a  — brand orange (primary)
       1: #257cff  — blue (secondary)
       2: #2f373d  — dark charcoal (body text)
       3: #7e868c  — muted gray
       4: #f8fbfe  — near-white (light background)
       5: #ffffff  — white
       6: #f2f5f7  — light gray (subtle background)
       7: #2f373d  — dark charcoal (headings, same as 2)
       8: #000000  — black
     ========================================================================= */
  --mb-color-primary:       var(--ast-global-color-0, #f45a2a);
  --mb-color-secondary:     var(--ast-global-color-1, #257cff);
  --mb-color-text:          var(--ast-global-color-2, #2f373d);
  --mb-color-text-muted:    var(--ast-global-color-3, #7e868c);
  --mb-color-text-heading:  var(--ast-global-color-7, #2f373d);
  --mb-color-text-dark:     var(--ast-global-color-8, #000000);
  --mb-color-bg:            var(--ast-global-color-5, #ffffff);
  --mb-color-bg-light:      var(--ast-global-color-4, #f8fbfe);
  --mb-color-bg-subtle:     var(--ast-global-color-6, #f2f5f7);
  --mb-color-border:        #dde3e8;

  /* Info Box variant colors */
  --mb-color-info:          #0ea5e9;
  --mb-color-info-bg:       #f0f9ff;
  --mb-color-info-border:   #bae6fd;

  --mb-color-tip:           #22c55e;
  --mb-color-tip-bg:        #f0fdf4;
  --mb-color-tip-border:    #bbf7d0;

  --mb-color-warning:       #f59e0b;
  --mb-color-warning-bg:    #fffbeb;
  --mb-color-warning-border:#fde68a;

  --mb-color-note:          #8b5cf6;
  --mb-color-note-bg:       #faf5ff;
  --mb-color-note-border:   #ddd6fe;

  /* =========================================================================
     Typography — fluid scale using clamp()
     Minimum viewport: 320px | Maximum viewport: 1280px
     ========================================================================= */
  --mb-text-xs:   clamp(0.75rem,  0.9vw,  0.875rem);
  --mb-text-sm:   clamp(0.875rem, 1vw,    0.9375rem);
  --mb-text-base: clamp(1rem,     1.2vw,  1.125rem);
  --mb-text-lg:   clamp(1.125rem, 1.5vw,  1.375rem);
  --mb-text-xl:   clamp(1.375rem, 2vw,    1.75rem);
  --mb-text-2xl:  clamp(1.75rem,  3vw,    2.5rem);
  --mb-text-3xl:  clamp(2rem,     4vw,    3.5rem);
  --mb-text-4xl:  clamp(2.5rem,   5vw,    4.5rem);

  --mb-font-base:    var(--ast-body-font-family, system-ui, sans-serif);
  --mb-font-heading: var(--ast-heading-font-family, system-ui, sans-serif);
  --mb-font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;

  --mb-leading-tight:  1.25;
  --mb-leading-snug:   1.375;
  --mb-leading-normal: 1.6;
  --mb-leading-loose:  1.8;

  /* =========================================================================
     Spacing — fluid scale
     ========================================================================= */
  --mb-space-1:  clamp(0.25rem,  0.5vw,  0.5rem);
  --mb-space-2:  clamp(0.5rem,   0.75vw, 0.75rem);
  --mb-space-3:  clamp(0.75rem,  1vw,    1rem);
  --mb-space-4:  clamp(1rem,     1.5vw,  1.25rem);
  --mb-space-6:  clamp(1.25rem,  2vw,    1.75rem);
  --mb-space-8:  clamp(1.75rem,  3vw,    2.5rem);
  --mb-space-12: clamp(2.5rem,   4vw,    4rem);
  --mb-space-16: clamp(3rem,     5vw,    5rem);
  --mb-space-24: clamp(4rem,     7vw,    7rem);

  /* =========================================================================
     Layout
     ========================================================================= */
  --mb-container-max:    1280px;
  --mb-container-wide:   1100px;
  --mb-container-text:   720px;   /* max-width for readable prose columns */
  --mb-container-narrow: 560px;

  /* =========================================================================
     Border radius
     ========================================================================= */
  --mb-radius-sm:   4px;
  --mb-radius-md:   8px;
  --mb-radius-lg:   16px;
  --mb-radius-xl:   24px;
  --mb-radius-full: 9999px;

  /* =========================================================================
     Shadows
     ========================================================================= */
  --mb-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --mb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --mb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --mb-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.04);

  /* =========================================================================
     Transitions
     ========================================================================= */
  --mb-duration-fast:   150ms;
  --mb-duration-base:   250ms;
  --mb-duration-slow:   400ms;
  --mb-easing-default:  cubic-bezier(0.4, 0, 0.2, 1);
}