/* ============================================================
   DECART · Colors & Type
   Source: decart.ai Webflow CSS (live site) + 002.fig style guide
   ============================================================ */

/* ── Fonts ────────────────────────────────────────────────── */
@font-face {
  font-family: "Monitor";
  src: url("fonts/Monitor-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Monitor";
  src: url("fonts/Monitor-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Monitor";
  src: url("fonts/Monitor-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Monitor";
  src: url("fonts/Monitor-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Monitor Condensed";
  src: url("fonts/Monitor-Condensed-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Monitor Condensed";
  src: url("fonts/Monitor-Condensed-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("fonts/Roobert-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("fonts/Roobert-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("fonts/Roobert-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("fonts/Roobert-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roobert";
  src: url("fonts/Roobert-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roobert Mono";
  src: url("fonts/RoobertMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Type families ──────────────────────────────────────── */
  --font-display:   "Monitor", "Monitor Trial", Arial, sans-serif;
  --font-condensed: "Monitor Condensed", "Monitor", Arial, sans-serif;
  --font-body:      "Roobert", Arial, sans-serif;
  --font-mono:      "Roobert Mono", "Roobertmono Trial", ui-monospace, monospace;

  /* ── Primitive colors (source of truth from decart.ai) ──── */
  --primitives--blue:         #2548f6;
  --primitives--medium-blue:  #0829cd;
  --primitives--dark-blue:    #061d94;
  --primitives--pale-blue:    #e9f4ff;
  --primitives--darl-blue:    #21222c; /* primary text — warm near-black */
  --primitives--black:        #1d1d1f;
  --primitives--dark-grey:    #2a2a2a;
  --primitives--medium-grey:  #8a8a8e;
  --primitives--grey:         #c5c5c7;
  --primitives--light-grey:   #e2e2e4;
  --primitives--cream:        #eeeeec;
  --primitives--ghost-white:  #f4f3f3; /* page canvas */
  --primitives--pale:         #fffefc;
  --primitives--white:        #ffffff;

  /* ── Accent colors (002.fig additions) ─────────────────── */
  --c-orange-lemon: #EBC532; /* Primary/Orange Lemon — warm gold */
  --c-scarlet:      #E63B3B; /* Primary/Scarlet Red */

  /* ── Secondary / illustration palette ──────────────────── */
  --c-bright-yellow: #F5E642;
  --c-lemon-yellow:  #F0F263;
  --c-peach:         #FBB797;
  --c-sand:          #E8D5A3;
  --c-orange:        #FF8C39;
  --c-coral:         #F85E42;
  --c-bright-red:    #FF3333;
  --c-dark-brown:    #3D2B1F;
  --c-leaf-green:    #4CAF50;
  --c-lime:          #6CFF59;

  /* ── Semantic tokens (matches decart.ai CSS variables) ──── */
  --bg:              var(--primitives--ghost-white); /* #f4f3f3 */
  --bg-elevated:     var(--primitives--white);
  --bg-inverse:      var(--primitives--dark-grey);   /* #2a2a2a */
  --bg-brand:        var(--primitives--blue);

  --fg:              var(--primitives--darl-blue);   /* #21222c */
  --fg-2:            var(--primitives--medium-grey); /* #8a8a8e */
  --fg-inverse:      var(--primitives--white);
  --fg-accent:       var(--primitives--blue);

  --border:          var(--primitives--dark-grey);   /* #2a2a2a */
  --border-soft:     var(--primitives--grey);        /* #c5c5c7 */
  --border-light:    var(--primitives--light-grey);  /* #e2e2e4 */

  --accent:          var(--primitives--blue);
  --accent-hover:    var(--primitives--medium-blue); /* #0829cd */
  --accent-press:    var(--primitives--dark-blue);   /* #061d94 */

  /* ── Radii (from live site) ─────────────────────────────── */
  --r-xs:   0.125rem; /*  2px — buttons default */
  --r-sm:   0.25rem;  /*  4px */
  --r-md:   0.625rem; /* 10px */
  --r-lg:   0.75rem;  /* 12px */
  --r-pill: 999px;

  /* ── Spacing scale ──────────────────────────────────────── */
  --s-1:  0.25rem;  /*  4px */
  --s-2:  0.5rem;   /*  8px */
  --s-3:  1rem;     /* 16px */
  --s-4:  2rem;     /* 32px */
  --s-5:  3rem;     /* 48px */
  --s-6:  3.5rem;   /* 56px */
  --s-7:  5.625rem; /* 90px  — padding-section-small */
  --s-8:  6.875rem; /* 110px — padding-section-medium */
  --s-9:  10rem;    /* 160px — padding-section-large */
  --s-10: 16rem;    /* 256px — padding-section-huge */

  /* ── Containers ─────────────────────────────────────────── */
  --container-small:  57rem;  /* ~912px */
  --container-large:  82rem;  /* ~1312px */

  /* ── Shadows / elevation ────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(33, 34, 44, 0.06), 0 1px 1px rgba(33, 34, 44, 0.04);
  --shadow-md: 0 6px 16px rgba(33, 34, 44, 0.08), 0 2px 4px rgba(33, 34, 44, 0.04);
  --shadow-lg: 0 20px 40px rgba(33, 34, 44, 0.12), 0 4px 10px rgba(33, 34, 44, 0.06);
  --shadow-brand: 0 12px 28px rgba(37, 72, 246, 0.28);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    400ms;

  /* ── Legacy aliases ─────────────────────────────────────── */
  --c-blue:        var(--accent);
  --c-blue-deep:   var(--accent-hover);
  --c-blue-pale:   var(--primitives--pale-blue);
  --c-white:       var(--primitives--white);
  --c-grays-black: var(--primitives--black);
  --c-grays-dark:  var(--border);
  --c-grey-400:    var(--fg-2);
  --c-grey-500:    var(--border-soft);
  --fg-muted:      var(--fg-2);
}

/* ── Base ─────────────────────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Typography (live site scale) ─────────────────────────── */
.h1, h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 4.25rem;   /* 68px */
  line-height: 1.05em;
  letter-spacing: -0.02em;
}
.h2, h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 3.75rem;   /* 60px */
  line-height: 1.2em;
  letter-spacing: -0.02em;
}
.h3, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 3rem;      /* 48px */
  line-height: 1.2em;
  letter-spacing: -0.02em;
}
/* H4: Monitor Condensed — positive tracking (unique in Decart scale) */
.h4, h4 {
  font-family: var(--font-condensed);
  font-weight: 400;
  font-size: 2.25rem;   /* 36px */
  line-height: 1.2em;
  letter-spacing: 0.05em;
}
.h5, h5 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2rem;      /* 32px */
  line-height: 1.2em;
  letter-spacing: 0;
}
.h6, h6 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.5rem;    /* 24px */
  line-height: 1.2em;
}
/* H7: mid-range display (002.fig, between H3 and H4) */
.h7 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2.625rem;  /* 42px */
  line-height: 1.0em;
  letter-spacing: -0.02em;
}
/* H-display: largest hero heading */
.h-display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 5.5rem;    /* 88px */
  line-height: 1.0em;
  letter-spacing: -0.02em;
}
/* H3-alt: body-weight subhead */
.h3-alt {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 2.625rem;  /* 42px */
  line-height: 1.0em;
}
p, .body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.4em;
}
.body-regular {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4em;
}
.body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.4em;
}
.caps {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.3em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mono, code, pre, kbd {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.84375rem; /* 13.5px */
  line-height: 1.5em;
}
.tagline {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.4em;
  letter-spacing: 0.01em;
}

/* ── Buttons (from live decart.ai) ────────────────────────── */
.btn {
  border-radius: var(--r-xs); /* 2px */
  background-color: var(--accent);
  color: var(--fg-inverse);
  font-family: var(--font-body);
  font-size: 0.75rem;  /* 12px */
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 0.35rem 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transform: skew(-8deg);
  transition: background-color var(--dur-base) var(--ease-out);
  cursor: pointer;
  border: none;
}
.btn:hover  { background-color: var(--accent-hover); }
.btn:active { background-color: var(--accent-press); }

.btn--secondary {
  background-color: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.btn--secondary:hover {
  background-color: var(--accent);
  color: var(--fg-inverse);
}

.btn--large  { padding: 1rem 2rem; }
.btn--small  { padding: 0.5rem 1.25rem; }
.btn--no-skew { transform: none; }

/* ── Nav (from live decart.ai) ────────────────────────────── */
.nav-component {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: rgba(244, 243, 243, 0.6); /* ghost-white @60% */
  width: 100%;
  padding: 0.75rem 2.5rem;
}

.nav-link {
  font-family: var(--font-body);
  font-size: 0.6875rem; /* 11px */
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
  padding: 0;
  transform: skew(-8deg);
  text-decoration: none;
  display: inline-block;
}
.nav-link:hover,
.nav-link.is-active { color: var(--accent); }