/* ============================================================
   EFFEXO · Design System — Tokens  (v1.0)
   Adapted from the official EFFEXO Design System.
   Colors, typography, spacing, radii, motion. No improvisation.
   ============================================================ */

/* ---- Self-hosted fonts ---- */
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("../fonts/Outfit-ExtraBold.ttf") format("truetype");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* ---- Core palette ---- */
  --ink:        #1A1A1A;
  --ink-deep:   #0A0A0A;
  --gray:       #6E6E73;
  --line:       #E5E5EA;
  --paper:      #F5F5F7;
  --white:      #FFFFFF;

  /* ---- Indigo ramp (single accent) ---- */
  --indigo-50:  #EEEDFC;
  --indigo-100: #DDDAF8;
  --indigo-200: #BAB4F1;
  --indigo-300: #958DEC;
  --indigo-400: #6F66E7;
  --indigo-500: #4F46E5;
  --indigo-600: #3E36C9;
  --indigo-700: #2E28A0;
  --indigo-800: #1F1B73;
  --indigo:     #4F46E5;

  /* ---- Semantic ---- */
  --bg:           var(--white);
  --bg-paper:     var(--paper);
  --bg-deep:      var(--ink-deep);
  --text:         var(--ink);
  --text-muted:   var(--gray);
  --border:       var(--line);
  --accent:       var(--indigo);
  --accent-soft:  var(--indigo-50);
  --danger:       #C2362F; /* muted red for problem icons only */

  /* ---- Type families ---- */
  --font-sans: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Type scale (px / line-height) ---- */
  --fs-display: clamp(2.6rem, 6vw + 1rem, 4rem);   /* 64 / 1.02 */
  --fs-h1:      clamp(2.1rem, 4.5vw + 1rem, 3rem);  /* 48 / 1.05 */
  --fs-h2:      clamp(1.7rem, 3vw + 0.6rem, 2.25rem); /* 36 / 1.12 */
  --fs-h3:      clamp(1.4rem, 1.6vw + 0.8rem, 1.75rem); /* 28 / 1.2 */
  --fs-h4:      1.375rem;  /* 22 / 1.25 */
  --fs-body-lg: 1.125rem;  /* 18 / 1.55 */
  --fs-body:    1rem;      /* 16 / 1.6 */
  --fs-body-sm: 0.875rem;  /* 14 / 1.5 */
  --fs-caption: 0.75rem;   /* 12 / 1.4 */

  /* ---- Spacing scale · 4px base ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* ---- Radii ---- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 999px;

  /* ---- Shadows (soft, low-contrast) ---- */
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 4px 16px rgba(10, 10, 10, 0.06);
  --shadow-lg: 0 12px 40px rgba(10, 10, 10, 0.08);
  --shadow-accent: 0 10px 30px rgba(79, 70, 229, 0.22);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* ---- Layout ---- */
  --maxw: 1120px;
  --maxw-narrow: 760px;
  --nav-h: 64px;
}