/* ══════════════════════════════════════════════════════════════
   NourSky — Design Tokens
   Source: noursky-redesign.html
   Target: WordPress + Elementor Pro (Flexbox Containers)

   WHERE TO PASTE:
   Option A (recommended) → Child theme  style.css
   Option B → Elementor → Site Settings → Custom CSS
   Option C → Appearance → Customize → Additional CSS

   IMPORTANT: Elementor's color picker does NOT accept var(...).
   These variables work in Custom CSS, HTML widgets, and any
   "Custom CSS" field on a widget/container. For widget-level
   colors, register the Global Colors listed at the bottom.
   ══════════════════════════════════════════════════════════════ */

:root {

  /* ─────────── 1. BRAND — Violet scale ─────────── */
  --ns-v-50:   #F9F7FE;
  --ns-v-100:  #F4F0FF;
  --ns-v-200:  #E7E1F7;
  --ns-v-300:  #B9AEFF;
  --ns-v-400:  #9A8BFF;
  --ns-v-500:  #8B7CF6;
  --ns-v-600:  #6C5CE7;   /* PRIMARY — main brand accent */
  --ns-v-700:  #5241D4;
  --ns-v-800:  #3B2CA8;
  --ns-v-900:  #2A1B6B;

  /* ─────────── 2. BRAND — Support ─────────── */
  --ns-indigo: #4338CA;
  --ns-pink:   #E91E63;   /* accent only — never structural */
  --ns-pink-soft: #FF6B9D;

  /* ─────────── 3. SURFACES ─────────── */
  --ns-paper:    #FFFFFF;
  --ns-surface:  #F9F7FE;   /* alt section background */
  --ns-lav:      #F4F0FF;   /* cards, callouts, zebra rows */
  --ns-ink:      #100829;   /* dark sections — NOT pure black */
  --ns-ink-2:    #1A0F3D;
  --ns-ink-3:    #241653;
  --ns-line:     #E7E1F7;   /* borders on light */
  --ns-line-dark: rgba(255,255,255,.10); /* borders on dark */

  /* ─────────── 4. TEXT ─────────── */
  --ns-tx:      #160F2E;   /* body / headings on light */
  --ns-tx-2:    #4A4468;   /* secondary */
  --ns-tx-3:    #807A9B;   /* labels, meta */
  --ns-tx-inv:  #FFFFFF;   /* on dark */
  --ns-tx-inv-2: rgba(255,255,255,.66);

  /* ─────────── 5. SEMANTIC (numbers & states only) ─────────── */
  --ns-ok:   #10B981;
  --ns-warn: #B8860B;
  --ns-bad:  #E5484D;

  /* ─────────── 6. TYPOGRAPHY ─────────── */
  --ns-font-display: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif;
  --ns-font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --ns-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* fluid scale — clamp(min, preferred, max) */
  --ns-fs-h1:      clamp(42px, 7.2vw, 84px);
  --ns-fs-h2:      clamp(32px, 4.6vw, 60px);
  --ns-fs-h3:      clamp(19px, 2vw, 24px);
  --ns-fs-lead:    clamp(16px, 1.35vw, 19px);
  --ns-fs-body:    16px;
  --ns-fs-sm:      14.5px;
  --ns-fs-xs:      13px;
  --ns-fs-eyebrow: 11.5px;

  --ns-lh-tight: 1.02;
  --ns-lh-head:  1.2;
  --ns-lh-body:  1.6;
  --ns-lh-lead:  1.65;

  --ns-ls-display: -.035em;
  --ns-ls-h3:      -.02em;
  --ns-ls-eyebrow: .22em;

  --ns-fw-reg: 400;
  --ns-fw-med: 500;
  --ns-fw-sb:  600;
  --ns-fw-bd:  700;

  /* ─────────── 7. SPACING (8px rhythm) ─────────── */
  --ns-s-1:  4px;
  --ns-s-2:  8px;
  --ns-s-3:  12px;
  --ns-s-4:  16px;
  --ns-s-5:  20px;
  --ns-s-6:  24px;
  --ns-s-8:  32px;
  --ns-s-10: 40px;
  --ns-s-12: 48px;
  --ns-s-16: 64px;

  --ns-gap:         20px;   /* grid gap between cards */
  --ns-pad-inline:  clamp(20px, 5vw, 64px);
  --ns-sec-y:       clamp(72px, 10vw, 140px);
  --ns-maxw:        1240px;

  /* ─────────── 8. RADIUS ─────────── */
  --ns-r-sm:   10px;
  --ns-r:      16px;
  --ns-r-lg:   24px;
  --ns-r-xl:   32px;
  --ns-r-pill: 999px;

  /* ─────────── 9. ELEVATION ─────────── */
  --ns-sh-1: 0 1px 2px rgba(22,15,46,.04), 0 4px 16px rgba(108,92,231,.06);
  --ns-sh-2: 0 2px 6px rgba(22,15,46,.05), 0 18px 48px rgba(108,92,231,.10);
  --ns-sh-3: 0 30px 80px rgba(42,27,107,.18);
  --ns-glow: 0 0 0 1px rgba(108,92,231,.25), 0 20px 60px rgba(108,92,231,.28);
  --ns-sh-btn: 0 1px 0 rgba(255,255,255,.28) inset, 0 10px 30px rgba(108,92,231,.38);

  /* ─────────── 10. GRADIENTS ─────────── */
  --ns-grad-btn:  linear-gradient(135deg, #6C5CE7, #3B2CA8);
  --ns-grad-text: linear-gradient(102deg, #6C5CE7 0%, #4338CA 45%, #E91E63 115%);
  --ns-grad-dark: linear-gradient(155deg, #3B2CA8, #100829 62%);
  --ns-grad-card: linear-gradient(150deg, #F4F0FF, #FFFFFF 70%);

  /* ─────────── 11. MOTION ─────────── */
  --ns-ease:      cubic-bezier(.2,.8,.3,1);
  --ns-ease-out:  cubic-bezier(.16,1,.3,1);
  --ns-t-fast:    .2s;
  --ns-t:         .3s;
  --ns-t-slow:    .6s;

  /* ─────────── 12. Z-INDEX SCALE ─────────── */
  --ns-z-base:   1;
  --ns-z-raised: 10;
  --ns-z-sticky: 40;
  --ns-z-nav:    100;
  --ns-z-modal:  1000;
}


/* ══════════════════════════════════════════════════════════════
   ELEMENTOR GLOBAL BRIDGE
   Elementor generates its own variables for the 4 system colors.
   These IDs are stable across installs, so overriding them here
   keeps Elementor's picker and this token file in sync.
   ══════════════════════════════════════════════════════════════ */
:root {
  --e-global-color-primary:   #6C5CE7;  /* violet 600 */
  --e-global-color-secondary: #2A1B6B;  /* violet 900 */
  --e-global-color-text:      #4A4468;  /* body text  */
  --e-global-color-accent:    #E91E63;  /* pink       */
}


/* ══════════════════════════════════════════════════════════════
   OPTIONAL UTILITY LAYER
   Add these class names in Elementor → Advanced → CSS Classes
   ══════════════════════════════════════════════════════════════ */

/* Dark section — apply to a Container */
.ns-dark {
  background: var(--ns-ink);
  color: var(--ns-tx-inv);
}
.ns-dark h1, .ns-dark h2, .ns-dark h3, .ns-dark h4 { color: var(--ns-tx-inv); }
.ns-dark p { color: var(--ns-tx-inv-2); }

/* Gradient headline text */
.ns-grad-tx {
  background: var(--ns-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Mono eyebrow label */
.ns-eyebrow {
  font-family: var(--ns-font-mono);
  font-size: var(--ns-fs-eyebrow);
  letter-spacing: var(--ns-ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--ns-fw-med);
  color: var(--ns-v-600);
}
.ns-eyebrow.is-pink { color: var(--ns-pink); }
.ns-eyebrow.on-dark { color: var(--ns-v-300); }

/* Card hover lift */
.ns-card {
  background: var(--ns-paper);
  border: 1px solid var(--ns-line);
  border-radius: var(--ns-r-lg);
  box-shadow: var(--ns-sh-1);
  transition: transform var(--ns-t-slow) var(--ns-ease),
              box-shadow var(--ns-t-slow) var(--ns-ease),
              border-color var(--ns-t-slow) var(--ns-ease);
}
.ns-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ns-sh-2);
  border-color: var(--ns-v-300);
}

/* Grain overlay — apply to a Container, needs position:relative */
.ns-grain { position: relative; }
.ns-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--ns-z-base);
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Accessibility — respect reduced motion site-wide */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   GLOBAL COLORS TO REGISTER MANUALLY
   Elementor → Site Settings → Global Colors → Add Color

   System (already bridged above):
     Primary    #6C5CE7   Violet 600
     Secondary  #2A1B6B   Violet 900
     Text       #4A4468   Body Text
     Accent     #E91E63   Pink

   Custom (add these 8):
     Ink            #100829
     Ink Soft       #1A0F3D
     Violet Light   #B9AEFF
     Lavender       #F4F0FF
     Surface        #F9F7FE
     Line           #E7E1F7
     Text Muted     #807A9B
     Success        #10B981

   GLOBAL FONTS TO REGISTER
   Elementor → Site Settings → Global Fonts
     Primary (headings)  Bricolage Grotesque   700
     Secondary (body)    Plus Jakarta Sans     400
     Text (UI/labels)    Plus Jakarta Sans     500
     Accent (mono)       JetBrains Mono        500
   ══════════════════════════════════════════════════════════════ */