/* ==========================================================================
   Leadtime Design System — Colors & Type
   ==========================================================================
   Sources:
   - Leadtime Standard Pitch.fig (METADATA.md, Page-1/Frame*)
   - Brand assets: assets/lt-logo.svg, assets/lt-icon.svg
   - leadtime.de website (German marketing copy)
   ========================================================================== */

/* ---------- Fonts ------------------------------------------------------- */

@font-face {
  font-family: "Degular Display";
  src: url("./fonts/DegularDisplay-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Degular Display";
  src: url("./fonts/DegularDisplay-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  /* No Medium (500) file shipped — Bold approximates the Display Medium 42px usage */
  font-family: "Degular Display";
  src: url("./fonts/DegularDisplay-Bold.otf") format("opentype");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Degular Text";
  src: url("./fonts/DegularText-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter Display";
  src: url("./fonts/InterDisplay-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Inter Display Bold was promised but not delivered — falls back to Inter weight 700 */

@font-face {
  font-family: "Roboto Mono";
  src: url("./fonts/RobotoMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("./fonts/RobotoMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ------------------------------------------------------- */

:root {
  /* === Brand colors ==================================================== */
  /* Primary — "Leadtime Orange". The donut logo, brand callouts, primary CTA accent */
  --lt-orange-600: rgb(244, 73, 0);   /* Brand primary, fill */
  --lt-orange-500: rgb(245, 74, 0);   /* Variant used in app sidebar logo overrides */
  --lt-orange-300: rgb(255, 185, 0);  /* Tertiary warm accent — borders/strokes */
  --lt-peach-200:  rgb(255, 193, 166);/* Logo accent (light wedge), softer brand tints */
  --lt-peach-100:  rgb(252, 210, 191);/* Donut wedge in title slide, peach surfaces */

  /* Secondary brand — deep teal + ink-blue. Used as paired tones with orange. */
  --lt-teal-700:  #0D4F54;             /* Deep teal — secondary brand surface */
  --lt-navy-800:  #191559;             /* Ink-navy — secondary brand surface */

  /* === Neutral / canvas ================================================ */
  --lt-ink:          rgb(25, 24, 25);   /* Primary ink — body & headlines on light */
  --lt-black:        rgb(0, 0, 0);      /* True black — display headlines */
  --lt-white:        rgb(255, 255, 255);/* Surfaces, sidebar, app cards */
  --lt-canvas:       rgb(241, 241, 241);/* Soft grey canvas — slide backgrounds */
  --lt-canvas-soft:  rgb(245, 245, 245);/* Hover row, lighter wash */
  --lt-canvas-cool:  rgb(249, 250, 251);/* App background tint */

  /* Greys — text scale (Untitled UI / Tailwind Slate-ish) ================ */
  --lt-grey-900: rgb(16, 24, 40);   /* Display heading on app */
  --lt-grey-700: rgb(52, 64, 84);   /* Active nav text */
  --lt-grey-600: rgb(71, 84, 103);  /* Strong body */
  --lt-grey-500: rgb(102, 112, 133);/* Secondary nav text */
  --lt-grey-400: rgb(140, 140, 140);/* Disabled / muted */
  --lt-grey-300: rgb(186, 186, 186);/* Hairline strokes (slim) */
  --lt-grey-250: rgb(207, 207, 207);/* Disabled "?" labels in slides */
  --lt-grey-200: rgb(212, 212, 212);
  --lt-grey-150: rgb(226, 222, 222);/* Dust */
  --lt-grey-100: rgb(234, 236, 240);/* Border / hairline */
  --lt-grey-75:  rgb(208, 213, 221);/* Strokes — input borders */

  /* Semantic =========================================================== */
  --lt-success-500: rgb(23, 178, 106); /* Time tracker live state, "Done" pill */
  --lt-success-100: rgb(204, 232, 194);
  --lt-warning-500: rgb(255, 185, 0);  /* Pause / pending */
  --lt-danger-500:  rgb(251, 45, 32);  /* Persona section heading, alert ink */
  --lt-info-500:    rgb(0, 161, 224);  /* External brand accent (Salesforce etc) */

  /* Foreground / background semantic aliases ========================== */
  --fg-1: var(--lt-ink);
  --fg-2: var(--lt-grey-700);
  --fg-3: var(--lt-grey-500);
  --fg-muted: var(--lt-grey-400);
  --fg-on-brand: var(--lt-white);
  --fg-on-dark: var(--lt-white);

  --bg-page:   var(--lt-white);
  --bg-canvas: var(--lt-canvas);
  --bg-card:   var(--lt-white);
  --bg-soft:   var(--lt-canvas-cool);
  --bg-brand:  var(--lt-orange-600);

  --stroke-hairline: var(--lt-grey-100);
  --stroke-input:    var(--lt-grey-75);
  --stroke-strong:   var(--lt-grey-300);

  /* === Type families ================================================== */
  --font-display: "Degular Display", "Degular", "Inter", system-ui, sans-serif;
  --font-text:    "Inter Display", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", "Inter Display", system-ui, sans-serif;
  --font-mono:    "Roboto Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;

  /* === Type scale (slide system — 1920×1080) ========================== */
  --type-h1: 400 100px/100% var(--font-display);    /* Slide H1 — Degular Regular */
  --type-h2: 400 64px/100% var(--font-display);     /* Display Regular */
  --type-h3: 500 42px/100% var(--font-display);     /* Section/category labels */
  --type-h4: 700 36px/1.32 var(--font-body);        /* Inter Bold cards */
  --type-body-lg: 400 26px/100% var(--font-text);   /* Inter Display body on slides */
  --type-body:    400 18px/1.5  var(--font-body);
  --type-body-sm: 400 14px/1.45 var(--font-body);
  --type-eyebrow: 400 17.95px/100% var(--font-mono);/* MARKET / MISSION STATEMENT */
  --type-mono-sm: 400 13px/1.4  var(--font-mono);

  /* === Spacing & radius =============================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;   /* Slide canvas, cards, image frames — VERY common */
  --radius-pill: 999px;

  /* === Shadows / elevation =========================================== */
  --elev-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
  --elev-sm: 0 1px 2px 0 rgba(16, 24, 40, 0.06), 0 1px 3px 0 rgba(16, 24, 40, 0.10);
  --elev-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --elev-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --elev-deck: 0 8px 24px rgba(0, 0, 0, 0.10);

  /* === Motion ========================================================= */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
}

/* ---------- Semantic element defaults ---------------------------------- */

html, body {
  font: var(--type-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--type-h1); color: var(--lt-black); letter-spacing: -0.01em; margin: 0; font-weight: 400; }
h2 { font: var(--type-h2); color: var(--fg-1); letter-spacing: -0.01em; margin: 0; font-weight: 400; }
h3 { font: var(--type-h3); color: var(--fg-1); margin: 0; }
h4 { font: var(--type-h4); color: var(--fg-1); letter-spacing: -0.02em; margin: 0; }
p  { font: var(--type-body); color: var(--fg-2); margin: 0 0 1em; text-wrap: pretty; }

.eyebrow {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  color: var(--fg-1);
  letter-spacing: 0;
}

.lead {
  font: var(--type-body-lg);
  color: var(--fg-1);
}

code, kbd, samp, pre {
  font: var(--type-mono-sm);
  color: var(--fg-2);
}

a { color: var(--lt-orange-600); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Helpers ---------------------------------------------------- */

.lt-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-sm);
}

.lt-canvas {
  background: var(--bg-canvas);
  border-radius: var(--radius-lg);
}