/* =========================================================
   Nubel Design System — tokens
   Import into any Nubel artifact.
   Figtree loads from Google Fonts (substitution; see README).
   ========================================================= */

/* Self-hosted Figtree (variable font, 300–900). Italic is a separate variable file. */
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/Figtree-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/Figtree-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/Figtree-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/Figtree-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
/* JetBrains Mono still via CDN — used only for code & token callouts. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Brand ---------- */
  --nubel-orange:        #0F084C;   /* signature accent — deep indigo */
  --nubel-orange-hover:  #1A116B;   /* lighter for hover */
  --nubel-orange-press:  #080432;   /* darker for press */
  --nubel-orange-soft:   #ECEAF5;   /* tinted bg for light accents / toast */
  --nubel-orange-ring:   rgba(15, 8, 76, 0.20);

  /* Button accent — keep brand orange for CTAs */
  --btn-accent:          #F35B04;
  --btn-accent-hover:    #D94E03;
  --btn-accent-press:    #B84102;

  /* ---------- Neutrals (Slate) ---------- */
  --ink:          #0A0A0A;   /* primary text */
  --ink-2:        #1C1C1C;   /* strong text / dark surface */
  --slate-700:    #4A4A4A;   /* secondary text */
  --slate-500:    #959595;   /* muted / grey logo */
  --slate-300:    #D4D4D4;   /* dividers / borders-hover */
  --slate-200:    #E8E8E8;   /* default hairline border */
  --slate-100:    #F5F5F5;   /* subtle bg / hover fill */
  --slate-50:     #FAFAFA;   /* section bg */
  --paper:        #FFFFFF;   /* primary surface */
  --paper-warm:   #FAF8F5;   /* warm off-white for soft sections */

  /* ---------- Semantic ---------- */
  --success:      #1F7A3A;
  --success-soft: #E6F2EA;
  --warning:      #C77700;
  --warning-soft: #FBF1DD;
  --error:        #C2410C;
  --error-soft:   #FDECE3;
  --info:         #0A0A0A;
  --info-soft:    #F5F5F5;

  /* ---------- Foreground tokens (use these, not raw neutrals) ---------- */
  --fg-1: var(--ink);         /* primary */
  --fg-2: var(--slate-700);   /* secondary */
  --fg-3: var(--slate-500);   /* tertiary / muted */
  --fg-on-brand: #FFFFFF;     /* text on orange */
  --fg-on-dark:  #FFFFFF;     /* text on ink */

  /* ---------- Surface tokens ---------- */
  --bg-1: var(--paper);
  --bg-2: var(--slate-50);
  --bg-3: var(--slate-100);
  --bg-warm: var(--paper-warm);
  --bg-dark: var(--ink);

  /* ---------- Borders ---------- */
  --border-1: var(--slate-200);      /* default hairline */
  --border-2: var(--slate-300);      /* hover / stronger */
  --border-focus: var(--nubel-orange);

  /* ---------- Radii ---------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 9999px;

  /* ---------- Spacing (4px grid) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10:128px;

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(10,10,10,0.04);
  --shadow-sm: 0 1px 3px rgba(10,10,10,0.06), 0 1px 2px rgba(10,10,10,0.04);
  --shadow-md: 0 4px 12px rgba(10,10,10,0.08);
  --shadow-lg: 0 12px 32px rgba(10,10,10,0.10);
  --shadow-xl: 0 24px 56px rgba(10,10,10,0.12);
  --shadow-focus: 0 0 0 3px var(--nubel-orange-ring);

  /* ---------- Type families ---------- */
  --font-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- Type scale (display is responsive via clamp) ---------- */
  --fs-display-xl: clamp(56px, 8vw, 96px);   /* hero */
  --fs-display-lg: clamp(44px, 6vw, 72px);
  --fs-display-md: clamp(36px, 5vw, 56px);
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-meta:    13px;
  --fs-micro:   12px;

  /* ---------- Motion ---------- */
  --ease-std: cubic-bezier(0.2, 0, 0, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --dur-micro: 120ms;
  --dur-std:   200ms;
  --dur-enter: 320ms;
}

/* =========================================================
   Semantic text styles — use as class OR via the element
   selectors below.
   ========================================================= */

.nb-display-xl,
.nb-display-lg,
.nb-display-md,
.nb-h1, .nb-h2, .nb-h3, .nb-h4,
.nb-body-lg, .nb-body, .nb-body-sm,
.nb-meta, .nb-micro,
.nb-code {
  font-family: var(--font-sans);
  color: var(--fg-1);
}

.nb-display-xl { font-size: var(--fs-display-xl); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; }
.nb-display-lg { font-size: var(--fs-display-lg); font-weight: 800; line-height: 1.04; letter-spacing: -0.025em; }
.nb-display-md { font-size: var(--fs-display-md); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }

.nb-h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.nb-h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.2;  letter-spacing: -0.015em; }
.nb-h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3;  letter-spacing: -0.01em; }
.nb-h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; }

.nb-body-lg { font-size: var(--fs-body-lg); font-weight: 400; line-height: 1.55; }
.nb-body    { font-size: var(--fs-body);    font-weight: 400; line-height: 1.55; }
.nb-body-sm { font-size: var(--fs-body-sm); font-weight: 400; line-height: 1.5;  }
.nb-meta    { font-size: var(--fs-meta);    font-weight: 500; line-height: 1.4; color: var(--fg-2); }
.nb-micro   { font-size: var(--fs-micro);   font-weight: 500; line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-3); }

.nb-code { font-family: var(--font-mono); font-size: 14px; background: var(--slate-100); padding: 2px 6px; border-radius: var(--r-xs); }

/* Eyebrow pill (e.g. "New" label on nubel.ca) */
.nb-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 13px;
  color: var(--fg-2); background: var(--slate-100);
  border: 1px solid var(--border-1); border-radius: var(--r-pill);
  padding: 6px 12px;
}
.nb-eyebrow .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--nubel-orange);
}

/* =========================================================
   Element defaults (optional — opt in with .nb-doc on <body>)
   ========================================================= */
.nb-doc {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.nb-doc h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.02em; }
.nb-doc h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.015em; }
.nb-doc h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; }
.nb-doc h4 { font-size: var(--fs-h4); font-weight: 600; }
.nb-doc p  { font-size: var(--fs-body); line-height: 1.55; }
.nb-doc a  { color: var(--nubel-orange); text-decoration: none; }
.nb-doc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nb-doc code { font-family: var(--font-mono); }