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

/* ===== 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 ===== */
: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 Aliases */
  --color-bg: var(--fx-paper);
  --color-text: var(--fx-base-950);
  --color-text-secondary: var(--fx-base-600);
  --color-text-muted: var(--fx-base-400);
  --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);

  /* Chart Colors */
  --chart-physical: var(--fx-cyan-600);
  --chart-intellectual: var(--fx-blue-500);
  --chart-social: var(--fx-yellow-600);
  --chart-personal: var(--fx-red-600);
  --chart-bg: var(--color-surface);
  --chart-grid: var(--fx-base-200);
  --chart-text: var(--color-text);
}

/* ===== Dark Mode ===== */
html.dark {
  --color-bg: var(--fx-base-950);
  --color-text: var(--fx-base-100);
  --color-text-secondary: var(--fx-base-400);
  --color-text-muted: var(--fx-base-500);
  --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);

  --chart-physical: var(--fx-cyan-400);
  --chart-intellectual: var(--fx-blue-400);
  --chart-social: var(--fx-yellow-400);
  --chart-personal: var(--fx-red-400);
  --chart-bg: var(--fx-base-900);
  --chart-grid: var(--fx-base-800);
  --chart-text: var(--fx-base-100);
}

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

body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--wb-p2);
  font-feature-settings: "ss01" 0, "ss02" 1, "ss03" 1;
  font-variant-numeric: oldstyle-nums;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== Headings ===== */
h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  font-feature-settings: normal;
  font-variant-numeric: normal;
  line-height: 1.15;
  margin-top: 0;
  color: var(--color-text);
}

h1 { font-size: var(--h1); font-weight: 900; margin-bottom: 0.5em; }
h2 { font-size: var(--h2); font-weight: 900; margin-bottom: 0.5em; }
h3 { font-size: var(--h3); font-weight: 700; margin-bottom: 0.4em; }
h4 { font-size: var(--h4); font-weight: 700; margin-bottom: 0.4em; }
h5 { font-size: var(--h5); font-weight: 500; margin-bottom: 0.3em; }

/* ===== Links ===== */
a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--color-link-hover);
}

/* ===== Paragraphs ===== */
p {
  margin-top: 0;
  margin-bottom: 1em;
}

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

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

/* ===== 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;
}

/* ===== Loading Skeleton ===== */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--fx-base-100) 25%,
    var(--fx-base-150) 50%,
    var(--fx-base-100) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}
html.dark .skeleton {
  background: linear-gradient(
    90deg,
    var(--fx-base-850) 25%,
    var(--fx-base-800) 50%,
    var(--fx-base-850) 75%
  );
  background-size: 200% 100%;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 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;
  }
}