/* Masonry Alliance Program — Design Tokens */

/* Light theme (default) */
:root, :root[data-bs-theme="light"] {
  /* Brand palette */
  --map-red-600: #eb0029; /* primary brand */
  --map-red-700: #c80023;
  --map-red-800: #bc0021;
  --map-red-900: #b0001f;

  --map-blue-600: #4a6fc8; /* secondary accent - brighter platinum blue */
  --map-blue-700: #3d5fb5;
  --map-blue-800: #34549a;

  --map-gold-600: #d8ae2b; /* tier color */
  --map-silver-600: #aeacac; /* tier color */
  --map-orange-600: #9a3320; /* support accent */

  /* Semantic roles */
  --map-color-brand: var(--map-red-600);
  --map-color-accent: var(--map-blue-600);
  --map-color-gold: var(--map-gold-600);
  --map-color-silver: var(--map-silver-600);
  --map-color-orange: var(--map-orange-600);

  /* Surfaces & text */
  --map-surface: #ffffff;
  --map-surface-alt: #f8f9fa;
  --map-text: #212529;
  --map-text-muted: #6c757d;

  /* Links */
  --map-link: var(--map-blue-600);
  --map-link-hover: var(--map-blue-700);

  /* Map to Bootstrap */
  --bs-primary: var(--map-color-brand);
  --bs-primary-rgb: 235,0,41;
  --bs-link-color: var(--map-link);
  --bs-link-hover-color: var(--map-link-hover);
  --bs-body-bg: var(--map-surface);
  --bs-body-color: var(--map-text);

  /* Typography (font system) */
  /* Heading font: Zuume (wide) with Industry fallback, then system */
  --font-heading: "zuume", "zuume-wide", "industry", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Body + secondary font: Industry */
  --font-body: "industry", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --font-lineheight-heading: 1.05;
  --font-lineheight-body: 1.55;
  --font-letterspacing-heading: .005em;
  --font-letterspacing-body: .01em;
  --font-letterspacing-heading-bold: .025em; /* Zuume bold spacing */

  /* Motion tokens */
  --anim-duration-short: .75s; /* base subtle motion */
  --anim-duration-medium: 1.1s; /* hero headline / large elements */
  --anim-ease-out: cubic-bezier(.22,.61,.36,1); /* smoother ease-out */
  --anim-ease-smooth: cubic-bezier(.19,.83,.32,1); /* optional alt curve */
  --anim-stagger-step: .12s; /* base stagger spacing */
}

/* Dark theme */
:root[data-bs-theme="dark"] {
  /* Keep brand colors - these should be consistent across themes */
  --map-color-brand: var(--map-red-600);
  --map-color-accent: var(--map-blue-600);
  --map-color-gold: var(--map-gold-600);
  --map-color-silver: var(--map-silver-600);
  --map-color-orange: var(--map-orange-600);

  /* Adjust surfaces for dark mode */
  --map-surface: #0b0d10;
  --map-surface-alt: #111418;
  --map-text: #e9ecef;
  --map-text-muted: #adb5bd;

  /* Links tuned for dark */
  --map-link: #66b2ff;
  --map-link-hover: #99ccff;

  /* Map to Bootstrap */
  --bs-primary: var(--map-color-brand);
  --bs-link-color: var(--map-link);
  --bs-link-hover-color: var(--map-link-hover);
  --bs-body-bg: var(--map-surface);
  --bs-body-color: var(--map-text);
}

/* Utilities tied to tokens (opt-in) */
.text-brand { 
  color: var(--map-red-600) !important; /* Force red in both themes */
}
.bg-brand { background-color: var(--map-color-brand) !important; }
.text-accent { color: var(--map-color-accent) !important; }
.bg-accent { background-color: var(--map-color-accent) !important; }
.text-gold { color: var(--map-color-gold) !important; }
.text-silver { color: var(--map-color-silver) !important; }