/* ------------------------------------------------------------------
   Ascend — base tokens, reset, typography, background
   Monochrome neumorphic system. No hue anywhere: only greys, the
   two shadows, and one "ink" black for emphasis cards and buttons.
   ------------------------------------------------------------------ */

:root {
  /* surfaces */
  --bg:        #e8e9ed;   /* page + card surface (neumorphism uses one colour) */
  --bg-soft:   #eef0f3;   /* slightly lighter well */
  --ink:       #16171a;   /* black cards, primary buttons */
  --ink-2:     #26282d;   /* black card hover / inner surface */

  /* text */
  --text:      #1c1d21;
  --text-2:    #5f636b;
  --text-3:    #9a9ea7;
  --on-ink:    #f3f3f5;
  --on-ink-2:  #a6a9b1;

  /* lines + shadows */
  --line:      rgba(20, 22, 26, .07);
  --shadow-d:  rgba(146, 150, 162, .58);
  --shadow-l:  rgba(255, 255, 255, .96);

  /* neumorphic elevations */
  --raise:     9px 9px 20px var(--shadow-d), -9px -9px 20px var(--shadow-l);
  --raise-sm:  4px 4px 10px var(--shadow-d), -4px -4px 10px var(--shadow-l);
  --raise-xs:  2px 2px 6px var(--shadow-d), -2px -2px 6px var(--shadow-l);
  --inset:     inset 5px 5px 12px var(--shadow-d), inset -5px -5px 12px var(--shadow-l);
  --inset-sm:  inset 3px 3px 7px var(--shadow-d), inset -3px -3px 7px var(--shadow-l);
  --inset-xs:  inset 2px 2px 4px var(--shadow-d), inset -2px -2px 4px var(--shadow-l);
  --ink-raise: 10px 10px 24px rgba(0,0,0,.28), -6px -6px 16px rgba(255,255,255,.55);

  /* muscle figure tones */
  --fig-body:  #d9dbe0;
  --fig-line:  #c3c6cd;
  --fig-mute:  #cfd2d8;
  --fig-hot:   #1c1d21;
  --fig-warm:  #70737b;

  /* radii */
  --r-xl: 30px;
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;
  --r-pill: 999px;

  /* type */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: 160ms;
  --slow: 420ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

::selection { background: var(--ink); color: var(--on-ink); }

/* Subtle circuit-board pattern from the reference, kept very faint
   so it reads as texture rather than decoration. */
.bg-pattern {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360' fill='none' stroke='%23000' stroke-opacity='.075' stroke-width='1'%3E%3Cpath d='M48 0v96l28 28v84'/%3E%3Ccircle cx='76' cy='214' r='3'/%3E%3Cpath d='M132 0v44l-30 30v62'/%3E%3Ccircle cx='102' cy='142' r='3'/%3E%3Cpath d='M216 360v-78l30-30v-98'/%3E%3Ccircle cx='246' cy='148' r='3'/%3E%3Cpath d='M300 0v64l-22 22v128'/%3E%3Ccircle cx='278' cy='220' r='3'/%3E%3Cpath d='M0 282h64l22-22h78'/%3E%3Ccircle cx='170' cy='260' r='3'/%3E%3Crect x='186' y='44' width='18' height='18' rx='2'/%3E%3Cpath d='M186 53h-8M204 53h8M195 44v-8M195 62v8'/%3E%3Cpath d='M268 262l16-9 16 9v18l-16 9-16-9z'/%3E%3Cpath d='M20 320l16-9 16 9v18l-16 9-16-9z'/%3E%3Crect x='330' y='300' width='14' height='40' rx='1'/%3E%3C/svg%3E");
  background-size: 360px 360px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.35));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.35));
}

/* Type scale */
.t-display { font-size: clamp(44px, 9vw, 72px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.t-kpi     { font-size: clamp(34px, 7vw, 52px); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.t-h1      { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.t-h2      { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.t-h3      { font-size: 14px; font-weight: 600; }
.t-body    { font-size: 14px; color: var(--text-2); }
.t-label   { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.t-small   { font-size: 12px; color: var(--text-3); }
.t-mono    { font-family: var(--mono); font-size: 12px; letter-spacing: 0; }
.muted     { color: var(--text-2); }
.faint     { color: var(--text-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
html[data-reduce-motion="true"] *, html[data-reduce-motion="true"] *::before, html[data-reduce-motion="true"] *::after {
  animation-duration: .001ms !important; transition-duration: .001ms !important;
}