/*
 * mp-tokens.css — Marketplace Prep shared design-token layer
 *
 * Single canonical source for every color, radius, spacing, and type token
 * used across tools, ops, portal, and the web-component chrome.
 *
 * Embed at document root (not inside a shadow root) so custom properties
 * cascade into every surface and are also readable from mp-chrome.js shadow
 * roots via :host { ... } declarations.
 *
 *   <link rel="stylesheet" href="/chrome/v2/mp-tokens.css">
 *
 * Theme resolution order (highest wins):
 *   1. [data-theme="dark"]  on any ancestor element (explicit override)
 *   2. @media (prefers-color-scheme: dark)  (OS preference)
 *   3. [data-theme="light"] on any ancestor element (explicit override)
 *   4. :root defaults (light)
 *
 * NEVER fork this file per-surface. Surface-specific overrides go in a
 * companion <style> block that references these tokens by name.
 *
 * Brand invariants (never change):
 *   Deep teal  #004256 / #003040 / #00222d
 *   Green      #5BAA3B  (primary, also CTA base)
 *   Barlow Semi Condensed — display headings
 *   Roboto — body + UI text
 *   Hexagon mark — brand symbol, filter: brightness(0) invert(1) on dark
 */

/* ============================================================
   1. PRIMITIVES
   Raw palette values — reference via semantic aliases below.
   Never use primitives directly in component CSS; go through semantics.
   ============================================================ */

:root {
  /* -- Teal scale (brand dark) -------------------------------- */
  --mp-prim-teal-950: #00141b;
  --mp-prim-teal-900: #00222d;   /* deepest background */
  --mp-prim-teal-800: #003040;   /* footer bg */
  --mp-prim-teal-700: #003d4f;   /* surface 2 */
  --mp-prim-teal-600: #004256;   /* header bg — canonical brand teal */
  --mp-prim-teal-500: #0a4f63;   /* slightly lifted surface */
  --mp-prim-teal-400: #0e6178;   /* interactive hover on dark */
  --mp-prim-teal-300: #1a7c96;   /* lighter accent on dark */

  /* -- Green scale (brand primary) --------------------------- */
  --mp-prim-green-900: #1d4d12;
  --mp-prim-green-800: #256010;  /* CTA hover */
  --mp-prim-green-700: #2d7a14;  /* CTA rest (accessible on dark) */
  --mp-prim-green-600: #3e7a1f;  /* dark variant shown in chrome tokens */
  --mp-prim-green-500: #4d9532;  /* green-700 from portal.css */
  --mp-prim-green-400: #5BAA3B;  /* CANONICAL brand green — primary */
  --mp-prim-green-300: #72c451;  /* lighter variant */
  --mp-prim-green-200: #8fd971;  /* green-light from ops */
  --mp-prim-green-100: #c2f0a4;  /* tint */
  --mp-prim-green-50:  #edf9e5;  /* ghost tint on light bg */

  /* -- Neutral scale ----------------------------------------- */
  --mp-prim-neutral-950: #0b1220;
  --mp-prim-neutral-900: #1a2535;
  --mp-prim-neutral-800: #272626; /* body text on light */
  --mp-prim-neutral-700: #3d4451;
  --mp-prim-neutral-600: #4a5765;
  --mp-prim-neutral-500: #5a5a5a;
  --mp-prim-neutral-400: #7a8390;
  --mp-prim-neutral-300: #9fb6bd; /* dim text on dark */
  --mp-prim-neutral-200: #cccfd4;
  --mp-prim-neutral-100: #e3e6ea; /* hairline on light */
  --mp-prim-neutral-50:  #f4f5f7; /* light surface */
  --mp-prim-white:       #ffffff;

  /* -- Semantic status (light-mode defaults) ------------------ */
  --mp-prim-danger-900: #7a1010;
  --mp-prim-danger-600: #b42318;
  --mp-prim-danger-400: #e05252;
  --mp-prim-danger-50:  #fef2f2;

  --mp-prim-warn-600:   #b8851f;
  --mp-prim-warn-50:    #fff9ec;

  --mp-prim-info-600:   #2f5aae;
  --mp-prim-info-50:    #eef4ff;
}

/* ============================================================
   2. SEMANTIC TOKENS — LIGHT THEME (default)
   ============================================================ */

:root,
[data-theme="light"] {
  /* -- Backgrounds ------------------------------------------- */
  --mp-bg-page:      var(--mp-prim-white);
  --mp-bg-subtle:    var(--mp-prim-neutral-50);
  --mp-bg-surface:   var(--mp-prim-white);
  --mp-bg-surface-2: var(--mp-prim-neutral-50);
  --mp-bg-overlay:   rgba(0, 0, 0, 0.48);

  /* -- Foreground / text ------------------------------------- */
  --mp-fg:           var(--mp-prim-neutral-800);
  --mp-fg-muted:     var(--mp-prim-neutral-500);
  --mp-fg-faint:     var(--mp-prim-neutral-400);
  --mp-fg-on-brand:  var(--mp-prim-white);

  /* -- Brand surfaces ---------------------------------------- */
  --mp-brand-header:  var(--mp-prim-teal-600);   /* #004256 sticky header */
  --mp-brand-footer:  var(--mp-prim-teal-800);   /* #003040 footer */
  --mp-brand-deep:    var(--mp-prim-teal-900);   /* #00222d darkest bg */

  /* -- Primary (green) --------------------------------------- */
  --mp-primary:        var(--mp-prim-green-400);  /* #5BAA3B */
  --mp-primary-dark:   var(--mp-prim-green-700);  /* #2d7a14 CTA rest */
  --mp-primary-darker: var(--mp-prim-green-800);  /* #256010 CTA hover */
  --mp-primary-light:  var(--mp-prim-green-200);  /* #8fd971 */
  --mp-primary-tint:   var(--mp-prim-green-50);   /* ghost bg on light */
  --mp-primary-border: rgba(91, 170, 59, 0.30);   /* pill/badge border */

  /* -- Text on brand surfaces -------------------------------- */
  --mp-on-brand:       var(--mp-prim-white);
  --mp-on-brand-muted: rgba(255, 255, 255, 0.78);
  --mp-on-brand-faint: rgba(255, 255, 255, 0.55);
  --mp-on-brand-dim:   rgba(255, 255, 255, 0.35);

  /* -- Lines / dividers -------------------------------------- */
  --mp-line:          var(--mp-prim-neutral-100);  /* #e3e6ea */
  --mp-line-strong:   var(--mp-prim-neutral-200);  /* #cccfd4 */
  --mp-line-on-brand: rgba(255, 255, 255, 0.12);
  --mp-line-on-brand-strong: rgba(255, 255, 255, 0.20);

  /* -- Interactive ------------------------------------------ */
  --mp-interactive-bg:       transparent;
  --mp-interactive-bg-hover: var(--mp-prim-neutral-50);
  --mp-interactive-border:   var(--mp-prim-neutral-100);

  /* -- Status ----------------------------------------------- */
  --mp-danger:       var(--mp-prim-danger-600);
  --mp-danger-bg:    var(--mp-prim-danger-50);
  --mp-warn:         var(--mp-prim-warn-600);
  --mp-warn-bg:      var(--mp-prim-warn-50);
  --mp-info:         var(--mp-prim-info-600);
  --mp-info-bg:      var(--mp-prim-info-50);
  --mp-success:      var(--mp-prim-green-400);
  --mp-success-bg:   var(--mp-prim-green-50);

  /* -- Focus ring ------------------------------------------- */
  --mp-focus:        var(--mp-prim-teal-600);
}

/* ============================================================
   3. SEMANTIC TOKENS — DARK THEME
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* -- Backgrounds ----------------------------------------- */
    --mp-bg-page:      var(--mp-prim-teal-900);
    --mp-bg-subtle:    var(--mp-prim-teal-800);
    --mp-bg-surface:   var(--mp-prim-teal-800);
    --mp-bg-surface-2: var(--mp-prim-teal-700);
    --mp-bg-overlay:   rgba(0, 0, 0, 0.64);

    /* -- Foreground / text ----------------------------------- */
    --mp-fg:           #eaf2f4;
    --mp-fg-muted:     var(--mp-prim-neutral-300);
    --mp-fg-faint:     #6f8893;
    --mp-fg-on-brand:  var(--mp-prim-white);

    /* Brand surfaces stay the same teal values on dark (they ARE dark) */
    --mp-brand-header:  var(--mp-prim-teal-600);
    --mp-brand-footer:  var(--mp-prim-teal-800);
    --mp-brand-deep:    var(--mp-prim-teal-900);

    /* -- Primary stays green, adjust tints for dark context -- */
    --mp-primary:        var(--mp-prim-green-400);
    --mp-primary-dark:   var(--mp-prim-green-700);
    --mp-primary-darker: var(--mp-prim-green-800);
    --mp-primary-light:  var(--mp-prim-green-200);
    --mp-primary-tint:   rgba(91, 170, 59, 0.12);
    --mp-primary-border: rgba(91, 170, 59, 0.30);

    /* -- Text on brand surfaces stays the same --------------- */
    --mp-on-brand:            var(--mp-prim-white);
    --mp-on-brand-muted:      rgba(255, 255, 255, 0.78);
    --mp-on-brand-faint:      rgba(255, 255, 255, 0.55);
    --mp-on-brand-dim:        rgba(255, 255, 255, 0.35);

    /* -- Lines ----------------------------------------------- */
    --mp-line:          rgba(255, 255, 255, 0.08);
    --mp-line-strong:   rgba(255, 255, 255, 0.14);
    --mp-line-on-brand: rgba(255, 255, 255, 0.08);
    --mp-line-on-brand-strong: rgba(255, 255, 255, 0.20);

    /* -- Interactive ----------------------------------------- */
    --mp-interactive-bg:       transparent;
    --mp-interactive-bg-hover: rgba(255, 255, 255, 0.05);
    --mp-interactive-border:   rgba(255, 255, 255, 0.08);

    /* -- Status (adjusted for dark bg) ----------------------- */
    --mp-danger:       #ff9a8b;
    --mp-danger-bg:    rgba(180, 35, 24, 0.18);
    --mp-warn:         #f5c84a;
    --mp-warn-bg:      rgba(184, 133, 31, 0.15);
    --mp-info:         #7fa8e8;
    --mp-info-bg:      rgba(47, 90, 174, 0.18);
    --mp-success:      var(--mp-prim-green-400);
    --mp-success-bg:   rgba(91, 170, 59, 0.12);

    /* -- Focus ring ------------------------------------------ */
    --mp-focus:        var(--mp-prim-green-200);
  }
}

/* Explicit data-theme="dark" attr — overrides OS preference */
[data-theme="dark"] {
  --mp-bg-page:      var(--mp-prim-teal-900);
  --mp-bg-subtle:    var(--mp-prim-teal-800);
  --mp-bg-surface:   var(--mp-prim-teal-800);
  --mp-bg-surface-2: var(--mp-prim-teal-700);
  --mp-bg-overlay:   rgba(0, 0, 0, 0.64);

  --mp-fg:           #eaf2f4;
  --mp-fg-muted:     var(--mp-prim-neutral-300);
  --mp-fg-faint:     #6f8893;
  --mp-fg-on-brand:  var(--mp-prim-white);

  --mp-brand-header:  var(--mp-prim-teal-600);
  --mp-brand-footer:  var(--mp-prim-teal-800);
  --mp-brand-deep:    var(--mp-prim-teal-900);

  --mp-primary:        var(--mp-prim-green-400);
  --mp-primary-dark:   var(--mp-prim-green-700);
  --mp-primary-darker: var(--mp-prim-green-800);
  --mp-primary-light:  var(--mp-prim-green-200);
  --mp-primary-tint:   rgba(91, 170, 59, 0.12);
  --mp-primary-border: rgba(91, 170, 59, 0.30);

  --mp-on-brand:            var(--mp-prim-white);
  --mp-on-brand-muted:      rgba(255, 255, 255, 0.78);
  --mp-on-brand-faint:      rgba(255, 255, 255, 0.55);
  --mp-on-brand-dim:        rgba(255, 255, 255, 0.35);

  --mp-line:          rgba(255, 255, 255, 0.08);
  --mp-line-strong:   rgba(255, 255, 255, 0.14);
  --mp-line-on-brand: rgba(255, 255, 255, 0.08);
  --mp-line-on-brand-strong: rgba(255, 255, 255, 0.20);

  --mp-interactive-bg:       transparent;
  --mp-interactive-bg-hover: rgba(255, 255, 255, 0.05);
  --mp-interactive-border:   rgba(255, 255, 255, 0.08);

  --mp-danger:       #ff9a8b;
  --mp-danger-bg:    rgba(180, 35, 24, 0.18);
  --mp-warn:         #f5c84a;
  --mp-warn-bg:      rgba(184, 133, 31, 0.15);
  --mp-info:         #7fa8e8;
  --mp-info-bg:      rgba(47, 90, 174, 0.18);
  --mp-success:      var(--mp-prim-green-400);
  --mp-success-bg:   rgba(91, 170, 59, 0.12);

  --mp-focus:        var(--mp-prim-green-200);
}

/* ============================================================
   4. RADIUS SCALE
   Canonical radii. Match these names exactly in all surfaces.
   ============================================================ */

:root {
  --mp-r-xs:      2px;   /* tags, inline badges */
  --mp-r-sm:      4px;   /* small chips, tight insets */
  --mp-r-ctrl:    6px;   /* controls: inputs, buttons, selects */
  --mp-r-card:    8px;   /* cards, panels, dropdowns */
  --mp-r-modal:  12px;   /* modal sheets */
  --mp-r-lg:     16px;   /* large panels, feature cards */
  --mp-r-xl:     20px;   /* gates, auth cards */
  --mp-r-pill: 9999px;   /* pill badges, CTA pill, full-round */
}

/* ============================================================
   5. SPACING SCALE
   4-point base grid. Use these tokens; avoid ad-hoc px values.
   ============================================================ */

:root {
  --mp-sp-1:   4px;
  --mp-sp-2:   8px;
  --mp-sp-3:  12px;
  --mp-sp-4:  16px;
  --mp-sp-5:  20px;
  --mp-sp-6:  24px;
  --mp-sp-8:  32px;
  --mp-sp-10: 40px;
  --mp-sp-12: 48px;
  --mp-sp-16: 64px;
  --mp-sp-20: 80px;
  --mp-sp-24: 96px;
}

/* ============================================================
   6. TYPOGRAPHY SCALE
   ============================================================ */

:root {
  /* Font families */
  --mp-ff-display: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --mp-ff-body:    "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mp-ff-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Roboto Mono", monospace;

  /* Type scale — fluid where headings benefit from it */
  --mp-text-xs:   11px;   /* legal, micro labels */
  --mp-text-sm:   12px;   /* captions, eyebrows */
  --mp-text-base: 15px;   /* body default */
  --mp-text-md:   16px;   /* slightly elevated body */
  --mp-text-lg:   18px;   /* lead text, card titles */
  --mp-text-xl:   22px;   /* section subtitles */
  --mp-text-2xl:  28px;   /* page subtitles */
  --mp-text-3xl:  clamp(28px, 3.2vw, 36px);   /* h2-level */
  --mp-text-4xl:  clamp(32px, 4vw,   44px);   /* h1-level */
  --mp-text-5xl:  clamp(36px, 4.4vw, 56px);   /* hero h1 */

  /* Font weights */
  --mp-fw-regular:    400;
  --mp-fw-medium:     500;
  --mp-fw-semibold:   600;
  --mp-fw-bold:       700;
  --mp-fw-extrabold:  800;

  /* Line heights */
  --mp-lh-tight:  1.1;
  --mp-lh-snug:   1.25;
  --mp-lh-normal: 1.5;
  --mp-lh-relaxed: 1.65;

  /* Letter spacing */
  --mp-ls-tight:  -0.02em;
  --mp-ls-normal:  0;
  --mp-ls-wide:    0.05em;
  --mp-ls-wider:   0.10em;   /* eyebrows, uppercase labels */
}

/* ============================================================
   7. LAYOUT CONSTANTS
   ============================================================ */

:root {
  --mp-container:     1200px;   /* max content width */
  --mp-container-lg:  1282px;   /* wide variant (quote tool) */

  /* Z-index ladder */
  --mp-z-base:    1;
  --mp-z-raised:  10;
  --mp-z-dropdown: 100;
  --mp-z-sticky:  200;
  --mp-z-nav:   9999;
  --mp-z-drawer: 9998;
  --mp-z-scrim:  9997;
  --mp-z-modal: 10000;
}

/* ============================================================
   8. SHADOW SCALE
   ============================================================ */

:root {
  --mp-shadow-xs: 0 1px 2px rgba(15, 21, 35, 0.04);
  --mp-shadow-sm: 0 1px 2px rgba(15, 21, 35, 0.04),
                  0 1px 3px rgba(15, 21, 35, 0.06);
  --mp-shadow-md: 0 4px 12px rgba(15, 21, 35, 0.08),
                  0 2px  4px rgba(15, 21, 35, 0.04);
  --mp-shadow-lg: 0 12px 32px rgba(15, 21, 35, 0.10),
                  0  4px  8px rgba(15, 21, 35, 0.04);
  --mp-shadow-xl: 0 24px 48px rgba(15, 21, 35, 0.14),
                  0  8px 16px rgba(15, 21, 35, 0.06);
  --mp-shadow-stuck: 0 2px 16px rgba(0, 0, 0, 0.18);     /* sticky header */
  --mp-shadow-nav:   0 8px 24px rgba(0, 0, 0, 0.25);     /* nav dropdowns */
  --mp-shadow-green: 0 4px 14px rgba(91, 170, 59, 0.40); /* green CTA glow */
}

/* ============================================================
   9. MOTION / EASING
   ============================================================ */

:root {
  --mp-ease:        cubic-bezier(0.32, 0.72, 0, 1);
  --mp-ease-out:    cubic-bezier(0.0,  0.0,  0.2, 1);
  --mp-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --mp-dur-fast:   150ms;
  --mp-dur-base:   200ms;
  --mp-dur-slow:   300ms;
  --mp-dur-slower: 400ms;

  --mp-motion:     var(--mp-dur-base) var(--mp-ease);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mp-dur-fast:   1ms;
    --mp-dur-base:   1ms;
    --mp-dur-slow:   1ms;
    --mp-dur-slower: 1ms;
  }
}

/* ============================================================
   10. GLOBAL RESET HOOKS (opt-in via .mp-tokens-reset on <body>)
   Only active when a surface explicitly opts in — this file
   does NOT force-reset anything on its own.
   ============================================================ */

.mp-tokens-reset {
  box-sizing: border-box;
  margin: 0;
  font-family: var(--mp-ff-body);
  font-size: var(--mp-text-base);
  line-height: var(--mp-lh-normal);
  color: var(--mp-fg);
  background: var(--mp-bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mp-tokens-reset *,
.mp-tokens-reset *::before,
.mp-tokens-reset *::after {
  box-sizing: inherit;
}

/* ============================================================
   11. GLOBAL A11Y — WCAG A (A11Y-1)
   Focus ring: unconditional, document-root scope.  Every surface that
   loads this token layer gets keyboard-visible focus rings automatically.
   Do NOT scope this under .mp-tokens-reset — ops/portal/shell pages that
   do not use that class would silently lose keyboard operability.
   ============================================================ */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--mp-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* On brand (teal-dark) surfaces the teal focus ring vanishes — use green */
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] [tabindex]:focus-visible {
  outline-color: var(--mp-primary-light);   /* #8fd971 — visible on dark teal */
}

/* prefers-reduced-motion: collapse all animations and transitions.
   The token variables alone (above in §9) are not enough because some
   surfaces use literal ms values or keyframe animations — this block
   catches everything. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Scoped opt-in for surfaces that also use .mp-tokens-reset (kept for
   explicit opt-in pattern — the global block above already covers them) */
.mp-tokens-reset a:focus-visible,
.mp-tokens-reset button:focus-visible,
.mp-tokens-reset [tabindex]:focus-visible {
  outline: 2px solid var(--mp-focus);
  outline-offset: 2px;
}