/* ==========================================================================
   Pure Marketing Design System — Design tokens
   --------------------------------------------------------------------------
   Every value in the system resolves to a custom property declared here.
   Change a token, change every component. Never hard-code a colour, a radius,
   a font size or a spacing step inside a component file.

   Layers:
     1. Primitive tokens   --pm-*        raw scale values
     2. Semantic tokens    --pm-color-*  meaning, not appearance
     3. Scheme tokens      --pm-bg / --pm-fg / ...  set per section, see below

   Colour schemes
   --------------
   Relume-style sections carry their own colour scheme so any block can be
   dropped on a light, dark or brand background without editing its CSS.
   Put one of these classes on the section root:

     .pm-scheme-light      white background, dark text          (default)
     .pm-scheme-subtle     tinted background, dark text
     .pm-scheme-dark       dark background, light text
     .pm-scheme-brand      primary background, on-primary text
     .pm-scheme-accent     accent background, on-accent text

   Components read --pm-bg, --pm-fg, --pm-fg-muted, --pm-border, --pm-surface,
   --pm-btn-* and never the raw palette, so they invert automatically.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- type */
  --pm-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --pm-font-display: var(--pm-font-sans);
  --pm-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Fluid ramp: mobile floor -> desktop ceiling, matched to Relume's scale. */
  --pm-text-h1: clamp(2.5rem, 1.6rem + 3.6vw, 3.5rem);
  --pm-text-h2: clamp(2.25rem, 1.55rem + 2.8vw, 3rem);
  --pm-text-h3: clamp(2rem, 1.5rem + 2vw, 2.5rem);
  --pm-text-h4: clamp(1.75rem, 1.45rem + 1.2vw, 2rem);
  --pm-text-h5: clamp(1.375rem, 1.25rem + 0.5vw, 1.5rem);
  --pm-text-h6: clamp(1.25rem, 1.2rem + 0.2vw, 1.25rem);
  --pm-text-xl: 1.5rem;
  --pm-text-lg: 1.25rem;
  --pm-text-md: 1.125rem;
  --pm-text-base: 1rem;
  --pm-text-sm: 0.875rem;
  --pm-text-xs: 0.75rem;

  --pm-leading-tight: 1.2;
  --pm-leading-snug: 1.3;
  --pm-leading-normal: 1.4;
  --pm-leading-relaxed: 1.5;
  --pm-leading-loose: 1.6;

  --pm-tracking-tight: -0.02em;
  --pm-tracking-heading: -0.01em;
  --pm-tracking-normal: 0;
  --pm-tracking-wide: 0.06em;
  --pm-tracking-widest: 0.16em;

  --pm-weight-light: 300;
  --pm-weight-regular: 400;
  --pm-weight-medium: 500;
  --pm-weight-semibold: 600;
  --pm-weight-bold: 700;
  --pm-weight-black: 800;

  --pm-weight-heading: var(--pm-weight-bold);
  --pm-weight-body: var(--pm-weight-regular);

  /* ------------------------------------------------------------- spacing */
  --pm-space-0: 0rem;
  --pm-space-1: 0.25rem;
  --pm-space-2: 0.5rem;
  --pm-space-3: 0.75rem;
  --pm-space-4: 1rem;
  --pm-space-5: 1.25rem;
  --pm-space-6: 1.5rem;
  --pm-space-8: 2rem;
  --pm-space-10: 2.5rem;
  --pm-space-12: 3rem;
  --pm-space-14: 3.5rem;
  --pm-space-16: 4rem;
  --pm-space-18: 4.5rem;
  --pm-space-20: 5rem;
  --pm-space-24: 6rem;
  --pm-space-28: 7rem;
  --pm-space-32: 8rem;

  /* Section rhythm. Tightened from the Relume-default py-16/24/28 scale —
     the client felt the rebuild had too many big gaps compared to the old
     site, so these now land noticeably closer together at every breakpoint. */
  --pm-section-py: var(--pm-space-12);
  --pm-section-py-sm: var(--pm-space-10);
  --pm-section-py-lg: var(--pm-space-20);
  --pm-gutter: 5%;
  --pm-container: 80rem; /* 1280px */
  --pm-container-narrow: 48rem; /* 768px */
  --pm-container-wide: 90rem; /* 1440px */
  --pm-measure: 70ch;

  /* --------------------------------------------------------------- radii */
  --pm-radius-none: 0rem;
  --pm-radius-xs: 0.25rem;
  --pm-radius-sm: 0.375rem;
  --pm-radius-md: 0.5rem;
  --pm-radius-lg: 0.75rem;
  --pm-radius-xl: 1rem;
  --pm-radius-2xl: 1.5rem;
  --pm-radius-full: 62.5rem;

  /* Component-level radii. Set these in a theme to reshape the whole system. */
  --pm-radius-button: var(--pm-radius-none);
  --pm-radius-card: var(--pm-radius-none);
  --pm-radius-image: var(--pm-radius-none);
  --pm-radius-form: var(--pm-radius-none);
  --pm-radius-badge: var(--pm-radius-none);
  --pm-radius-checkbox: var(--pm-radius-none);
  --pm-radius-dropdown: var(--pm-radius-none);
  --pm-radius-avatar: var(--pm-radius-full);

  /* ------------------------------------------------------------- borders */
  --pm-border-width: 1px;
  --pm-border-width-thick: 2px;

  /* ------------------------------------------------------------- shadows */
  --pm-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --pm-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --pm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --pm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --pm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);
  --pm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --pm-shadow-focus: 0 0 0 3px rgb(0 0 0 / 0.12);

  /* --------------------------------------------------------------- motion */
  --pm-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --pm-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --pm-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --pm-duration-fast: 150ms;
  --pm-duration: 300ms;
  --pm-duration-slow: 500ms;

  /* ---------------------------------------------------------------- misc */
  --pm-z-base: 1;
  --pm-z-sticky: 100;
  --pm-z-dropdown: 500;
  --pm-z-navbar: 900;
  --pm-z-overlay: 990;
  --pm-z-modal: 1000;
  --pm-z-toast: 1100;

  --pm-nav-height: 7.5rem;
  --pm-nav-height-mobile: 7.5rem;

  /* ------------------------------------------------------- neutral palette
     The default (neutral) theme. themes/*.css override these three blocks
     and nothing else. */
  --pm-palette-white: #ffffff;
  --pm-palette-black: #000000;
  --pm-palette-neutral-50: #fafafa;
  --pm-palette-neutral-100: #f5f5f5;
  --pm-palette-neutral-200: #e9e9e9;
  --pm-palette-neutral-300: #d4d4d4;
  --pm-palette-neutral-400: #a3a3a3;
  --pm-palette-neutral-500: #737373;
  --pm-palette-neutral-600: #525252;
  --pm-palette-neutral-700: #404040;
  --pm-palette-neutral-800: #262626;
  --pm-palette-neutral-900: #171717;
  --pm-palette-neutral-950: #0a0a0a;

  --pm-palette-primary: #000000;
  --pm-palette-primary-hover: #333333;
  --pm-palette-on-primary: #ffffff;
  --pm-palette-accent: #000000;
  --pm-palette-on-accent: #ffffff;

  --pm-palette-success: #12a87b;
  --pm-palette-warning: #f5a623;
  --pm-palette-danger: #d92d20;
  --pm-palette-info: #3156fe;

  /* ------------------------------------------------------ semantic tokens */
  --pm-color-page: var(--pm-palette-white);
  --pm-color-surface: var(--pm-palette-white);
  --pm-color-surface-subtle: var(--pm-palette-neutral-100);
  --pm-color-surface-inverse: var(--pm-palette-neutral-950);
  --pm-color-surface-inverse-raised: var(--pm-palette-neutral-900);
  --pm-color-text: var(--pm-palette-black);
  --pm-color-text-muted: var(--pm-palette-neutral-600);
  --pm-color-text-inverse: var(--pm-palette-white);
  /* neutral-300, not 400: muted text on dark also lands over photo overlays,
     where 400 measures under 3:1. */
  --pm-color-text-inverse-muted: var(--pm-palette-neutral-300);
  --pm-color-border: var(--pm-palette-black);
  --pm-color-border-subtle: var(--pm-palette-neutral-200);
  --pm-color-border-inverse: var(--pm-palette-white);
  --pm-color-primary: var(--pm-palette-primary);
  --pm-color-primary-hover: var(--pm-palette-primary-hover);
  --pm-color-on-primary: var(--pm-palette-on-primary);
  --pm-color-accent: var(--pm-palette-accent);
  --pm-color-on-accent: var(--pm-palette-on-accent);
  --pm-color-overlay: rgb(0 0 0 / 0.6);

  /* --------------------------------------------- default (light) scheme
     Every section inherits these unless it carries a .pm-scheme-* class. */
  --pm-bg: var(--pm-color-page);
  --pm-fg: var(--pm-color-text);
  --pm-fg-muted: var(--pm-color-text-muted);
  --pm-border-color: var(--pm-color-border);
  --pm-border-soft: var(--pm-color-border-subtle);
  --pm-surface: var(--pm-color-surface);
  --pm-surface-raised: var(--pm-color-surface-subtle);
  --pm-btn-bg: var(--pm-color-primary);
  --pm-btn-fg: var(--pm-color-on-primary);
  --pm-btn-border: var(--pm-color-primary);
  --pm-accent: var(--pm-color-accent);
  --pm-on-accent: var(--pm-color-on-accent);
}

/* ==========================================================================
   Colour schemes
   ========================================================================== */

.pm-scheme-light {
  --pm-bg: var(--pm-color-page);
  --pm-fg: var(--pm-color-text);
  --pm-fg-muted: var(--pm-color-text-muted);
  --pm-border-color: var(--pm-color-border);
  --pm-border-soft: var(--pm-color-border-subtle);
  --pm-surface: var(--pm-color-surface);
  --pm-surface-raised: var(--pm-color-surface-subtle);
  --pm-btn-bg: var(--pm-color-primary);
  --pm-btn-fg: var(--pm-color-on-primary);
  --pm-btn-border: var(--pm-color-primary);
}

.pm-scheme-subtle {
  --pm-bg: var(--pm-color-surface-subtle);
  --pm-fg: var(--pm-color-text);
  --pm-fg-muted: var(--pm-color-text-muted);
  --pm-border-color: var(--pm-color-border);
  --pm-border-soft: var(--pm-color-border-subtle);
  --pm-surface: var(--pm-color-surface);
  --pm-surface-raised: var(--pm-color-page);
  --pm-btn-bg: var(--pm-color-primary);
  --pm-btn-fg: var(--pm-color-on-primary);
  --pm-btn-border: var(--pm-color-primary);
}

.pm-scheme-dark {
  --pm-bg: var(--pm-color-surface-inverse);
  --pm-fg: var(--pm-color-text-inverse);
  --pm-fg-muted: var(--pm-color-text-inverse-muted);
  --pm-border-color: var(--pm-color-border-inverse);
  --pm-border-soft: rgb(255 255 255 / 0.16);
  --pm-surface: var(--pm-color-surface-inverse-raised);
  --pm-surface-raised: var(--pm-color-surface-inverse-raised);
  --pm-btn-bg: var(--pm-color-text-inverse);
  --pm-btn-fg: var(--pm-color-surface-inverse);
  --pm-btn-border: var(--pm-color-text-inverse);
  --pm-shadow-focus: 0 0 0 3px rgb(255 255 255 / 0.25);
}

.pm-scheme-brand {
  --pm-bg: var(--pm-color-primary);
  --pm-fg: var(--pm-color-on-primary);
  --pm-fg-muted: color-mix(in srgb, var(--pm-color-on-primary) 72%, transparent);
  --pm-border-color: var(--pm-color-on-primary);
  --pm-border-soft: color-mix(in srgb, var(--pm-color-on-primary) 20%, transparent);
  --pm-surface: color-mix(in srgb, var(--pm-color-on-primary) 8%, var(--pm-color-primary));
  --pm-surface-raised: color-mix(in srgb, var(--pm-color-on-primary) 14%, var(--pm-color-primary));
  --pm-btn-bg: var(--pm-color-on-primary);
  --pm-btn-fg: var(--pm-color-primary);
  --pm-btn-border: var(--pm-color-on-primary);
  --pm-shadow-focus: 0 0 0 3px rgb(255 255 255 / 0.25);
}

.pm-scheme-accent {
  --pm-bg: var(--pm-color-accent);
  --pm-fg: var(--pm-color-on-accent);
  --pm-fg-muted: color-mix(in srgb, var(--pm-color-on-accent) 72%, transparent);
  --pm-border-color: var(--pm-color-on-accent);
  --pm-border-soft: color-mix(in srgb, var(--pm-color-on-accent) 20%, transparent);
  --pm-surface: color-mix(in srgb, var(--pm-color-on-accent) 10%, var(--pm-color-accent));
  --pm-surface-raised: color-mix(in srgb, var(--pm-color-on-accent) 16%, var(--pm-color-accent));
  --pm-btn-bg: var(--pm-color-on-accent);
  --pm-btn-fg: var(--pm-color-accent);
  --pm-btn-border: var(--pm-color-on-accent);
  --pm-shadow-focus: 0 0 0 3px rgb(255 255 255 / 0.25);
}