/* ============================================================
   Noxity Design System — Colors & Type
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ----- Brand colors ----- */
  --nox-navy:        #153051;   /* primary text + dark surfaces */
  --nox-navy-2:      #163152;   /* near-duplicate from the figma */
  --nox-navy-3:      #213B5A;   /* pricing-row blue */
  --nox-navy-4:      #2C4462;   /* footer input fill */
  --nox-navy-5:      #203F66;   /* "60-day guarantee" pill bg */
  --nox-navy-soft:   #6B7E96;   /* secondary copy on dark bgs */

  --nox-crimson:        #C1043B;
  --nox-crimson-hover:  #A30330;
  --nox-crimson-press:  #870328;
  --nox-pink-hot:       #E63757;
  --nox-pink-rose:      #D85975;
  --nox-pink-mid:       #C92554;
  --nox-pink-soft:      #F2C9D2;
  --nox-pink-softer:    #F7DDE2;
  --nox-pink-tint:      #FBEEF1;
  --nox-pink-stripe:    #FBE9EE;
  --nox-blue-ice:       #AFEBF9;
  --nox-green:          #237155;

  /* ----- Neutrals ----- */
  --nox-white:       #F7F7F8;
  --nox-bg:          #F7F7F8;
  --nox-bg-2:        #F7F7F8;
  --nox-bg-3:        #EFEFF1;
  --nox-line:        #EAECF5;
  --nox-line-light:  #E4E4E8;
  --nox-fg-1:        #1A1F2E;
  --nox-fg-2:        #2E3647;
  --nox-fg-mute:     #8C8F95;
  --nox-fg-faint:    #B3B3B3;
  --nox-fg-on-dark:  #FFFFFF;
  --nox-fg-on-dark-2:#516885;

  /* ----- Semantic ----- */
  --nox-color-cta:        var(--nox-crimson);
  --nox-color-cta-hover:  var(--nox-crimson-hover);
  --nox-color-link:       var(--nox-crimson);
  --nox-color-success:    var(--nox-green);
  --nox-color-warning:    #C28A04;
  --nox-color-danger:     var(--nox-crimson);
  --nox-color-info:       var(--nox-navy-3);

  /* ----- Type scale ----- */
  --nox-font-sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nox-font-data:    'Inter', 'Manrope', system-ui, sans-serif;

  --nox-fs-display:   72px;
  --nox-fs-h1:        48px;
  --nox-fs-h2:        40px;
  --nox-fs-h3:        28px;
  --nox-fs-h4:        25px;
  --nox-fs-h5:        20px;
  --nox-fs-body:      16px;
  --nox-fs-body-sm:   14px;
  --nox-fs-caption:   12px;
  --nox-fs-eyebrow:   14px;

  --nox-lh-tight:     1.0;
  --nox-lh-snug:      1.29;
  --nox-lh-normal:    1.6;
  --nox-lh-loose:     1.86;

  --nox-fw-regular:   400;
  --nox-fw-medium:    500;
  --nox-fw-semibold:  600;
  --nox-fw-bold:      700;
  --nox-fw-extrabold: 800;

  --nox-letter-eyebrow: 0.10em;

  /* ----- Spacing (4px base) ----- */
  --nox-space-1:  4px;
  --nox-space-2:  8px;
  --nox-space-3:  12px;
  --nox-space-4:  16px;
  --nox-space-5:  20px;
  --nox-space-6:  24px;
  --nox-space-8:  32px;
  --nox-space-10: 40px;
  --nox-space-12: 48px;
  --nox-space-16: 64px;
  --nox-space-20: 80px;
  --nox-space-24: 96px;
  --nox-space-32: 128px;

  /* ----- Radii ----- */
  --nox-radius-xs:   4px;
  --nox-radius-sm:   5px;
  --nox-radius-md:   8px;
  --nox-radius-lg:   20px;
  --nox-radius-pill: 35px;
  --nox-radius-circle: 9999px;

  /* ----- Shadows ----- */
  --nox-shadow-soft:  0 4px 24px rgba(123,123,123,0.15);
  --nox-shadow-card:  0 8px 28px rgba(123,123,123,0.18);
  --nox-shadow-cta:   0 6px 18px rgba(193,4,59,0.25);
  --nox-shadow-none:  none;

  /* ----- Motion ----- */
  --nox-ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --nox-dur-fast:     120ms;
  --nox-dur-base:     180ms;
  --nox-dur-slow:     280ms;

  /* ----- Container ----- */
  --nox-container:    1440px;
  --nox-content-max:  1040px;
  --nox-gutter:       200px;

  /* ----- Surface tokens (re-skinned per theme) ----- */
  --nox-surface:        var(--nox-white);
  --nox-surface-2:      #FFFFFF;
  --nox-surface-3:      var(--nox-bg-3);
  --nox-border:         var(--nox-line-light);
  --nox-border-strong:  #D6D8DE;
  --nox-text-1:         var(--nox-fg-1);
  --nox-text-2:         var(--nox-fg-2);
  --nox-text-mute:      var(--nox-fg-mute);
  --nox-accent:         var(--nox-crimson);
  --nox-accent-hover:   var(--nox-crimson-hover);
  --nox-accent-fg:      #FFFFFF;
  --nox-link:           var(--nox-crimson);
  --nox-shadow-elev:    var(--nox-shadow-card);
}

/* ============================================================
   Dark mode — for docs, API explorer, dev tools
   Surfaces are rooted in our brand navy (#153051), not gray.
   Activate with: <html data-theme="dark"> or <body data-theme="dark">
   ============================================================ */

[data-theme="dark"] {
  /* Surfaces — navy ramp, derived from --nox-navy.
     surface (page bg) is the LIGHTEST so cards recess into deeper navy. */
  --nox-surface:        #19304F;   /* page bg — close to nox-navy-3 */
  --nox-surface-2:      #11253E;   /* card / panel — between surface and deepest */
  --nox-surface-3:      #0B1B30;   /* deepest — code blocks, nested panels */
  --nox-border:         #243C5C;   /* hairlines */
  --nox-border-strong:  #2F4A6E;   /* dividers */

  /* Text — warm off-white, not pure white */
  --nox-text-1:         #E8EAEF;
  --nox-text-2:         #B8BDC9;
  --nox-text-mute:      #7A8194;

  /* Accent — pink-hot reads better than crimson on dark navy */
  --nox-accent:         var(--nox-pink-hot);
  --nox-accent-hover:   #F25075;
  --nox-accent-fg:      #FFFFFF;
  --nox-link:           var(--nox-pink-hot);

  /* Shadows */
  --nox-shadow-elev:    0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.45);
  --nox-shadow-cta:     0 6px 18px rgba(230,55,87,0.35);
}

[data-theme="dark"] body,
body[data-theme="dark"] {
  background: var(--nox-surface);
  color: var(--nox-text-1);
}

/* ============================================================
   Semantic helpers
   ============================================================ */

.nox-display, h1.nox-h1, .nox-hero-title {
  font-family: var(--nox-font-sans);
  font-weight: var(--nox-fw-bold);
  font-size: var(--nox-fs-h1);
  line-height: var(--nox-lh-snug);
  color: var(--nox-text-1);
  letter-spacing: -0.01em;
}

h2, .nox-h2 {
  font-family: var(--nox-font-sans);
  font-weight: var(--nox-fw-bold);
  font-size: var(--nox-fs-h2);
  line-height: var(--nox-lh-snug);
  color: var(--nox-text-1);
}

h3, .nox-h3 {
  font-family: var(--nox-font-sans);
  font-weight: var(--nox-fw-bold);
  font-size: var(--nox-fs-h3);
  line-height: 1.2;
  color: var(--nox-text-1);
}

h4, .nox-h4 {
  font-family: var(--nox-font-sans);
  font-weight: var(--nox-fw-bold);
  font-size: var(--nox-fs-h4);
  line-height: var(--nox-lh-snug);
  color: var(--nox-text-1);
}

h5, .nox-h5 {
  font-family: var(--nox-font-sans);
  font-weight: var(--nox-fw-semibold);
  font-size: var(--nox-fs-h5);
  line-height: 1.3;
  color: var(--nox-text-1);
}

p, .nox-body {
  font-family: var(--nox-font-sans);
  font-weight: var(--nox-fw-regular);
  font-size: var(--nox-fs-body-sm);
  line-height: var(--nox-lh-loose);
  color: var(--nox-text-mute);
}

.nox-eyebrow {
  font-family: var(--nox-font-sans);
  font-weight: var(--nox-fw-bold);
  font-size: var(--nox-fs-eyebrow);
  letter-spacing: var(--nox-letter-eyebrow);
  text-transform: uppercase;
  color: var(--nox-pink-hot);
  line-height: 1.86;
}

.nox-caption {
  font-family: var(--nox-font-sans);
  font-weight: var(--nox-fw-medium);
  font-size: var(--nox-fs-caption);
  color: var(--nox-text-mute);
}

code, .nox-mono {
  font-family: 'Inter', ui-monospace, 'Cascadia Code', Menlo, monospace;
  font-size: var(--nox-fs-caption);
}