/* ============================================================
   MHX Analytics — Design Tokens
   Extracted from Google Stitch export + DESIGN.md
   ============================================================ */

:root {
  /* ── Primary ─────────────────────────────────────── */
  --color-primary:                 #00685d;
  --color-primary-container:       #008376;
  --color-primary-fixed:           #8ff4e3;
  --color-primary-fixed-dim:       #72d8c8;
  --color-on-primary:              #ffffff;
  --color-on-primary-container:    #f4fffb;
  --color-on-primary-fixed:        #00201c;
  --color-on-primary-fixed-variant:#005047;
  --color-inverse-primary:         #72d8c8;

  /* ── Secondary ───────────────────────────────────── */
  --color-secondary:               #6c4da4;
  --color-secondary-container:     #c1a0fe;
  --color-secondary-fixed:         #ebdcff;
  --color-secondary-fixed-dim:     #d3bbff;
  --color-on-secondary:            #ffffff;
  --color-on-secondary-container:  #503187;
  --color-on-secondary-fixed:      #260059;
  --color-on-secondary-fixed-variant:#53358b;

  /* ── Tertiary ────────────────────────────────────── */
  --color-tertiary:                #006a35;
  --color-tertiary-container:      #008645;
  --color-tertiary-fixed:          #7efba4;
  --color-tertiary-fixed-dim:      #61de8a;
  --color-on-tertiary:             #ffffff;
  --color-on-tertiary-container:   #f6fff4;
  --color-on-tertiary-fixed:       #00210c;
  --color-on-tertiary-fixed-variant:#005228;

  /* ── Surfaces ────────────────────────────────────── */
  --color-background:              #f8fafb;
  --color-surface:                 #f8fafb;
  --color-surface-bright:          #f8fafb;
  --color-surface-dim:             #d8dadb;
  --color-surface-variant:         #e1e3e4;
  --color-surface-tint:            #006b5f;
  --color-surface-container-lowest:#ffffff;
  --color-surface-container-low:   #f2f4f5;
  --color-surface-container:       #eceeef;
  --color-surface-container-high:  #e6e8e9;
  --color-surface-container-highest:#e1e3e4;

  /* ── On-surface ──────────────────────────────────── */
  --color-on-surface:              #191c1d;
  --color-on-surface-variant:      #3d4946;
  --color-on-background:           #191c1d;
  --color-inverse-surface:         #2e3132;
  --color-inverse-on-surface:      #eff1f2;

  /* ── Outline ─────────────────────────────────────── */
  --color-outline:                 #6d7a77;
  --color-outline-variant:         #bdc9c5;

  /* ── Error ───────────────────────────────────────── */
  --color-error:                   #ba1a1a;
  --color-error-container:         #ffdad6;
  --color-on-error:                #ffffff;
  --color-on-error-container:      #93000a;

  /* ── Typography ──────────────────────────────────── */
  --font-headline:                 'Manrope', sans-serif;
  --font-body:                     'Inter', sans-serif;

  /* ── Border Radius ───────────────────────────────── */
  --radius-sm:                     0.5rem;
  --radius-default:                1rem;
  --radius-lg:                     2rem;
  --radius-xl:                     3rem;
  --radius-full:                   9999px;

  /* ── Glassmorphism ───────────────────────────────── */
  --glass-bg:                      rgba(255, 255, 255, 0.7);
  --glass-blur:                    24px;
  --glass-border:                  1.5px solid rgba(255, 255, 255, 0.4);

  /* ── Gradients ───────────────────────────────────── */
  --gradient-liquid:               linear-gradient(135deg, #00685d 0%, #008376 100%);

  /* ── Shadows (ambient tonal — never pure black) ─── */
  --shadow-sm:                     0 2px 12px rgba(25, 28, 29, 0.04);
  --shadow-md:                     0 8px 30px rgba(25, 28, 29, 0.06);
  --shadow-lg:                     0 16px 48px rgba(25, 28, 29, 0.08);
  --shadow-xl:                     0 24px 60px rgba(25, 28, 29, 0.08);

  /* ── Spacing (section-level) ─────────────────────── */
  --space-section:                 8rem;
  --space-component:               2rem;
}