/* NomadSocials global design system
   Architecture: primitive -> semantic -> component. */

:root {
  color-scheme: light;

  /* ================================================================
     1. PRIMITIVE TOKENS — raw brand values
     ================================================================ */
  --ns-color-ocean-900: #003752;
  --ns-color-ocean-700: #104e70;
  --ns-color-ocean-300: #99ccf4;
  --ns-color-ocean-100: #c9e6ff;
  --ns-color-ocean-rgb: 0 55 82;

  --ns-color-clay-700: #a63a1d;
  --ns-color-clay-500: #fd7957;
  --ns-color-clay-300: #ffb4a2;
  --ns-color-clay-100: #ffdbd2;
  --ns-color-clay-rgb: 166 58 29;

  --ns-color-neutral-950: #1b1c1c;
  --ns-color-neutral-800: #34332d;
  --ns-color-neutral-700: #41474e;
  --ns-color-neutral-500: #71787e;
  --ns-color-neutral-300: #c1c7ce;
  --ns-color-neutral-200: #dcd9d9;
  --ns-color-neutral-150: #e4e2e1;
  --ns-color-neutral-100: #eae7e7;
  --ns-color-neutral-75: #f0eded;
  --ns-color-neutral-50: #f6f3f2;
  --ns-color-warm-white: #fcf9f8;
  --ns-color-white: #ffffff;
  --ns-color-white-rgb: 255 255 255;

  --ns-font-family-display: "Hanken Grotesk", sans-serif;
  --ns-font-family-body: "Manrope", sans-serif;
  --ns-font-family-label: "Geist", sans-serif;

  --ns-font-size-xs: .75rem;
  --ns-font-size-sm: .875rem;
  --ns-font-size-base: 1rem;
  --ns-font-size-lg: 1.125rem;
  --ns-font-size-xl: 1.5rem;
  --ns-font-size-2xl: 2rem;
  --ns-font-size-3xl: 3rem;
  --ns-font-size-4xl: 4.5rem;

  --ns-space-1: .25rem;
  --ns-space-2: .5rem;
  --ns-space-3: .75rem;
  --ns-space-4: 1rem;
  --ns-space-5: 1.5rem;
  --ns-space-6: 2rem;
  --ns-space-7: 3rem;
  --ns-space-8: 4rem;
  --ns-space-9: 6rem;

  --ns-radius-sm: .5rem;
  --ns-radius-md: .75rem;
  --ns-radius-lg: 1rem;
  --ns-radius-xl: 1.5rem;
  --ns-radius-full: 999px;

  --ns-shadow-sm: 0 .5rem 1.5rem rgb(var(--ns-color-ocean-rgb) / .05);
  --ns-shadow-md: 0 1rem 3rem rgb(var(--ns-color-ocean-rgb) / .07);
  --ns-shadow-lg: 0 1.4rem 3.5rem rgb(var(--ns-color-clay-rgb) / .14);
  --ns-duration-fast: 180ms;
  --ns-duration-base: 240ms;
  --ns-ease-standard: cubic-bezier(.2, .8, .2, 1);

  /* ================================================================
     2. SEMANTIC TOKENS — purpose-based aliases
     ================================================================ */
  --ns-color-brand-primary: var(--ns-color-ocean-900);
  --ns-color-brand-primary-container: var(--ns-color-ocean-700);
  --ns-color-brand-primary-soft: var(--ns-color-ocean-100);
  --ns-color-brand-secondary: var(--ns-color-clay-700);
  --ns-color-brand-secondary-container: var(--ns-color-clay-500);
  --ns-color-brand-secondary-soft: var(--ns-color-clay-100);

  --ns-color-background: var(--ns-color-warm-white);
  --ns-color-surface: var(--ns-color-warm-white);
  --ns-color-surface-raised: var(--ns-color-white);
  --ns-color-surface-muted: var(--ns-color-neutral-50);
  --ns-color-surface-strong: var(--ns-color-neutral-800);
  --ns-color-text: var(--ns-color-neutral-950);
  --ns-color-text-muted: var(--ns-color-neutral-700);
  --ns-color-text-on-brand: var(--ns-color-white);
  --ns-color-border: rgb(var(--ns-color-ocean-rgb) / .14);
  --ns-color-border-strong: rgb(var(--ns-color-ocean-rgb) / .34);
  --ns-color-focus: var(--ns-color-brand-secondary);

  --ns-font-display: var(--ns-font-family-display);
  --ns-font-body: var(--ns-font-family-body);
  --ns-font-label: var(--ns-font-family-label);
  --ns-type-display: clamp(2.5rem, 5vw, var(--ns-font-size-4xl));
  --ns-type-heading-lg: clamp(2.1rem, 4vw, var(--ns-font-size-3xl));
  --ns-type-heading-md: var(--ns-font-size-2xl);
  --ns-type-heading-sm: var(--ns-font-size-xl);
  --ns-type-body-lg: var(--ns-font-size-lg);
  --ns-type-body: var(--ns-font-size-base);
  --ns-type-label: var(--ns-font-size-sm);

  --ns-layout-container: 80rem;
  --ns-layout-page-gutter: clamp(var(--ns-space-4), 4vw, var(--ns-space-8));
  --ns-layout-section-space: clamp(var(--ns-space-8), 8vw, 7rem);
  --ns-layout-grid-gap: var(--ns-space-5);

  /* Compatibility aliases used by the first extracted version. */
  --ns-primary: var(--ns-color-brand-primary);
  --ns-primary-container: var(--ns-color-brand-primary-container);
  --ns-primary-soft: var(--ns-color-brand-primary-soft);
  --ns-secondary: var(--ns-color-brand-secondary);
  --ns-secondary-container: var(--ns-color-brand-secondary-container);
  --ns-secondary-soft: var(--ns-color-brand-secondary-soft);
  --ns-tertiary: var(--ns-color-surface-strong);
  --ns-surface: var(--ns-color-surface);
  --ns-surface-lowest: var(--ns-color-surface-raised);
  --ns-surface-low: var(--ns-color-surface-muted);
  --ns-ink: var(--ns-color-text);
  --ns-muted: var(--ns-color-text-muted);
  --ns-outline-soft: var(--ns-color-border);
  --ns-container: var(--ns-layout-container);
  --ns-page-gutter: var(--ns-layout-page-gutter);
  --ns-section-space: var(--ns-layout-section-space);
  --ns-grid-gap: var(--ns-layout-grid-gap);

  /* ================================================================
     3. COMPONENT TOKENS — component-specific contracts
     ================================================================ */
  --ns-button-bg: var(--ns-color-brand-primary);
  --ns-button-bg-hover: var(--ns-color-brand-secondary);
  --ns-button-fg: var(--ns-color-text-on-brand);
  --ns-button-padding-x: var(--ns-space-5);
  --ns-button-padding-y: .8rem;
  --ns-button-radius: var(--ns-radius-full);
  --ns-button-shadow: 0 .8rem 1.8rem rgb(var(--ns-color-ocean-rgb) / .16);

  --ns-card-bg: rgb(var(--ns-color-white-rgb) / .68);
  --ns-card-bg-hover: rgb(var(--ns-color-white-rgb) / .92);
  --ns-card-border: var(--ns-color-border);
  --ns-card-border-hover: rgb(var(--ns-color-clay-rgb) / .52);
  --ns-card-padding: clamp(1.4rem, 2.5vw, var(--ns-space-6));
  --ns-card-radius: var(--ns-radius-xl);
  --ns-card-shadow: var(--ns-shadow-md);
  --ns-card-shadow-hover: var(--ns-shadow-lg);

  --ns-pill-bg: rgb(var(--ns-color-clay-rgb) / .09);
  --ns-pill-fg: var(--ns-color-brand-secondary);
  --ns-pill-radius: var(--ns-radius-full);

  --ns-case-study-section-bg: var(--ns-color-text);
  --ns-case-study-section-fg: var(--ns-color-text-on-brand);
  --ns-case-study-section-muted: var(--ns-color-neutral-200);
  --ns-case-study-card-bg: var(--ns-color-surface-raised);
  --ns-case-study-card-border: var(--ns-color-surface-raised);
  --ns-case-study-card-fg: var(--ns-color-text);
  --ns-case-study-card-muted: var(--ns-color-text-muted);
  --ns-case-study-tag-bg: var(--ns-color-text);
  --ns-case-study-tag-fg: var(--ns-color-text-on-brand);
  --ns-case-study-accent: var(--ns-color-brand-secondary-soft);

  --ns-authority-panel-bg: var(--ns-color-brand-primary);
  --ns-authority-panel-fg: var(--ns-color-text-on-brand);
  --ns-authority-panel-accent: var(--ns-color-brand-secondary-soft);
  --ns-authority-panel-radius: var(--ns-radius-xl);
  --ns-authority-panel-padding: var(--ns-space-8);
}

/* ================================================================
   GLOBAL UTILITIES AND COMPONENTS
   ================================================================ */

.ns-page {
  min-width: 320px;
  margin: 0;
  color: var(--ns-color-text);
  background: var(--ns-color-background);
  font-family: var(--ns-font-body);
}

.ns-mesh-bg {
  background-color: var(--ns-color-background);
  background-image:
    radial-gradient(at 0% 0%, rgb(var(--ns-color-clay-rgb) / .05) 0, transparent 50%),
    radial-gradient(at 100% 0%, rgb(var(--ns-color-ocean-rgb) / .05) 0, transparent 50%),
    radial-gradient(at 100% 100%, rgb(var(--ns-color-clay-rgb) / .05) 0, transparent 50%),
    radial-gradient(at 0% 100%, rgb(var(--ns-color-ocean-rgb) / .05) 0, transparent 50%);
}

.ns-container {
  width: min(calc(100% - (var(--ns-layout-page-gutter) * 2)), var(--ns-layout-container));
  margin-inline: auto;
}

.ns-section { padding-block: var(--ns-layout-section-space); }
.ns-section--warm { background: rgb(246 243 242 / .72); }
.ns-section--dark { color: var(--ns-color-text-on-brand); background: var(--ns-color-surface-strong); }
.ns-stack { display: flex; flex-direction: column; gap: var(--ns-space-5); }
.ns-cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ns-space-4); }
.ns-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ns-layout-grid-gap); }

.ns-display,
.ns-heading-lg,
.ns-heading-md,
.ns-heading-sm {
  margin: 0;
  color: var(--ns-color-text);
  font-family: var(--ns-font-display);
}

.ns-display { font-size: var(--ns-type-display); font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
.ns-heading-lg { font-size: var(--ns-type-heading-lg); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.ns-heading-md { font-size: var(--ns-type-heading-md); font-weight: 600; line-height: 1.3; }
.ns-heading-sm { font-size: var(--ns-type-heading-sm); font-weight: 600; line-height: 1.4; }
.ns-body-lg { margin: 0; color: var(--ns-color-text-muted); font-size: var(--ns-type-body-lg); line-height: 1.6; }
.ns-body { margin: 0; color: var(--ns-color-text-muted); font-size: var(--ns-type-body); line-height: 1.6; }
.ns-label { color: var(--ns-color-text-muted); font-family: var(--ns-font-label); font-size: var(--ns-type-label); font-weight: 500; letter-spacing: .05em; line-height: 1.2; }

.ns-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  width: fit-content;
  padding: .4rem .85rem;
  border-radius: var(--ns-pill-radius);
  color: var(--ns-pill-fg);
  background: var(--ns-pill-bg);
  font-family: var(--ns-font-label);
  font-size: var(--ns-font-size-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ns-eyebrow::before { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; content: ""; }

.ns-button {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: var(--ns-button-padding-y) var(--ns-button-padding-x);
  border: 1px solid transparent;
  border-radius: var(--ns-button-radius);
  color: var(--ns-button-fg);
  background: var(--ns-button-bg);
  box-shadow: var(--ns-button-shadow);
  font-family: var(--ns-font-label);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform var(--ns-duration-fast) var(--ns-ease-standard), background var(--ns-duration-fast) var(--ns-ease-standard), border-color var(--ns-duration-fast) var(--ns-ease-standard), color var(--ns-duration-fast) var(--ns-ease-standard), box-shadow var(--ns-duration-fast) var(--ns-ease-standard);
}

.ns-button:hover { background: var(--ns-button-bg-hover); transform: translateY(-2px); }
.ns-button:active { transform: scale(.97); }
.ns-button--secondary { --ns-button-bg: var(--ns-color-brand-secondary); --ns-button-bg-hover: var(--ns-color-brand-primary); }
.ns-button--outline { --ns-button-bg: transparent; --ns-button-bg-hover: var(--ns-color-surface-raised); --ns-button-fg: var(--ns-color-brand-primary); border-color: var(--ns-color-border-strong); box-shadow: none; }
.ns-button--outline:hover { border-color: var(--ns-color-brand-secondary); color: var(--ns-color-brand-secondary); }

.ns-card {
  padding: var(--ns-card-padding);
  border: 1px solid var(--ns-card-border);
  border-radius: var(--ns-card-radius);
  background: var(--ns-card-bg);
  box-shadow: var(--ns-card-shadow);
  transition: transform var(--ns-duration-base) var(--ns-ease-standard), border-color var(--ns-duration-base) var(--ns-ease-standard), background var(--ns-duration-base) var(--ns-ease-standard), box-shadow var(--ns-duration-base) var(--ns-ease-standard);
}

.ns-card:hover { border-color: var(--ns-card-border-hover); background: var(--ns-card-bg-hover); box-shadow: var(--ns-card-shadow-hover); transform: translateY(-4px); }
.ns-card--outlined { --ns-card-border: var(--ns-color-text); --ns-card-shadow: none; }
.ns-card--muted { --ns-card-bg: rgb(228 226 225 / .4); }
.ns-card--dark { --ns-card-bg: var(--ns-color-surface-strong); --ns-card-bg-hover: var(--ns-color-surface-strong); --ns-card-border: rgb(var(--ns-color-white-rgb) / .14); color: var(--ns-color-text-on-brand); box-shadow: 0 1.5rem 3rem rgb(0 0 0 / .16); }
.ns-card--dark :is(.ns-heading-lg, .ns-heading-md, .ns-heading-sm) { color: var(--ns-color-text-on-brand); }
.ns-card--dark :is(.ns-body, .ns-body-lg, .ns-label) { color: rgb(var(--ns-color-white-rgb) / .68); }

.ns-pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: .35rem .7rem;
  border-radius: var(--ns-pill-radius);
  color: var(--ns-pill-fg);
  background: var(--ns-pill-bg);
  font-family: var(--ns-font-label);
  font-size: var(--ns-font-size-xs);
  font-weight: 700;
}

.ns-glass {
  border: 1px solid rgb(193 199 206 / .18);
  background: rgb(252 249 248 / .8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

:is(.ns-button, .ns-card, a, button):focus-visible { outline: 2px solid var(--ns-color-focus); outline-offset: 4px; }

@media (max-width: 900px) {
  .ns-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  :root {
    --ns-layout-page-gutter: .75rem;
    --ns-layout-section-space: var(--ns-space-8);
    --ns-layout-grid-gap: var(--ns-space-4);
  }

  .ns-grid { grid-template-columns: 1fr; }
  .ns-card { --ns-card-radius: var(--ns-radius-lg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}