/* ============================================================
   Modern Maps Pro — Design tokens
   Hand-port of the brand's colors_and_type.css.

   Differences from the source:
   - @font-face rules removed (theme.json fontFace owns them).
   - .mm-root reset removed (WordPress + theme.json handle the reset).
   - The brand's `.dark-surface` block has been retargeted to
     `body, .editor-styles-wrapper`, since the theme is dark by default
     and we want the same vars active inside the block editor iframe.
   ============================================================ */


/* ---- 1. Light-surface root tokens ------------------------- */
:root {
  /* Brand — Modern Maps Blue */
  --primary:               #0052ae;
  --primary-container:     #006adc;
  --primary-light:         #3b82f6;
  --on-primary:            #ffffff;
  --primary-fixed-dim:     #c6d8ff;
  --on-primary-fixed:      #001d3d;

  /* Secondary — Glacial Teal */
  --secondary:             #00687a;
  --secondary-container:   #6ae1ff;
  --on-secondary-container:#006374;

  /* Tertiary — Atlas Gold */
  --tertiary-fixed:        #ffdeac;
  --tertiary-warm:         #ffd780;
  --on-tertiary-fixed:     #281900;

  /* Light surfaces */
  --surface-container-lowest: #ffffff;
  --surface-container-low:    #f2f3fd;
  --surface:                  #f9f9ff;
  --surface-container:        #ecedf7;
  --surface-container-high:   #e6e8f2;

  /* Light ink */
  --on-surface:            #191c22;
  --on-surface-variant:    #414753;
  --outline-variant:       #c1c6d6;

  /* Accent alias */
  --accent:                var(--primary);
  --accent-container:      var(--primary-container);

  /* Light fg/bg semantic aliases */
  --fg-1:                  var(--on-surface);
  --fg-2:                  var(--on-surface-variant);
  --fg-3:                  color-mix(in srgb, var(--on-surface) 50%, transparent);
  --bg-1:                  var(--surface);
  --bg-2:                  var(--surface-container-low);
  --bg-3:                  var(--surface-container);

  /* Radii */
  --r-sm:  4px;
  --r-md:  6px;
  --r-lg:  8px;
  --r-xl:  12px;
  --r-2xl: 16px;
  --r-pill: 999px;

  /* Shadows */
  --sh-ambient:    0 0 24px rgba(25, 28, 34, 0.06);
  --sh-ambient-lg: 0 0 40px rgba(25, 28, 34, 0.08);
  --sh-card-dark:  0 24px 80px rgba(0, 0, 0, 0.5);
  --sh-cta-glow:   0 4px 24px rgba(0, 82, 174, 0.35);
  --sh-focus-ring: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);

  /* Gradients (CTA only) */
  --g-primary-cta:   linear-gradient(135deg, var(--primary) 0%, var(--primary-container) 100%);
  --g-blue-band:     linear-gradient(135deg, #003d82, var(--primary) 50%, #1d4ed8);
  --g-cta-deep:      linear-gradient(135deg, #0a1628 0%, #0d1f3c 30%, #0052ae 100%);
  --g-card-fade:     linear-gradient(to top, rgba(25,28,34,0.95) 0%, rgba(25,28,34,0.6) 50%, transparent 100%);

  /* Spacing */
  --s-10: 16px;
  --s-20: 24px;
  --s-30: 40px;
  --s-40: 64px;
  --s-50: 104px;
  --s-60: 168px;
  --s-luxury: 96px;

  /* Layout clamps. The marketing kit pulls --container down to 1240px;
     that override lives in kit.css to keep the marketing surface honest. */
  --container:        1300px;
  --container-narrow: 760px;

  /* Type stacks */
  --f-heading:    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --f-body:       "Inter", ui-sans-serif, system-ui, sans-serif;
  --f-display:    "Instrument Sans", "Manrope", "Inter", system-ui, sans-serif;
  --f-editorial:  "Cardo", "Iowan Old Style", Georgia, serif;
  --f-mono:       ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --t-1: .15s;
  --t-2: .24s;
  --t-3: .4s;
}


/* ---- 2. Dark-surface tokens (theme default) --------------- */
/* Originally `.dark-surface` in the brand source. Retargeted to body
   and the editor iframe wrapper so dark is the canonical default both
   on the front end and inside the block editor. */
body,
.editor-styles-wrapper {
  --dark-bg:           #191c22;
  --dark-bg-raised:    #22262e;
  --dark-bg-elevated:  #2a2f38;

  --dark-text:         #ffffff;
  --dark-text-muted:   rgba(255, 255, 255, 0.45);
  --dark-text-subtle:  rgba(255, 255, 255, 0.25);

  --dark-border:        rgba(255, 255, 255, 0.12);
  --dark-border-subtle: rgba(255, 255, 255, 0.06);

  --dark-accent:        #0052ae;
  --dark-accent-light:  #3b82f6;
  --dark-accent-glow:   rgba(0, 82, 174, 0.25);

  --dark-pin:           #6ae1ff;

  --fg-1: var(--dark-text);
  --fg-2: var(--dark-text-muted);
  --fg-3: var(--dark-text-subtle);
  --bg-1: var(--dark-bg);
  --bg-2: var(--dark-bg-raised);
  --bg-3: var(--dark-bg-elevated);
}


/* ---- 3. Type scale utility classes ------------------------ */
/* The patterns reference these by class name (e.g. has-h1 wrappers, or
   raw additionalClassName="t-display"). Theme.json fontSizes only express
   size; these classes carry the full spec (size + weight + line-height +
   tracking + family) so they stay visually identical to the brand kit. */

.t-display   { font-family: var(--f-heading); font-weight: 700; font-size: clamp(48px, 5vw, 60px); line-height: 1.06; letter-spacing: -0.035em; }
.t-h1        { font-family: var(--f-heading); font-weight: 700; font-size: clamp(36px, 4vw, 44px); line-height: 1.08; letter-spacing: -0.03em; }
.t-h2        { font-family: var(--f-heading); font-weight: 700; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; }
.t-h3        { font-family: var(--f-heading); font-weight: 700; font-size: 20px; line-height: 1.2;  letter-spacing: -0.015em; }
.t-h4        { font-family: var(--f-heading); font-weight: 700; font-size: 16px; line-height: 1.3;  letter-spacing: -0.01em; }
.t-lede      { font-family: var(--f-body);    font-weight: 400; font-size: 17px; line-height: 1.55; color: var(--fg-1); }
.t-body      { font-family: var(--f-body);    font-weight: 400; font-size: 15px; line-height: 1.6;  color: var(--fg-2); }
.t-body-sm   { font-family: var(--f-body);    font-weight: 400; font-size: 13px; line-height: 1.5;  color: var(--fg-2); }
.t-label     { font-family: var(--f-body);    font-weight: 500; font-size: 13px; line-height: 1.3; letter-spacing: 0.01em; }
.t-eyebrow   { font-family: var(--f-body);    font-weight: 600; font-size: 11px; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-2); }
.t-mono      { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 13px; }
.t-editorial { font-family: var(--f-editorial); font-weight: 400; font-size: 20px; line-height: 1.6; font-style: italic; }


/* ---- 4. Layout / glass / focus utilities ----------------- */

.mm-eyebrow          { font: 600 11px/1.1 var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); }
.mm-container        { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.mm-container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 32px; }

.mm-divider          { height: 1px; background: color-mix(in srgb, var(--outline-variant) 35%, transparent); border: 0; }

.mm-ghost-border     { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline-variant) 40%, transparent); }
body .mm-ghost-border,
.editor-styles-wrapper .mm-ghost-border { box-shadow: inset 0 0 0 1px var(--dark-border); }

.mm-glass {
  background: rgba(25, 28, 34, 0.8);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
}

:focus-visible { outline: 0; box-shadow: var(--sh-focus-ring); border-radius: var(--r-sm); }