/* ==========================================================================
   Nico Rupprecht — Design Tokens
   Sourced from nicorupprechtai/nicorupprecht.ai (tailwind.config.js + index.css)
   ========================================================================== */

/* -- Local webfonts via @fontsource files --------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('fonts/inter-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('fonts/inter-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url('fonts/inter-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/space-grotesk-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
}

:root {
  /* -- Core palette -------------------------------------------------------- */
  --nr-bg:           #111520;   /* Tight dark navy — page background */
  --nr-bg-deep:     #080A0F;   /* Off-black — outer frame / footer depth */
  --nr-bg-elev:     #1A2030;   /* Raised surface / muted */
  --nr-bg-wiki:     #0F172A;   /* Company Wiki hero section */

  --nr-gold:        #CFB273;   /* Signature gold — primary accent */
  --nr-gold-hi:     #E4C987;   /* Lighter gold for high emphasis */
  --nr-gold-lo:     rgba(207, 178, 115, 0.5);

  --nr-blue:        #273045;   /* Muted navy — secondary accent / borders */
  --nr-blue-soft:   rgba(39, 48, 69, 0.5);

  --nr-violet:      #6D28D9;   /* illur.ai */
  --nr-violet-lite: #A855F7;
  --nr-violet-soft: #A78BFA;   /* Company Wiki accent */

  /* -- Project brand accents --------------------------------------------- */
  --brand-companywiki: #6F55FF;
  --brand-companywiki-hi: #A99CFF;
  --brand-nextrise:    #268BD2;
  --brand-nextrise-hi: #69B8EE;
  --brand-illur:       #7C3FF2;
  --brand-illur-hi:    #A78BFF;

  /* -- Text ---------------------------------------------------------------- */
  --nr-fg:          #E8E6DE;   /* Body copy on dark */
  --nr-fg-hi:       #FFF8E8;   /* Headlines */
  --nr-fg-mid:      rgba(232, 230, 222, 0.78);
  --nr-fg-low:      rgba(232, 230, 222, 0.58);
  --nr-fg-faint:    rgba(255, 255, 255, 0.1);

  /* -- Semantic aliases (for cross-project handoff) ----------------------- */
  --fg1: var(--nr-fg-hi);
  --fg2: var(--nr-fg);
  --fg3: var(--nr-fg-mid);
  --fg4: var(--nr-fg-low);
  --bg1: var(--nr-bg);
  --bg2: var(--nr-bg-elev);
  --bg3: var(--nr-bg-deep);
  --accent:   var(--nr-gold);
  --accent-2: var(--nr-blue);

  /* -- Typography --------------------------------------------------------- */
  /* Two webfonts are loaded in production via @fontsource:
       - Inter         (300, 400, 500, 600, 700) → body / UI
       - Space Grotesk (400, 500, 600, 700)      → headings (h1–h6)
     Mono is a system stack. Serif is intentionally NOT configured in the
     production tailwind.config — three components (Projects.tsx,
     Journey.tsx, Thoughts.tsx) use the `font-serif` utility, which
     therefore falls back to Tailwind's default `ui-serif, Georgia, …`.
     We mirror that fallback here so designs match what the live site
     actually renders. */
  --font-display: 'Space Grotesk', system-ui, sans-serif; /* H1–H6 */
  --font-body:    'Inter',         system-ui, sans-serif; /* paragraphs, UI */
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace; /* terminal feel */
  --font-serif:   ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; /* tailwind default */

  /* Base type scale (taken from live site — mostly big display headlines) */
  --fs-display-xl: clamp(4rem, 12vw, 10rem);   /* "THE WORK", "MY GEMS" */
  --fs-display-lg: clamp(3rem, 8vw, 7rem);     /* section titles */
  --fs-display-md: clamp(2.5rem, 5vw, 4rem);   /* large narrative */
  --fs-h1:         clamp(2.25rem, 4vw, 3rem);
  --fs-h2:         clamp(1.75rem, 3vw, 2.25rem);
  --fs-h3:         1.5rem;   /* 24px */
  --fs-body-lg:    1.25rem;  /* 20px */
  --fs-body:       1rem;     /* 16px */
  --fs-small:      0.875rem; /* 14px */
  --fs-caption:    0.75rem;  /* 12px — uppercase tracking labels */

  --lh-tight:  0.9;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.1em;
  --tracking-widest:   0.2em;   /* section badges, uppercase labels */

  /* -- Radii -------------------------------------------------------------- */
  --radius-xs: 4px;   /* chip / pill inner */
  --radius-sm: 6px;
  --radius-md: 8px;   /* default — var(--radius) in base repo */
  --radius-lg: 16px;  /* cards */
  --radius-xl: 24px;  /* bento cards — rounded-3xl */
  --radius-2xl: 32px; /* terminal window */
  --radius-full: 9999px;

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

  /* -- Shadows / glows ---------------------------------------------------- */
  --shadow-card:      0 18px 44px -18px rgba(0, 0, 0, 0.62);
  --shadow-soft:      0 10px 28px rgba(207, 178, 115, 0.08);
  --glow-gold:        0 0 34px rgba(207, 178, 115, 0.16);
  --glow-gold-strong: 0 0 42px rgba(207, 178, 115, 0.24);
  --glow-blue:        0 0 18px rgba(39, 48, 69, 0.42);
  --glow-violet:      0 0 22px rgba(109, 40, 217, 0.18);

  /* -- Borders ------------------------------------------------------------ */
  --border-faint:  1px solid rgba(255, 255, 255, 0.05);
  --border-soft:   1px solid rgba(255, 255, 255, 0.1);
  --border-gold:   1px solid rgba(207, 178, 115, 0.3);
  --border-gold-strong: 2px solid rgba(207, 178, 115, 0.6);

  /* -- Motion ------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-apple:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    200ms;
  --dur-base:    300ms;
  --dur-slow:    500ms;
  --dur-cinema:  700ms;

  /* -- Tech grid / patterns ---------------------------------------------- */
  --pattern-tech-grid:
    linear-gradient(rgba(207, 178, 115, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(207, 178, 115, 0.035) 1px, transparent 1px);
  --pattern-tech-grid-size: 28px 28px;
}

/* ==========================================================================
   Semantic element rules — use these when adapting into production CSS
   ========================================================================== */

body {
  background: var(--nr-bg);
  color: var(--nr-fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--nr-fg-hi);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: 0;
  font-weight: 700;
}

h1 { font-size: var(--fs-display-lg); letter-spacing: var(--tracking-tightest); }
h2 { font-size: var(--fs-h1); }
h3 { font-size: var(--fs-h2); }
h4 { font-size: var(--fs-h3); }

p  { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--nr-fg); font-weight: 300; }

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

/* Caption / eyebrow — widely used in the site (uppercase + tracking + gold) */
.eyebrow {
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--nr-gold);
  font-weight: 700;
  font-family: var(--font-mono);
}

/* Gradient title — used on section headers */
.title-gradient {
  color: var(--nr-fg-hi);
}

/* Primary CTA — matches .cta-button in repo */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--fs-body-lg);
  background: var(--nr-gold);
  color: #12110d;
  box-shadow: 0 18px 36px rgba(207, 178, 115, 0.18);
  transition: all var(--dur-base) var(--ease-out);
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.btn-primary:hover {
  background: #fff;
  box-shadow: 0 22px 44px rgba(207, 178, 115, 0.24);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--nr-gold);
  border: var(--border-gold);
  font-weight: 500;
  transition: all var(--dur-base) var(--ease-out);
  text-decoration: none;
}
.btn-secondary:hover {
  background: rgba(207, 178, 115, 0.1);
  transform: translateY(-2px) scale(1.02);
}