/* ============================================
   MaP Design Tokens — VAI Edition
   Flexoki palette + GT Alpina/Pressura type scale
   Shared brand system across MaP web properties

   Includes backward-compat aliases for VAI's
   existing inline CSS (--paper, --ink, etc.)
   ============================================ */

/* ===== Font Faces ===== */
@font-face {
  font-family: 'GT Alpina';
  src: url('../fonts/GT-Alpina-Standard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Alpina';
  src: url('../fonts/GT-Alpina-Standard-Regular-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'GT Alpina';
  src: url('../fonts/GT-Alpina-Standard-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Alpina';
  src: url('../fonts/GT-Alpina-Standard-Bold-Italic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'GT Pressura';
  src: url('../fonts/GT-Pressura-Standard-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Pressura';
  src: url('../fonts/GT-Pressura-Standard-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GT Pressura';
  src: url('../fonts/GT-Pressura-Standard-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ===== CSS Custom Properties ===== */
/* Canonical source: map-cdn.pages.dev/tokens.css — keep in sync */

:root {
  /* Flexoki Base */
  --fx-paper: #FFFCF0;
  --fx-black: #100F0F;
  --fx-base-50:  #F2F0E5;
  --fx-base-100: #E6E4D9;
  --fx-base-150: #DAD8CE;
  --fx-base-200: #CECDC3;
  --fx-base-300: #B7B5AC;
  --fx-base-400: #9F9D96;
  --fx-base-500: #878580;
  --fx-base-600: #6F6E69;
  --fx-base-700: #575653;
  --fx-base-800: #403E3C;
  --fx-base-850: #343331;
  --fx-base-900: #282726;
  --fx-base-950: #1C1B1A;

  /* Flexoki Accent Colors */
  --fx-red-400: #D14D41;
  --fx-red-600: #AF3029;
  --fx-orange-400: #DA702C;
  --fx-orange-600: #BC5215;
  --fx-yellow-400: #DFB431;
  --fx-yellow-600: #AD8301;
  --fx-green-400: #879A39;
  --fx-green-500: #768D21;
  --fx-green-600: #66800B;
  --fx-cyan-400: #3AA99F;
  --fx-cyan-600: #24837B;
  --fx-blue-400: #4385BE;
  --fx-blue-500: #3171B2;
  --fx-blue-600: #205EA6;
  --fx-purple-400: #8B7EC8;
  --fx-purple-600: #5E409D;
  --fx-magenta-400: #CE5D97;
  --fx-magenta-600: #A02F6F;

  /* Semantic Colors */
  --color-bg: var(--fx-paper);
  --color-text: var(--fx-base-950);
  --color-text-secondary: var(--fx-base-700);
  --color-text-muted: var(--fx-base-600);
  --color-border: var(--fx-base-200);
  --color-surface: #FFFFFF;
  --color-surface-hover: var(--fx-base-50);
  --color-brand: var(--fx-red-600);
  --color-accent: var(--fx-yellow-400);
  --color-link: var(--fx-blue-500);
  --color-link-hover: var(--fx-blue-600);
  --shadow-color: rgba(16, 15, 15, 0.08);

  /* Typography Scale — 1.2 ratio, 20px body base */
  --font-serif: 'GT Alpina', 'Georgia', serif;
  --font-sans: 'GT Pressura', system-ui, sans-serif;
  --base-size: 1.25rem;
  --wb-p3: 1.042rem;
  --badge-size: 0.868rem;
  --wb-p2: 1.25rem;
  --wb-p1: 1.5rem;

  /* Fluid heading scale */
  --h5: clamp(1.5rem, calc(1.175rem + 1.65vw), 2.16rem);
  --h4: clamp(1.8rem, calc(1.4rem + 2vw), 2.592rem);
  --h3: clamp(2.16rem, calc(1.69rem + 2.38vw), 3.11rem);
  --h2: clamp(2.592rem, calc(2.025rem + 2.85vw), 3.732rem);
  --h1: clamp(3.11rem, calc(2.425rem + 3.43vw), 4.478rem);

  /* VAI backward-compat aliases (used by existing inline CSS) */
  --paper: var(--fx-paper);
  --ink: var(--fx-base-950);
  --stone: var(--fx-base-600);
  --mist: var(--fx-base-400);
  --cloud: var(--fx-base-200);
  --fog: var(--fx-base-100);
  --gold: var(--fx-yellow-400);
  --ember: var(--fx-red-600);
  --ember-light: var(--fx-red-400);
  --sea: var(--fx-cyan-600);
  --sea-light: var(--fx-cyan-400);
  --sky: var(--fx-blue-600);
  --sky-light: var(--fx-blue-400);
  --violet: var(--fx-purple-600);
  --violet-light: var(--fx-purple-400);
  --green: var(--fx-green-600);

  /* VAI alias (same as --font-sans from shared tokens) */
  --font-ui: var(--font-sans);
}

/* ===== Dark Mode ===== */
html.dark {
  /* Semantic overrides */
  --color-bg: var(--fx-base-950);
  --color-text: var(--fx-base-100);
  --color-text-secondary: var(--fx-base-300);
  --color-text-muted: var(--fx-base-400);
  --color-border: var(--fx-base-800);
  --color-surface: var(--fx-base-900);
  --color-surface-hover: var(--fx-base-850);
  --color-brand: var(--fx-red-400);
  --color-accent: var(--fx-yellow-400);
  --color-link: var(--fx-blue-400);
  --color-link-hover: var(--fx-blue-500);
  --shadow-color: rgba(0, 0, 0, 0.3);

  /* VAI backward-compat dark overrides */
  --paper: var(--fx-base-950);
  --ink: var(--fx-base-50);
  --stone: var(--fx-base-400);
  --mist: var(--fx-base-600);
  --cloud: var(--fx-base-850);
  --fog: var(--fx-base-900);
  --ember: var(--fx-red-400);
  --ember-light: var(--fx-red-600);
  --sea: var(--fx-cyan-400);
  --sea-light: var(--fx-cyan-600);
  --sky: var(--fx-blue-400);
  --sky-light: var(--fx-blue-600);
  --violet: var(--fx-purple-400);
  --violet-light: var(--fx-purple-600);
}

html.dark ::selection {
  background-color: var(--fx-yellow-600);
  color: var(--fx-base-50);
}

html.dark ::-webkit-scrollbar-thumb {
  background: var(--fx-base-700);
}


/* ===== Base Reset ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ===== Selection ===== */
::selection {
  background-color: var(--fx-yellow-400);
  color: var(--fx-base-950);
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--fx-base-300);
  border-radius: 4px;
}

/* ===== Accessibility ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}