/* Minuteman Precision Engravings - design tokens
   Structure mirrors Material 3: ref (raw values) -> sys (roles) -> comp (component). */
:root {
  /* ---------- REFERENCE: palette (coolors.co/0b0e13-161b23-f5b83d-ff5a36-3d8bff-f3efe6) ---------- */
  --mm-ref-ink: #0B0E13;
  --mm-ref-graphite: #161B23;
  --mm-ref-graphite-hi: #1E2530;
  --mm-ref-steel: #2A3240;
  --mm-ref-brass: #F5B83D;
  --mm-ref-brass-deep: #3A2C0C;
  --mm-ref-ember: #FF5A36;
  --mm-ref-liberty: #3D8BFF;
  --mm-ref-parchment: #F3EFE6;
  --mm-ref-mist: #A3ACB9;
  --mm-ref-success: #3FD08A;
  --mm-ref-paper: #F3EFE6;
  --mm-ref-paper-ink: #14110B;
  --mm-ref-paper-muted: #5E5647;
  --mm-ref-bronze: #8A6A35;

  /* REFERENCE: type (typescale.ai, base 16, ratio 1.250 Major Third) */
  --mm-ref-font-display: "Archivo", system-ui, sans-serif;
  --mm-ref-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --mm-ref-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mm-ref-size-1: 0.8rem;    /* 12.8 */
  --mm-ref-size-2: 1rem;      /* 16 */
  --mm-ref-size-3: 1.25rem;   /* 20 */
  --mm-ref-size-4: 1.5625rem; /* 25 */
  --mm-ref-size-5: 1.953rem;  /* 31.25 */
  --mm-ref-size-6: 2.441rem;  /* 39 */
  --mm-ref-size-7: 3.052rem;  /* 48.8 */

  /* ---------- SYSTEM: color roles ---------- */
  --mm-sys-color-background: var(--mm-ref-ink);
  --mm-sys-color-surface: var(--mm-ref-graphite);
  --mm-sys-color-surface-container-high: var(--mm-ref-graphite-hi);
  --mm-sys-color-on-surface: var(--mm-ref-parchment);
  --mm-sys-color-on-surface-variant: var(--mm-ref-mist);
  --mm-sys-color-outline: var(--mm-ref-steel);
  --mm-sys-color-primary: var(--mm-ref-brass);
  --mm-sys-color-on-primary: var(--mm-ref-ink);
  --mm-sys-color-primary-container: var(--mm-ref-brass-deep);
  --mm-sys-color-on-primary-container: var(--mm-ref-brass);
  --mm-sys-color-secondary: var(--mm-ref-liberty);
  --mm-sys-color-tertiary: var(--mm-ref-ember);
  --mm-sys-color-success: var(--mm-ref-success);
  --mm-sys-color-error: var(--mm-ref-ember);

  /* SYSTEM: typescale roles */
  --mm-sys-type-display: 700 clamp(2.5rem, 9vw + 0.5rem, 4rem)/1.02 var(--mm-ref-font-display);
  --mm-sys-type-headline: 700 clamp(1.953rem, 5vw + 0.6rem, 2.75rem)/1.1 var(--mm-ref-font-display);
  --mm-sys-type-title: 700 var(--mm-ref-size-3)/1.2 var(--mm-ref-font-display);
  --mm-sys-type-body-lg: 400 1.0625rem/1.55 var(--mm-ref-font-body);
  --mm-sys-type-body: 400 var(--mm-ref-size-2)/1.5 var(--mm-ref-font-body);
  --mm-sys-type-label: 600 0.875rem/1.2 var(--mm-ref-font-body);
  --mm-sys-type-caption: 500 var(--mm-ref-size-1)/1.35 var(--mm-ref-font-body);
  --mm-sys-tracking-tight: -0.02em;
  --mm-sys-tracking-caps: 0.14em;

  /* SYSTEM: light (inverse) surface for contrast sections */
  --mm-sys-color-inverse-surface: var(--mm-ref-paper);
  --mm-sys-color-inverse-on-surface: var(--mm-ref-paper-ink);
  --mm-sys-color-inverse-on-surface-variant: var(--mm-ref-paper-muted);

  /* SYSTEM: spacing (4pt grid) */
  --mm-sys-space-1: 4px;  --mm-sys-space-2: 8px;  --mm-sys-space-3: 12px;
  --mm-sys-space-4: 16px; --mm-sys-space-5: 20px; --mm-sys-space-6: 24px;
  --mm-sys-space-8: 32px; --mm-sys-space-10: 40px; --mm-sys-space-12: 48px;
  --mm-sys-space-16: 64px; --mm-sys-space-20: 80px;
  --mm-sys-gutter: 20px;

  /* SYSTEM: shape */
  --mm-sys-shape-corner-small: 8px;
  --mm-sys-shape-corner-medium: 14px;
  --mm-sys-shape-corner-large: 22px;
  --mm-sys-shape-corner-full: 999px;

  /* SYSTEM: elevation */
  --mm-sys-elevation-1: 0 1px 2px rgb(0 0 0 / .4), 0 2px 8px rgb(0 0 0 / .25);
  --mm-sys-elevation-2: 0 8px 24px rgb(0 0 0 / .45);
  --mm-sys-elevation-3: 0 16px 48px rgb(0 0 0 / .55);
  --mm-sys-glow-primary: 0 8px 28px rgb(245 184 61 / .35);

  /* SYSTEM: motion */
  --mm-sys-motion-easing: cubic-bezier(.2, 0, 0, 1);
  --mm-sys-motion-duration-short: 150ms;
  --mm-sys-motion-duration-medium: 300ms;
  --mm-sys-motion-duration-long: 700ms;
  --mm-sys-motion-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ---------- COMPONENT ---------- */
  --mm-comp-button-height: 52px;
  --mm-comp-button-primary-container-color: var(--mm-sys-color-primary);
  --mm-comp-button-primary-label-color: var(--mm-sys-color-on-primary);
  --mm-comp-button-shape: var(--mm-sys-shape-corner-full);
  --mm-comp-card-container-color: var(--mm-sys-color-surface);
  --mm-comp-card-shape: var(--mm-sys-shape-corner-large);
  --mm-comp-chip-height: 44px;
  --mm-comp-chip-selected-container-color: var(--mm-sys-color-primary-container);
  --mm-comp-chip-selected-outline-color: var(--mm-sys-color-primary);
  --mm-comp-field-container-color: var(--mm-ref-ink);
  --mm-comp-field-height: 52px;
  --mm-comp-sticky-bar-height: 72px;
}
