/* ============================================================
   NoCoded Design System — Tokens
   Dark-first. Purple + cream on near-black.
   ============================================================ */

/* ---------- Webfonts (Google Fonts) ----------
   Substitutions flagged in README: no .ttf files were provided.
   Outfit / Playfair Display / DM Sans / JetBrains Mono are pulled
   from Google Fonts as the closest match to the brand spec.
*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand colour palette (hex source-of-truth) ---------- */
  --nc-purple:           #8B5CF6;   /* primary CTA, highlights, glows */
  --nc-purple-hover:     #A78BFA;   /* hover */
  --nc-purple-deep:      #6D40E0;   /* pressed / deep accents */

  --nc-bg:               #0A0A14;   /* app background, deep violet-black */
  --nc-bg-elev:          #10101A;   /* slight lift over bg */
  --nc-surface:          #15151D;   /* cards, popovers */
  --nc-surface-2:        #1C1C26;   /* nested surfaces, hover bg */
  --nc-border:           #2A2A38;   /* default border */
  --nc-border-strong:    #3A3A4A;   /* heavier dividers */

  --nc-cream:            #F5EBD6;   /* primary fg, logotype */
  --nc-cream-muted:      #D9CEB3;   /* secondary fg */
  --nc-muted:            #7E7E8F;   /* tertiary fg, captions */
  --nc-muted-2:          #4F4F5E;   /* disabled */

  --nc-success:          #5EEAD4;
  --nc-warning:          #F5B847;
  --nc-destructive:      #E53E3E;
  --nc-destructive-soft: #2A1414;

  /* ---------- Semantic colour aliases ---------- */
  --bg:               var(--nc-bg);
  --bg-elev:          var(--nc-bg-elev);
  --surface:          var(--nc-surface);
  --surface-2:        var(--nc-surface-2);
  --border:           var(--nc-border);
  --border-strong:    var(--nc-border-strong);

  --fg-1:             var(--nc-cream);          /* primary text */
  --fg-2:             var(--nc-cream-muted);    /* secondary text */
  --fg-3:             var(--nc-muted);          /* tertiary text */
  --fg-disabled:      var(--nc-muted-2);

  --accent:           var(--nc-purple);
  --accent-hover:     var(--nc-purple-hover);
  --accent-deep:      var(--nc-purple-deep);
  --accent-fg:        #FFFFFF;
  --ring:             color-mix(in srgb, var(--nc-purple) 60%, transparent);

  /* ---------- Type families ---------- */
  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:    'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale ---------- */
  --fs-display:   clamp(3.25rem, 6vw, 5.5rem);   /* 52-88px */
  --fs-h1:        clamp(2.5rem, 4.5vw, 4rem);    /* 40-64px */
  --fs-h2:        clamp(2rem, 3.5vw, 3rem);      /* 32-48px */
  --fs-h3:        clamp(1.5rem, 2.5vw, 2rem);    /* 24-32px */
  --fs-h4:        1.375rem;   /* 22px */
  --fs-h5:        1.125rem;   /* 18px */
  --fs-lead:      1.25rem;    /* 20px lead paragraphs */
  --fs-body:      1rem;       /* 16px */
  --fs-small:     0.875rem;   /* 14px */
  --fs-xs:        0.75rem;    /* 12px eyebrows / meta */

  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.5;
  --lh-relaxed:   1.65;

  --tracking-tightest:  -0.03em;
  --tracking-tight:     -0.02em;
  --tracking-normal:     0em;
  --tracking-wide:       0.02em;
  --tracking-eyebrow:    0.22em;

  /* ---------- Spacing scale (4px base) ---------- */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /*128 */

  /* ---------- Radii ---------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius:     12px;     /* default 0.75rem */
  --radius-md:  16px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-2xl: 36px;
  --radius-full: 999px;

  /* ---------- Shadows & glows (purple-tinted) ---------- */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.4);
  --shadow:       0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:    0 12px 40px rgba(0,0,0,0.55);

  --glow-sm:      0 0 20px rgba(139,92,246,0.20);
  --glow:         0 0 40px rgba(139,92,246,0.30), 0 0 80px rgba(139,92,246,0.10);
  --glow-lg:      0 0 60px rgba(139,92,246,0.40), 0 0 120px rgba(139,92,246,0.20), 0 0 200px rgba(139,92,246,0.10);
  --glow-cream:   0 0 40px rgba(245,235,214,0.18);

  --inner-glow:   inset 0 1px 0 rgba(255,255,255,0.04);

  /* ---------- Motion ---------- */
  --ease-spring:  cubic-bezier(0.2, 0, 0, 1);     /* Apple-style spring */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     150ms;
  --dur-base:     250ms;
  --dur-slow:     400ms;
  --dur-slower:   700ms;

  /* ---------- Layout ---------- */
  --container:        1280px;
  --container-narrow: 820px;
  --container-wide:   1440px;
  --gutter:           clamp(1rem, 4vw, 2rem);
}

/* ============================================================
   Base element styles — semantic, ready to use straight off
   ============================================================ */

html {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg);
  color: var(--fg-1);
  margin: 0;
}

/* Headings — Outfit for display, Playfair for h2-h6 */

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-5);
}

.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tightest);
  color: var(--fg-1);
}

h2, .h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-5);
}

h3, .h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}

h4, .h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

h5, .h5 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h5);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

p {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0 0 var(--space-4);
  max-width: 70ch;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

small, .small {
  font-size: var(--fs-small);
  color: var(--fg-2);
}

.caption {
  font-size: var(--fs-xs);
  color: var(--fg-3);
  letter-spacing: var(--tracking-wide);
}

/* Emphasis: serif italic per voice spec */
em, .emph {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--fg-1);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-spring);
}
a:hover { color: var(--accent-hover); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0.1em 0.4em;
  color: var(--fg-1);
}

pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  overflow: auto;
}

hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: var(--space-6) 0;
}

::selection { background: rgba(139,92,246,0.35); color: var(--fg-1); }

/* ---------- Utility helpers ---------- */
.text-gradient-purple-cream {
  background: linear-gradient(95deg, var(--nc-purple) 0%, var(--nc-cream) 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.surface       { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.surface-glass { background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border); border-radius: var(--radius); }

.glow         { box-shadow: var(--glow); }
.glow-sm      { box-shadow: var(--glow-sm); }
.glow-lg      { box-shadow: var(--glow-lg); }

/* Grid background pattern (3% opacity, 60px) */
.grid-bg {
  background-image:
    linear-gradient(rgba(139,92,246,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Subtle grain overlay */
.grain {
  position: relative;
}
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ambient glow orb helper */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  background: radial-gradient(circle, rgba(139,92,246,0.55) 0%, rgba(139,92,246,0.18) 40%, transparent 70%);
}