/* =====================================================================
   Blueprint Design System — Colors & Typography
   Source of truth: Blueprint Brand Guidelines v2.0 (Mar 2026)
   Designed by EMME & CO
   ===================================================================== */

/* ---------- FONTS ---------- */
@font-face {
  font-family: "Saans";
  src: url("../fonts/Saans-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Saans SemiMono";
  src: url("../fonts/SaansSemiMono-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Telegraf";
  src: url("../fonts/PPTelegraf-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =============== CORE PALETTE =============== */
  --bp-primary-1: #1B1B1B;
  --bp-primary-2: #383838;
  --bp-primary-3: #6B6B6B;
  --bp-primary-4: #808080;
  --bp-primary-5: #B8B8B8;
  --bp-primary-6: #DBDBDB;
  --bp-primary-7: #EDEDED;
  --bp-primary-8: #F7F5F2;

  --bp-accent-1: #C496FF;
  --bp-accent-2: #8942E4;
  --bp-accent-3: #E2FFDB;
  --bp-accent-4: #A1D8C0;

  --bp-surface-charcoal: #1F1F1F;
  --bp-surface-card: #1B1B1B;
  --bp-surface-elevated: #242424;
  --bp-surface-light: #F7F5F2;
  --bp-stroke: #454543;
  --bp-stroke-subtle: #666663;

  /* =============== SEMANTIC — DARK MODE (default) =============== */
  --bg:            var(--bp-surface-charcoal);
  --bg-card:       var(--bp-surface-card);
  --bg-elevated:   var(--bp-surface-elevated);

  --fg:            var(--bp-primary-8);
  --fg-muted:      #929292;
  --fg-subtle:     var(--bp-primary-3);
  --fg-inverse:    var(--bp-primary-1);

  --accent:        var(--bp-accent-1);
  --accent-strong: var(--bp-accent-2);
  --accent-soft:   var(--bp-accent-3);
  --accent-sage:   var(--bp-accent-4);

  --border:        var(--bp-stroke);
  --border-subtle: rgba(247,245,242,0.08);

  --glass-dark:    rgba(36,36,36,0.6);
  --glass-light:   rgba(247,245,242,1);

  /* =============== TYPOGRAPHY =============== */
  --font-display:  "Saans", "PP Telegraf", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body:     "Saans", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:     "Saans SemiMono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    20px;
  --fs-lg:    24px;
  --fs-xl:    32px;
  --fs-2xl:   40px;
  --fs-3xl:   64px;
  --fs-4xl:   90px;
  --fs-5xl:   120px;

  --lh-tight:   1.0;
  --lh-snug:    1.1;
  --lh-normal:  1.2;
  --lh-relaxed: 1.5;

  --tr-tight:  -0.01em;
  --tr-normal:  0;
  --tr-wide:    0.01em;
  --tr-mono:    0.02em;

  /* =============== SPACING =============== */
  --sp-0:  0;
  --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;

  --layout-margin-min: 4%;
  --layout-margin-max: 5%;

  /* =============== RADII =============== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-pill: 999px;

  /* =============== SHADOW / ELEVATION =============== */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 24px 80px rgba(0,0,0,0.45);
  --backdrop-blur: blur(10px);
  --backdrop-blur-lg: blur(40px);

  /* =============== MOTION =============== */
  --ease-brand: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}