/* ============================================================
   TRIPI MEDIA — Design tokens (colors, type, spacing, motion)
   ============================================================ */

/* ---------- BRAND FONT · POPPINS (local) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 100; font-display: swap;
  src: url("../fonts/Poppins-Thin.woff2") format("woff2"), url("../fonts/Poppins-Thin.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 100; font-display: swap;
  src: url("../fonts/Poppins-ThinItalic.woff2") format("woff2"), url("../fonts/Poppins-ThinItalic.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 200; font-display: swap;
  src: url("../fonts/Poppins-ExtraLight.woff2") format("woff2"), url("../fonts/Poppins-ExtraLight.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 200; font-display: swap;
  src: url("../fonts/Poppins-ExtraLightItalic.woff2") format("woff2"), url("../fonts/Poppins-ExtraLightItalic.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/Poppins-Light.woff2") format("woff2"), url("../fonts/Poppins-Light.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 300; font-display: swap;
  src: url("../fonts/Poppins-LightItalic.woff2") format("woff2"), url("../fonts/Poppins-LightItalic.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/Poppins-Regular.woff2") format("woff2"), url("../fonts/Poppins-Regular.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/Poppins-Italic.woff2") format("woff2"), url("../fonts/Poppins-Italic.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/Poppins-Medium.woff2") format("woff2"), url("../fonts/Poppins-Medium.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("../fonts/Poppins-MediumItalic.woff2") format("woff2"), url("../fonts/Poppins-MediumItalic.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/Poppins-SemiBold.woff2") format("woff2"), url("../fonts/Poppins-SemiBold.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 600; font-display: swap;
  src: url("../fonts/Poppins-SemiBoldItalic.woff2") format("woff2"), url("../fonts/Poppins-SemiBoldItalic.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/Poppins-Bold.woff2") format("woff2"), url("../fonts/Poppins-Bold.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("../fonts/Poppins-BoldItalic.woff2") format("woff2"), url("../fonts/Poppins-BoldItalic.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../fonts/Poppins-ExtraBold.woff2") format("woff2"), url("../fonts/Poppins-ExtraBold.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 800; font-display: swap;
  src: url("../fonts/Poppins-ExtraBoldItalic.woff2") format("woff2"), url("../fonts/Poppins-ExtraBoldItalic.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("../fonts/Poppins-Black.woff2") format("woff2"), url("../fonts/Poppins-Black.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 900; font-display: swap;
  src: url("../fonts/Poppins-BlackItalic.woff2") format("woff2"), url("../fonts/Poppins-BlackItalic.woff") format("woff"); }

/* Mono companion — substitution via Google Fonts. Replace if a brand mono is selected. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --brand-black:   #0a0a0a;
  --brand-red:     #990000;
  --brand-paper:   #f5f5f5;

  --ink-0:   #000000;
  --ink-1:   #0a0a0a;
  --ink-2:   #1a1a1a;
  --ink-3:   #262626;
  --ink-4:   #404040;
  --ink-5:   #737373;
  --ink-6:   #a3a3a3;
  --ink-7:   #d4d4d4;
  --ink-8:   #e5e5e5;
  --ink-9:   #f5f5f5;
  --ink-10:  #ffffff;

  --red-900: #4d0000;
  --red-800: #660000;
  --red-700: #800000;
  --red-600: #990000;
  --red-500: #b30000;
  --red-400: #cc0000;
  --red-300: #e60000;
  --red-200: #ff3333;
  --red-100: #ffe5e5;

  --font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --radius-pill: 999px;

  --ease-out:  cubic-bezier(0.2, 0.7, 0.1, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  380ms;

  /* dark theme is the default for the landing */
  --bg:           var(--brand-black);
  --bg-elev:      var(--ink-2);
  --fg:           var(--brand-paper);
  --fg-muted:     var(--ink-6);
  --fg-soft:      var(--ink-5);
  --accent:       var(--brand-red);
  --accent-hover: #b30000;
  --accent-press: #800000;
  --border:       var(--ink-3);
  --border-strong: var(--ink-5);
}