/*
 *  Design tokens. Every design value lives here; components only use var(--mn-*).
 *  Colour skins (css/theme/skins/*.css) redefine the brand colour slots only.
 *  Dark mode: :root[data-theme="dark"], or the system setting when no theme is chosen ([data-theme="auto"]).
 */

/* ---- Light (default) ---- */
:root {
  color-scheme: light;

  /* Brand slots: skins override these. Default values = the "classic" skin. */
  --mn-primary: #0093d2;
  --mn-primary-600: #0077ac;
  --mn-primary-rgb: 0, 147, 210;
  --mn-primary-50: #e8f6fc;
  --mn-primary-300: #7cc9ea;
  --mn-accent: #ff6c2d;
  --mn-accent-600: #e0521a;
  --mn-accent-50: #fff1ea;
  --mn-ink: #0a1a2b;
  --mn-ink-2: #142a40;
  --mn-ink-rgb: 10, 26, 43;
  --mn-aurora-1: #0093d2;
  --mn-aurora-2: #ff6c2d;
  --mn-aurora-3: #6c5ce7;
  /* Filled buttons: vivid fill + the label colour that passes AA on it (make_skins.py picks them) */
  --mn-primary-btn: #0093d2;
  --mn-on-primary: #0a1a2b;
  --mn-primary-btn-hover: #2ea6da;
  --mn-accent-btn: #ff6c2d;
  --mn-on-accent: #0a1a2b;
  --mn-accent-btn-hover: #ff8653;
  --mn-accent-bright: #ff753a;   /* accent lifted to read on darkened photos */

  /* Surfaces and text (follow light/dark) */
  --mn-bg: #ffffff;
  --mn-surface: #f3f6fb;
  --mn-surface-2: #e7edf6;
  --mn-section-tint: #eef2f9;
  --mn-card: #ffffff;
  --mn-text: var(--mn-ink);
  --mn-muted: #566176;
  --mn-subtle: #8a94a6;
  --mn-line: #e3e9f2;
  --mn-line-strong: #cbd5e3;
  --mn-link: var(--mn-primary-600);
  --mn-link-hover: var(--mn-accent-600);
  /* Highlighted words in headings (.mn-hl): a gradient within the primary hue */
  --mn-hl-from: var(--mn-primary-600);
  --mn-hl-to: var(--mn-primary);
  --mn-star: #ffb020;
  --mn-success: #15803d;
  --mn-danger: #d92d20;
  --mn-white: #ffffff;
  --mn-on-dark: #ffffff;
  --mn-on-dark-muted: #a7b2c5;

  /* Default filled buttons, chips and selected states use the skin's primary colour */
  --mn-btn-bg: var(--mn-primary-btn);
  --mn-btn-text: var(--mn-on-primary);
  --mn-btn-hover: var(--mn-primary-btn-hover);

  /* Deep areas: footer, dark sections */
  --mn-deep: var(--mn-ink);
  --mn-deep-2: var(--mn-ink-2);

  /* Bands: aurora sections, the app band and the footer. Light mode: a pale tinted surface with ink text and
     soft pastel aurora; dark mode: the deep surface with light text (see the dark blocks). Photo bands
     (.mn-band) always stay dark and do not use these. */
  --mn-band-bg: var(--mn-section-tint);
  --mn-band-text: var(--mn-ink);
  --mn-band-heading: var(--mn-ink);
  --mn-band-muted: var(--mn-muted);
  --mn-band-line: var(--mn-line);
  --mn-band-fill: var(--mn-card);
  --mn-band-fill-line: var(--mn-line);
  --mn-band-ctrl: rgba(255, 255, 255, 0.8);
  --mn-band-ctrl-line: var(--mn-line-strong);
  --mn-band-ctrl-text: var(--mn-ink);
  --mn-band-primary: var(--mn-primary);
  --mn-band-primary-text: var(--mn-primary-600);
  --mn-band-eyebrow: var(--mn-accent-600);
  --mn-band-hl-from: var(--mn-hl-from);
  --mn-band-hl-to: var(--mn-hl-to);
  --mn-band-glass: rgba(255, 255, 255, 0.62);
  --mn-band-glass-line: rgba(var(--mn-ink-rgb), 0.08);
  --mn-band-aurora: 0.4;
  --mn-band-logo-on-dark: none;
  --mn-band-logo-on-light: block;
  --mn-band-mono: brightness(0);

  /* The dark header variant (.mn-header--dark): a light glass bar in light mode, the deep bar in dark mode */
  --mn-hdark-text: var(--mn-ink);
  --mn-hdark-hover: var(--mn-surface);
  --mn-hdark-bg: var(--mn-glass-strong);
  --mn-hdark-blur: var(--mn-blur);
  --mn-hdark-shadow: 0 1px 0 var(--mn-line);
  --mn-hdark-pill: transparent;
  --mn-hdark-pill-line: var(--mn-line);
  --mn-hdark-burger-line: var(--mn-line);

  /* Glass */
  --mn-glass: rgba(255, 255, 255, 0.78);
  --mn-glass-strong: rgba(255, 255, 255, 0.92);
  --mn-glass-line: rgba(255, 255, 255, 0.6);
  --mn-glass-dark: rgba(var(--mn-ink-rgb), 0.38);
  --mn-glass-dark-line: rgba(255, 255, 255, 0.16);
  --mn-blur-sm: blur(8px);
  --mn-blur: blur(14px) saturate(1.3);
  --mn-blur-lg: blur(24px) saturate(1.5);

  /* Overlays on photos */
  --mn-overlay: linear-gradient(180deg, rgba(var(--mn-ink-rgb), 0.04) 0%, rgba(var(--mn-ink-rgb), 0.12) 45%, rgba(var(--mn-ink-rgb), 0.74) 100%);
  --mn-scrim: linear-gradient(180deg, rgba(var(--mn-ink-rgb), 0.55) 0%, rgba(var(--mn-ink-rgb), 0.25) 40%, rgba(var(--mn-ink-rgb), 0.6) 100%);

  /* Typography */
  --mn-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mn-font-heading: var(--mn-font);
  /* Type scale: --mn-t (data-type in options.css) multiplies every size */
  --mn-t: 0.92;   /* default: Small (the owner's choice); options.css sets the others */
  --mn-text-xs: calc(13px * var(--mn-t));
  --mn-text-sm: calc(14px * var(--mn-t));
  --mn-text-base: calc(16px * var(--mn-t));
  --mn-text-md: calc(17px * var(--mn-t));
  --mn-text-lg: calc(18px * var(--mn-t));
  --mn-text-xl: calc(20px * var(--mn-t));
  --mn-text-2xl: calc(24px * var(--mn-t));
  --mn-text-3xl: calc(clamp(26px, 1vw + 20px, 32px) * var(--mn-t));
  --mn-text-4xl: calc(clamp(30px, 2vw + 18px, 44px) * var(--mn-t));
  --mn-text-h2: calc(clamp(2rem, 1.5rem + 2vw, 3.25rem) * var(--mn-t));
  --mn-text-display: calc(clamp(2.75rem, 1.8rem + 3.8vw, 5rem) * var(--mn-t));
  --mn-tracking: -0.02em;
  --mn-tracking-tight: -0.025em;
  --mn-tracking-display: -0.035em;
  --mn-heading-weight: 700;

  /* Shape: one factor (--mn-r, set by data-radius in options.css) scales every radius, so they keep their
     ratios. A radius nested inside a padded box is the outer radius minus the inset (concentric corners),
     never less than --mn-radius-xs: max(var(--mn-radius-xs), calc(var(--mn-radius-lg) - 12px)).
     Pills and round buttons stay round at every setting except Sharp. */
  --mn-r: 1;
  --mn-radius-xs: calc(8px * var(--mn-r));
  --mn-radius-sm: calc(12px * var(--mn-r));
  --mn-radius-md: calc(20px * var(--mn-r));
  --mn-radius-lg: calc(28px * var(--mn-r));
  --mn-radius-pill: calc(999px * var(--mn-r));
  --mn-radius-round: calc(50% * min(1, var(--mn-r) * 4));
  /* Depth: hairlines first, shadows for floating UI */
  --mn-shadow-sm: 0 1px 2px rgba(var(--mn-ink-rgb), 0.04), 0 1px 1px rgba(var(--mn-ink-rgb), 0.03);
  --mn-shadow-md: 0 2px 6px rgba(var(--mn-ink-rgb), 0.05), 0 12px 32px rgba(var(--mn-ink-rgb), 0.07);
  --mn-shadow-lg: 0 8px 20px rgba(var(--mn-ink-rgb), 0.06), 0 28px 64px rgba(var(--mn-ink-rgb), 0.12);
  --mn-focus: 0 0 0 4px rgba(var(--mn-primary-rgb), 0.18);

  /* Layout and rhythm. Density: --mn-d (data-density in options.css) scales section spacing, card padding,
     gaps and control heights. */
  --mn-d: 0.8;    /* default: Compact (the owner's choice); options.css sets the others */
  --mn-container: 1320px;
  --mn-gutter: 24px;
  --mn-section-y: calc(clamp(64px, 7vw, 112px) * var(--mn-d));
  --mn-gap: calc(16px * var(--mn-d));
  --mn-header-h: 76px;
  --mn-nav-align: flex-start;   /* top menu placement: data-nav in options.css */

  /* Motion */
  --mn-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --mn-dur: 0.3s;
  --mn-dur-slow: 0.8s;

  /* Bootstrap mapped to the tokens */
  --bs-body-font-family: var(--mn-font);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--mn-text);
  --bs-body-bg: var(--mn-bg);
  --bs-heading-color: inherit;
  --bs-border-color: var(--mn-line);
  --bs-border-radius: var(--mn-radius-sm);
  --bs-link-color-rgb: var(--mn-primary-rgb);
  --bs-focus-ring-color: rgba(var(--mn-primary-rgb), 0.25);
}

/* ---- Dark ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --mn-bg: #070d18;
  --mn-surface: #0f1726;
  --mn-surface-2: #172236;
  --mn-section-tint: #0b1322;
  --mn-card: #0f1726;
  --mn-text: #e8eef7;
  --mn-muted: #a3afc2;
  --mn-subtle: #7b879b;
  --mn-line: rgba(255, 255, 255, 0.09);
  --mn-line-strong: rgba(255, 255, 255, 0.18);
  --mn-link: var(--mn-primary-300);
  --mn-link-hover: var(--mn-accent);
  --mn-hl-from: var(--mn-primary-300);
  --mn-hl-to: color-mix(in oklab, var(--mn-primary-300) 65%, #fff);
  --mn-deep: #04080f;
  --mn-deep-2: #0a1220;
  --mn-band-bg: var(--mn-deep);
  --mn-band-text: var(--mn-on-dark);
  --mn-band-heading: #ffffff;
  --mn-band-muted: var(--mn-on-dark-muted);
  --mn-band-line: rgba(255, 255, 255, 0.1);
  --mn-band-fill: rgba(255, 255, 255, 0.05);
  --mn-band-fill-line: rgba(255, 255, 255, 0.1);
  --mn-band-ctrl: rgba(255, 255, 255, 0.12);
  --mn-band-ctrl-line: rgba(255, 255, 255, 0.34);
  --mn-band-ctrl-text: #ffffff;
  --mn-band-primary: var(--mn-primary-300);
  --mn-band-primary-text: var(--mn-primary-300);
  --mn-band-eyebrow: var(--mn-accent);
  --mn-band-hl-from: var(--mn-primary-300);
  --mn-band-hl-to: color-mix(in oklab, var(--mn-primary-300) 65%, #fff);
  --mn-band-glass: rgba(255, 255, 255, 0.06);
  --mn-band-glass-line: rgba(255, 255, 255, 0.12);
  --mn-band-aurora: 1;
  --mn-band-logo-on-dark: block;
  --mn-band-logo-on-light: none;
  --mn-band-mono: none;
  --mn-hdark-text: #ffffff;
  --mn-hdark-hover: rgba(255, 255, 255, 0.12);
  --mn-hdark-bg: var(--mn-deep);
  --mn-hdark-blur: none;
  --mn-hdark-shadow: none;
  --mn-hdark-pill: rgba(255, 255, 255, 0.08);
  --mn-hdark-pill-line: rgba(255, 255, 255, 0.28);
  --mn-hdark-burger-line: rgba(255, 255, 255, 0.35);
  --mn-glass: rgba(15, 23, 38, 0.72);
  --mn-glass-strong: rgba(15, 23, 38, 0.88);
  --mn-glass-line: rgba(255, 255, 255, 0.1);
  --mn-glass-dark: rgba(4, 8, 15, 0.5);
  --mn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --mn-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.25), 0 12px 32px rgba(0, 0, 0, 0.35);
  --mn-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.3), 0 28px 64px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --mn-bg: #070d18;
    --mn-surface: #0f1726;
    --mn-surface-2: #172236;
    --mn-section-tint: #0b1322;
    --mn-card: #0f1726;
    --mn-text: #e8eef7;
    --mn-muted: #a3afc2;
    --mn-subtle: #7b879b;
    --mn-line: rgba(255, 255, 255, 0.09);
    --mn-line-strong: rgba(255, 255, 255, 0.18);
    --mn-link: var(--mn-primary-300);
    --mn-link-hover: var(--mn-accent);
    --mn-hl-from: var(--mn-primary-300);
    --mn-hl-to: color-mix(in oklab, var(--mn-primary-300) 65%, #fff);
    --mn-deep: #04080f;
    --mn-deep-2: #0a1220;
    --mn-band-bg: var(--mn-deep);
    --mn-band-text: var(--mn-on-dark);
    --mn-band-heading: #ffffff;
    --mn-band-muted: var(--mn-on-dark-muted);
    --mn-band-line: rgba(255, 255, 255, 0.1);
    --mn-band-fill: rgba(255, 255, 255, 0.05);
    --mn-band-fill-line: rgba(255, 255, 255, 0.1);
    --mn-band-ctrl: rgba(255, 255, 255, 0.12);
    --mn-band-ctrl-line: rgba(255, 255, 255, 0.34);
    --mn-band-ctrl-text: #ffffff;
    --mn-band-primary: var(--mn-primary-300);
    --mn-band-primary-text: var(--mn-primary-300);
    --mn-band-eyebrow: var(--mn-accent);
    --mn-band-hl-from: var(--mn-primary-300);
    --mn-band-hl-to: color-mix(in oklab, var(--mn-primary-300) 65%, #fff);
    --mn-band-glass: rgba(255, 255, 255, 0.06);
    --mn-band-glass-line: rgba(255, 255, 255, 0.12);
    --mn-band-aurora: 1;
    --mn-band-logo-on-dark: block;
    --mn-band-logo-on-light: none;
    --mn-band-mono: none;
    --mn-hdark-text: #ffffff;
    --mn-hdark-hover: rgba(255, 255, 255, 0.12);
    --mn-hdark-bg: var(--mn-deep);
    --mn-hdark-blur: none;
    --mn-hdark-shadow: none;
    --mn-hdark-pill: rgba(255, 255, 255, 0.08);
    --mn-hdark-pill-line: rgba(255, 255, 255, 0.28);
    --mn-hdark-burger-line: rgba(255, 255, 255, 0.35);
    --mn-glass: rgba(15, 23, 38, 0.72);
    --mn-glass-strong: rgba(15, 23, 38, 0.88);
    --mn-glass-line: rgba(255, 255, 255, 0.1);
    --mn-glass-dark: rgba(4, 8, 15, 0.5);
    --mn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --mn-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.25), 0 12px 32px rgba(0, 0, 0, 0.35);
    --mn-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.3), 0 28px 64px rgba(0, 0, 0, 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mn-dur: 0.01s;
    --mn-dur-slow: 0.01s;
  }
}