/* ============================================================
   EZHard Design Tokens — Material 3
   Source of truth: rules/design-system.md
   ============================================================ */

:root {
  /* ── Primary ─────────────────────────────────────────────── */
  --md-sys-color-primary:               #86d2e6;
  --md-sys-color-on-primary:            #003641;
  --md-sys-color-primary-container:     #004e5e;
  --md-sys-color-on-primary-container:  #a8edff;

  /* ── Secondary ───────────────────────────────────────────── */
  --md-sys-color-secondary:             #b0cbd2;
  --md-sys-color-on-secondary:          #1c343a;
  --md-sys-color-secondary-container:   #324a51;
  --md-sys-color-on-secondary-container:#cce8ef;

  /* ── Surface & Background ────────────────────────────────── */
  --md-sys-color-surface:               #0f1416;
  --md-sys-color-on-surface:            #e0e3e5;
  --md-sys-color-surface-container:     #1a2024;
  --md-sys-color-surface-variant:       #40484b;
  --md-sys-color-on-surface-variant:    #c0c8cb;

  /* ── Utility ─────────────────────────────────────────────── */
  --md-sys-color-outline:               #8a9295;
  --md-sys-color-outline-variant:       #40484b;
  --md-sys-color-error:                 #ffb4ab;
  --md-sys-color-on-error:              #690005;

  /* ── Typography ──────────────────────────────────────────── */
  --md-sys-typescale-display-font:      'Outfit', sans-serif;
  --md-sys-typescale-body-font:         'Inter', sans-serif;

  --md-sys-typescale-display-size:      clamp(2.5rem, 6vw, 4.5rem);
  --md-sys-typescale-display-weight:    700;

  --md-sys-typescale-headline-size:     clamp(1.5rem, 3vw, 2.25rem);
  --md-sys-typescale-headline-weight:   600;

  --md-sys-typescale-body-size:         clamp(0.95rem, 1.2vw, 1.125rem);
  --md-sys-typescale-body-weight:       400;

  --md-sys-typescale-label-size:        0.8125rem;
  --md-sys-typescale-label-weight:      500;

  /* ── Shape Scale ─────────────────────────────────────────── */
  --md-sys-shape-xs:    4px;
  --md-sys-shape-sm:    8px;
  --md-sys-shape-md:   12px;
  --md-sys-shape-lg:   16px;
  --md-sys-shape-xl:   28px;
  --md-sys-shape-full: 9999px;

  /* ── Elevation ───────────────────────────────────────────── */
  --md-elevation-0: none;
  --md-elevation-1: 0 1px 3px 1px rgba(0,0,0,0.15),
                    0 1px 2px 0   rgba(0,0,0,0.30);
  --md-elevation-2: 0 2px 6px 2px rgba(0,0,0,0.15),
                    0 1px 2px 0   rgba(0,0,0,0.30);
  --md-elevation-3: 0 4px 8px 3px rgba(0,0,0,0.15),
                    0 1px 3px 0   rgba(0,0,0,0.30);
  --md-elevation-4: 0 6px 10px 4px rgba(0,0,0,0.15),
                    0 2px 3px 0    rgba(0,0,0,0.30);
  --md-elevation-5: 0 8px 12px 6px rgba(0,0,0,0.15),
                    0 4px 4px 0    rgba(0,0,0,0.30);

  /* ── Motion ──────────────────────────────────────────────── */
  --md-motion-easing-standard:   cubic-bezier(0.2, 0, 0, 1);
  --md-motion-easing-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-motion-easing-accelerate: cubic-bezier(0.3, 0, 1, 1);

  --md-motion-duration-short:    150ms;
  --md-motion-duration-medium:   300ms;
  --md-motion-duration-long:     500ms;
}