/* ============================================
   MaP Design Tokens — Shared Source of Truth
   Flexoki palette + semantic colors + type scale

   Imported by all MaP web properties.
   Site-specific tokens go in each site's own CSS.
   ============================================ */

: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-50: #FFE7CE;
  --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-700);
  --color-border: var(--fx-base-150);
  --color-surface: #FFFFFF;
  --color-surface-hover: var(--fx-base-50);
  --color-active-bg: var(--fx-orange-50);
  --color-brand: var(--fx-orange-600);
  --color-accent: var(--fx-purple-600);
  --color-link: var(--fx-blue-600);
  --color-link-hover: var(--fx-blue-400);
  --shadow-color: rgba(16, 15, 15, 0.08);

  /* Typography Scale — 1.2 ratio, 19px body base */
  /* GT-Maru-Emoji-Color sits in the cascade right after each text face so
     emoji glyphs (unicode-range scoped on the @font-face) fall through to
     Maru automatically rather than rendering as system emoji. Latin and
     extended characters resolve from the primary text face as before. */
  --font-serif: 'GT Alpina', 'GT-Maru-Emoji-Color', 'Georgia', serif;
  --font-sans: 'GT Pressura', 'GT-Maru-Emoji-Color', system-ui, sans-serif;
  --font-typewriter: 'GT Alpina Typewriter', 'GT-Maru-Emoji-Color', 'Courier New', monospace;
  --font-mono: 'GT-Pressura-Mono-Text', 'GT-Maru-Emoji-Color', ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
  /* Editorial display & H1–H3 in editorial contexts. */
  --font-display: 'GT Alpina Bold Narrow', 'Georgia', serif;
  /* Explicit emoji tokens — usable for elements that want to set Maru
     unconditionally (e.g., dingbats, monochrome contexts). */
  --font-emoji: 'GT-Maru-Emoji-Color', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  --font-emoji-mono: 'GT-Maru-Emoji-Black-and-White', 'Apple Symbols', sans-serif;
  --base-size: 1.1875rem;
  --wb-p3: 1rem;
  --wb-p2: 1.1875rem;
  --wb-p1: clamp(1.499rem, calc(1.449rem + 0.297vw), 1.649rem);
  --p1-lh: 1.35;
  /* Specialized type-scale tokens — last synced to Notion spec on 2026-05-23. */
  --logo-size:       1.35rem;   /* Wordmark in nav contexts; GT Pressura 900, letter-spacing -0.02em */
  --card-title-size: 1.25rem;   /* Component-level titles below H5; GT Pressura 700, lh 1.2 */
  --small-text-size: 0.875rem;  /* Secondary UI body text in sans; GT Pressura 400, lh 1.45 */
  --badge-size:      0.8125rem; /* Compact UI controls, member tags, sort/filter buttons; GT Pressura 500, lh 1.4 */
  --caption-size:    0.75rem;   /* Metadata, chart labels, attribution; GT Pressura 500, lh 1.4 */
  --label-size:      0.6875rem; /* Uppercase labels, tags, category markers; GT Pressura 600, letter-spacing 0.08em */

  /* Component Spacing — 8px grid */
  --sp-1: 0.5rem;     /* 8px */
  --sp-2: 1rem;       /* 16px */
  --sp-3: 1.5rem;     /* 24px */
  --sp-4: 2rem;       /* 32px */
  --sp-5: 3rem;       /* 48px */
  --sp-6: 4rem;       /* 64px */
  --sp-7: 6rem;       /* 96px */
  --sp-8: 8rem;       /* 128px */

  /* Heading spacing-after */
  --sp-after-h1: 0.5em;
  --sp-after-h2: 0.5em;
  --sp-after-h3: 0.4em;
  --sp-after-h4: 0.4em;
  --sp-after-h5: 0.3em;

  /* Component tokens */
  --border-accent: 4px;

  /* Radii — last synced to Notion spec on 2026-05-23. */
  --radius-sm:    0.25rem;  /* 4px  — tags, chips, small inputs */
  --radius:       0.5rem;   /* 8px  — cards, modals, default surfaces */
  --radius-lg:    0.75rem;  /* 12px — hero surfaces, callouts */
  --radius-image: 1.25rem;  /* 20px — image containers (global default) */
  --radius-card:  var(--radius);  /* legacy alias — use --radius */

  /* 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);
  --h-display: clamp(2.5rem, 10vw, 7.5rem);
  --h-display-lh: 0.95;
}

/* ===== Dark Mode ===== */
html.dark {
  --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-orange-400);
  --color-accent: var(--fx-purple-400);
  --color-link: var(--fx-blue-400);
  --color-link-hover: var(--fx-blue-600);
  --shadow-color: rgba(0, 0, 0, 0.3);
}