/* =========================================================================
   Capstone Design System — Colors & Type
   Modernized direction: confident, restrained, quietly impulsive.
   Built on the original mountain logo's slate + signal-blue palette.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');

/* Instrument Serif — display, local files. Latin + latin-ext (Hungarian: ő, ű, etc) */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-latin-400-normal.woff2') format('woff2'),
       url('fonts/instrument-serif-latin-400-normal.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-latin-400-italic.woff2') format('woff2'),
       url('fonts/instrument-serif-latin-400-italic.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-latin-ext-400-normal.woff2') format('woff2'),
       url('fonts/instrument-serif-latin-ext-400-normal.woff') format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-latin-ext-400-italic.woff2') format('woff2'),
       url('fonts/instrument-serif-latin-ext-400-italic.woff') format('woff');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist Mono — mono, variable weight, local file */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/GeistMono-VariableFont_wght.ttf') format('truetype-variations');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/GeistMono-Italic-VariableFont_wght.ttf') format('truetype-variations');
}

:root {
  /* ---------- Brand color tokens ---------------------------------------- */
  /* Primary — "Capstone Blue" derived from the logo's accent peak (#1462A6)
     Modernized to a cleaner cobalt with stronger chroma at mid-tones.       */
  --c-blue-50:  #EEF4FB;
  --c-blue-100: #D6E4F4;
  --c-blue-200: #A9C5E7;
  --c-blue-300: #6FA1D6;
  --c-blue-400: #3A7DC2;
  --c-blue-500: #1462A6;   /* primary brand */
  --c-blue-600: #0E4F8A;
  --c-blue-700: #0A3D6B;
  --c-blue-800: #082C4E;
  --c-blue-900: #061E37;

  /* Slate — neutral scale, warm-cool balanced. Replaces the old flat grays. */
  --c-slate-50:  #F6F7F9;
  --c-slate-100: #ECEEF2;
  --c-slate-200: #D9DDE4;
  --c-slate-300: #B6BDC9;
  --c-slate-400: #8590A1;
  --c-slate-500: #5C6776;
  --c-slate-600: #3F4856;
  --c-slate-700: #2A323D;
  --c-slate-800: #1F2A37;   /* primary dark */
  --c-slate-900: #0F1419;

  /* Accent — a quiet, modern teal for the "impulsive" highlight.
     Used sparingly: data viz, focus states, single hero accents.            */
  --c-teal-300: #5CD4C0;
  --c-teal-500: #14A88E;
  --c-teal-700: #0B6B5A;

  /* Sand — warm paper neutral for backgrounds, letterheads, surfaces.
     Brings warmth to balance the cool primary.                              */
  --c-sand-50:  #FBF9F5;
  --c-sand-100: #F5F1E9;
  --c-sand-200: #EAE3D3;

  /* Functional */
  --c-success: #14A88E;
  --c-warning: #B07A4A;
  --c-danger:  #B23A3A;
  --c-info:    #1462A6;

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

  /* ---------- Semantic surface / text tokens ---------------------------- */
  --bg-canvas:    var(--c-sand-50);     /* default page (warm paper)        */
  --bg-surface:   var(--c-white);       /* cards, panels                    */
  --bg-subtle:    var(--c-slate-50);    /* alt-row backgrounds              */
  --bg-inverse:   var(--c-slate-900);   /* dark hero panels                 */
  --bg-brand:     var(--c-blue-500);    /* CTA backgrounds                  */

  --fg-strong:    var(--c-slate-900);   /* headlines                        */
  --fg-default:   var(--c-slate-800);   /* body                             */
  --fg-muted:     var(--c-slate-500);   /* secondary text, labels           */
  --fg-subtle:    var(--c-slate-400);   /* tertiary, metadata               */
  --fg-on-brand:  var(--c-white);
  --fg-on-dark:   var(--c-sand-50);
  --fg-link:      var(--c-blue-600);
  --fg-accent:    var(--c-blue-500);

  --border-subtle: var(--c-slate-200);
  --border-default: var(--c-slate-300);
  --border-strong: var(--c-slate-700);

  /* ---------- Typography ------------------------------------------------- */
  /* Display: Instrument Serif — modern editorial serif with subtle warmth.
     Substitution: original kisarculat used a generic sans; we're modernizing
     by introducing an editorial serif for headlines. FLAG to user.          */
  --font-display: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-sans:    'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — modular 1.250 (major third) anchored at 16px              */
  --t-xs:   12px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-md:   18px;
  --t-lg:   20px;
  --t-xl:   24px;
  --t-2xl:  32px;
  --t-3xl:  44px;
  --t-4xl:  60px;
  --t-5xl:  84px;
  --t-6xl:  120px;

  --lh-tight:   1.05;
  --lh-snug:    1.20;
  --lh-normal:  1.45;
  --lh-relaxed: 1.65;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.12em;

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

  /* ---------- Radii ------------------------------------------------------ */
  --r-none: 0;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 9999px;

  /* ---------- Shadows — soft, paper-like, never plastic ------------------ */
  --shadow-xs: 0 1px 2px rgba(15,20,25,0.05);
  --shadow-sm: 0 2px 6px rgba(15,20,25,0.06), 0 1px 2px rgba(15,20,25,0.04);
  --shadow-md: 0 8px 24px -8px rgba(15,20,25,0.10), 0 2px 6px rgba(15,20,25,0.05);
  --shadow-lg: 0 24px 48px -16px rgba(15,20,25,0.18), 0 4px 12px rgba(15,20,25,0.06);
  --shadow-xl: 0 40px 80px -24px rgba(15,20,25,0.24);
  --shadow-inner: inset 0 1px 2px rgba(15,20,25,0.06);
  --ring-focus: 0 0 0 3px rgba(20,98,166,0.30);

  /* ---------- Motion ----------------------------------------------------- */
  --ease-out:    cubic-bezier(0.20, 0.80, 0.20, 1.00);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.35, 1.00);
  --ease-in:     cubic-bezier(0.55, 0.08, 0.85, 0.40);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
  --dur-deliberate: 800ms;
}

/* =========================================================================
   Element-level semantic styles
   ========================================================================= */
html, body {
  background: var(--bg-canvas);
  color: var(--fg-default);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--fg-strong);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
h1 { font-size: var(--t-5xl); }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-2xl); letter-spacing: var(--tracking-tight); }
h4 { font-size: var(--t-xl);  letter-spacing: var(--tracking-tight); font-family: var(--font-sans); font-weight: 600; }

p {
  font-size: var(--t-base);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
  max-width: 64ch;
}

small, .caption {
  font-size: var(--t-sm);
  color: var(--fg-muted);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--c-blue-700); }

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