/* =======================================================================
   Nedbase Design System — Colors & Type
   Warm, confident, digital-agency brand. Coral + Ink + Beige.
   ======================================================================= */

/* ---------- Webfonts ---------- */
/* Hanken Grotesk — body / UI type. Clean, humanist grotesque. */
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:100; src:url("../fonts/HankenGrotesk-100.ttf") format('truetype'); font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:200; src:url("../fonts/HankenGrotesk-200.ttf") format('truetype'); font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:300; src:url("../fonts/HankenGrotesk-300.ttf") format('truetype'); font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; src:url("../fonts/HankenGrotesk-400.ttf") format('truetype'); font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; font-style:italic; font-weight:400; src:url("../fonts/HankenGrotesk-400-Italic.ttf") format('truetype'); font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:500; src:url("../fonts/HankenGrotesk-500.ttf") format('truetype'); font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:600; src:url("../fonts/HankenGrotesk-600.ttf") format('truetype'); font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:700; src:url("../fonts/HankenGrotesk-700.ttf") format('truetype'); font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; font-style:italic; font-weight:700; src:url("../fonts/HankenGrotesk-700-Italic.ttf") format('truetype'); font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:800; src:url("../fonts/HankenGrotesk-800.ttf") format('truetype'); font-display:swap; }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:900; src:url("../fonts/HankenGrotesk-900.ttf") format('truetype'); font-display:swap; }

/* Unytour — display / editorial type. Geometric, wide proportions, heavy italics. */
@font-face { font-family:'Unytour'; font-style:normal; font-weight:400; src:url("../fonts/Unytour-400.otf") format('opentype'); font-display:swap; }
@font-face { font-family:'Unytour'; font-style:italic; font-weight:400; src:url("../fonts/Unytour-400-Italic.otf") format('opentype'); font-display:swap; }
@font-face { font-family:'Unytour'; font-style:normal; font-weight:500; src:url("../fonts/Unytour-500.otf") format('opentype'); font-display:swap; }
@font-face { font-family:'Unytour'; font-style:normal; font-weight:600; src:url("../fonts/Unytour-600.otf") format('opentype'); font-display:swap; }
@font-face { font-family:'Unytour'; font-style:normal; font-weight:700; src:url("../fonts/Unytour-700.otf") format('opentype'); font-display:swap; }
@font-face { font-family:'Unytour'; font-style:italic; font-weight:700; src:url("../fonts/Unytour-700-Italic.otf") format('opentype'); font-display:swap; }
@font-face { font-family:'Unytour'; font-style:normal; font-weight:800; src:url("../fonts/Unytour-800.otf") format('opentype'); font-display:swap; }
@font-face { font-family:'Unytour'; font-style:normal; font-weight:900; src:url("../fonts/Unytour-900.otf") format('opentype'); font-display:swap; }
@font-face { font-family:'Unytour'; font-style:italic; font-weight:900; src:url("../fonts/Unytour-900-Italic.otf") format('opentype'); font-display:swap; }

:root {
  /* ---------- Brand palette (sampled from Nedbase logo) ---------- */
  --nb-coral:       #E47463;   /* the "." — primary accent */
  --nb-coral-600:   #C95A4A;   /* hover / darker coral */
  --nb-coral-200:   #F3B8AE;   /* soft coral for surfaces */
  --nb-coral-50:    #FBE6E1;   /* lightest coral tint */

  --nb-ink:         #2F322F;   /* body text / logo wordmark */
  --nb-ink-800:     #1A1C1A;   /* true near-black */
  --nb-ink-600:     #4A4E4A;   /* muted ink */
  --nb-ink-400:     #7A7D79;   /* secondary text */
  --nb-ink-200:     #B7B9B5;   /* lines, disabled */

  --nb-beige:       #F0EAE4;   /* the rounded emblem surface — warm canvas */
  --nb-beige-200:   #E6DFD6;   /* subtle raise */
  --nb-beige-50:    #F7F3EE;   /* softest surface */

  --nb-white:       #FFFFFF;
  --nb-black:       #000000;

  /* Supporting warm neutrals */
  --nb-sand:        #D9CFC2;
  --nb-cream:       #FAF6F1;

  /* ---------- Semantic colors ---------- */
  --fg-1: var(--nb-ink);
  --fg-2: var(--nb-ink-600);
  --fg-3: var(--nb-ink-400);
  --fg-on-dark: var(--nb-beige);
  --fg-on-coral: var(--nb-ink);
  --fg-accent: var(--nb-coral);

  --bg-1: var(--nb-beige);
  --bg-2: var(--nb-cream);
  --bg-3: var(--nb-white);
  --bg-dark: var(--nb-ink);
  --bg-accent: var(--nb-coral);

  --border-1: rgba(47,50,47,0.12);
  --border-2: rgba(47,50,47,0.06);
  --border-strong: var(--nb-ink);

  /* ---------- Type scale ---------- */
  --font-display: 'Unytour', 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-56: 56px;
  --fs-72: 72px;
  --fs-96: 96px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.55;
  --lh-loose: 1.75;

  --tr-tighter: -0.04em;
  --tr-tight:   -0.02em;
  --tr-normal:  -0.005em;
  --tr-wide:    0.04em;
  --tr-widest:  0.16em;

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

  /* ---------- Radii — generous, warm, rounded ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-pill: 999px;
  --r-blob: 32% 32% 32% 32% / 32% 32% 32% 32%;

  /* ---------- Shadows — soft & warm ---------- */
  --shadow-1: 0 1px 2px rgba(47,50,47,0.06), 0 1px 1px rgba(47,50,47,0.04);
  --shadow-2: 0 4px 14px rgba(47,50,47,0.08), 0 2px 4px rgba(47,50,47,0.04);
  --shadow-3: 0 14px 40px rgba(47,50,47,0.12), 0 4px 10px rgba(47,50,47,0.06);
  --shadow-coral: 0 14px 40px rgba(228,116,99,0.25);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(47,50,47,0.06);

  /* ---------- Motion ---------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0.05, 0.2, 1);
}

/* ---------- Base semantic styles ---------- */
* { box-sizing: border-box; }

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { margin: 0; }

a {
  color: var(--fg-1);
  text-decoration-color: var(--fg-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-accent); }