/* ================================================================
   ATAS Design System — colors, type, spacing, radii, shadow, motion
   Font: Arimo (Google Fonts) — approximates "ArimoVariable" from prod.
   Swap to self-hosted .woff2 when available. See README > Caveats.
   ================================================================ */

/* Self-hosted Arimo (variable + static styles, uploaded by brand team) */
@font-face {
  font-family: 'Arimo';
  src: url('fonts/Arimo-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Arimo';
  src: url('fonts/Arimo-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
/* Static fallbacks — kept alongside the variable font for browsers that
   ignore the weight range, and so DevTools shows the correct weight name. */
@font-face { font-family: 'Arimo'; src: url('fonts/Arimo-Regular.ttf')        format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Arimo'; src: url('fonts/Arimo-Italic.ttf')         format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Arimo'; src: url('fonts/Arimo-Medium.ttf')         format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Arimo'; src: url('fonts/Arimo-MediumItalic.ttf')   format('truetype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Arimo'; src: url('fonts/Arimo-SemiBold.ttf')       format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Arimo'; src: url('fonts/Arimo-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Arimo'; src: url('fonts/Arimo-Bold.ttf')           format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Arimo'; src: url('fonts/Arimo-BoldItalic.ttf')     format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* ---------- COLOR: dark surfaces ---------- */
  --black-background: #090B17;        /* --2-Dark — hero, header, footer */
  --dark-background:  #0D0F20;        /* secondary dark */
  --4-Light:          #121526;        /* tertiary dark */
  --dark-gray-1:      #181D2F;        /* cards / panels */
  --blue-background:  #282B42;        /* highlighted dark blocks */

  /* ---------- COLOR: light surfaces ---------- */
  --grey-background:  #F5F6F6;        /* product sections on landing */
  --white:            #FFFFFF;

  /* ---------- COLOR: brand accents ---------- */
  --blue:             #654CF4;        /* primary violet-blue */
  --link-blue:        #31B2F3;        /* secondary / outlines / links */
  --accent-magenta:   #B94EB6;
  --accent-pink:      #F34D7F;

  /* ---------- COLOR: gradients ---------- */
  --gradient:        linear-gradient(90deg, #4E4BF7, #7A4EF4);
  --gradient-main:   linear-gradient(90deg, #4C49F6 0%, #784DF3 50%, #8E4DDE 76%, #B94EB6 100%);
  --gradient-2:      linear-gradient(90deg, #4C49F6 0%, #784DF3 31.25%, #F34D7F 81.77%);
  --gradient-hover:  linear-gradient(0deg, rgba(255,255,255,.1), rgba(255,255,255,.1));
  --gradient-promo:  linear-gradient(135deg, #4C49F6 0%, #B94EB6 60%, #F34D7F 100%);

  /* ---------- COLOR: semantic ---------- */
  --up:               #00D082;        /* bullish / success (approx) */
  --up-soft:          #7ADCB4;
  --down:             #E92D38;        /* bearish / error — --1-Light/Dark */
  --warn:             #F34D7F;

  /* ---------- COLOR: text ---------- */
  --fg-on-dark:       #F0F0F5;        /* --3-Dark */
  --fg-on-light:      #090B17;
  --fg-muted:         #767C8E;        /* --dark-gray */
  --grey-80:          rgba(130,132,153,.8);
  --grey-40:          rgba(130,132,153,.4);
  --grey-20:          rgba(130,132,153,.2);

  /* ---------- COLOR: borders ---------- */
  --border-dark:      rgba(130,132,153,.2);
  --border-light:     rgba(9,11,23,.08);
  --border-light-strong: rgba(9,11,23,.12);
  --focus-ring:       0 0 0 3px rgba(101,76,244,.18);

  /* ---------- TYPE ---------- */
  --font-regular: 'Arimo', 'Liberation Sans', Arial, sans-serif;
  --font-medium:  'Arimo', 'Liberation Sans', Arial, sans-serif;
  --font-bold:    'Arimo', 'Liberation Sans', Arial, sans-serif;

  /* Scale (desktop) — size / line-height / weight / tracking */
  --h1-size: 16px;   --h1-lh: 24px;   --h1-ls: 0.32px;  --h1-weight: 500;
  --h2-size: 54px;   --h2-lh: 64.8px; --h2-ls: 1.08px;  --h2-weight: 700;
  --h3-size: 32px;   --h3-lh: 38.4px; --h3-ls: 0.64px;  --h3-weight: 700;
  --h4-size: 24px;   --h4-lh: 32px;   --h4-ls: 0.48px;  --h4-weight: 700;
  --body-lg-size: 18px; --body-lg-lh: 28px;
  --body-size: 16px;    --body-lh: 24px;
  --small-size: 14px;   --small-lh: 20px;
  --caption-size: 12px; --caption-lh: 16px;

  /* ---------- SPACING (4px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-30: 120px;

  /* ---------- LAYOUT ---------- */
  --max-width: 1920px;
  --inline:    clamp(14px, 7.293vw, 140px);
  --content-max: 1440px;
  --header-h:  80px;

  /* ---------- RADII ---------- */
  --radius-btn:    2px;   /* primary/secondary buttons — the signature tiny radius */
  --radius-pill:   6px;   /* header pills, tabs, soft buttons */
  --radius-card:   16px;  /* cards */
  --radius-card-sm:12px;
  --radius-modal:  20px;
  --radius-input:  4px;
  --radius-full:   999px;

  /* ---------- SHADOW ---------- */
  --shadow-card:       0 4px 16px rgba(9, 11, 23, 0.06);
  --shadow-card-hover: 0 12px 32px rgba(9, 11, 23, 0.12);
  --shadow-modal:      0 16px 48px rgba(0, 0, 0, 0.4);
  --shadow-tooltip:    0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-cta-glow:   0 8px 24px rgba(101, 76, 244, 0.35);
  --shadow-screenshot: 0 20px 60px rgba(0, 0, 0, 0.5);
  --inner-glow-violet: inset 0 0 0 1px rgba(101, 76, 244, 0.3);
  --inner-hair-white:  inset 0 0 0 1px rgba(255, 255, 255, 0.04);

  /* ---------- MOTION ---------- */
  --transition:        0.3s ease;
  --transition-medium: 0.45s ease-in-out;
  --transition-slow:   0.9s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-smooth: 2s   cubic-bezier(0.25, 1, 0.5, 1);
  --easing-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
}

/* ================================================================
   SEMANTIC TYPE CLASSES
   ================================================================ */

body, .body {
  font-family: var(--font-regular);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-weight: 400;
  color: var(--fg-on-dark);
  background: var(--black-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h1, h1.display {
  font-family: var(--font-bold);
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-ls);
}

.h2, h2 {
  font-family: var(--font-bold);
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-ls);
}

.h3, h3 {
  font-family: var(--font-bold);
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  font-weight: var(--h3-weight);
  letter-spacing: var(--h3-ls);
}

.h4, h4 {
  font-family: var(--font-bold);
  font-size: var(--h4-size);
  line-height: var(--h4-lh);
  font-weight: var(--h4-weight);
  letter-spacing: var(--h4-ls);
}

.body-lg { font-size: var(--body-lg-size); line-height: var(--body-lg-lh); font-weight: 400; }
.body    { font-size: var(--body-size);    line-height: var(--body-lh);    font-weight: 400; }
.small   { font-size: var(--small-size);   line-height: var(--small-lh);   font-weight: 500; }
.caption { font-size: var(--caption-size); line-height: var(--caption-lh); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

.num { font-weight: 700; font-variant-numeric: tabular-nums; }
.muted { color: var(--fg-muted); }
.fg-on-dark { color: var(--fg-on-dark); }
.fg-on-light { color: var(--fg-on-light); }

/* ================================================================
   PRIMITIVES: buttons, inputs, cards — classed utilities the kit uses
   ================================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-medium);
  font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition), background var(--transition);
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

.btn--s { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--radius-btn); }
.btn--m { height: 40px; padding: 0 16px; font-size: 14px; border-radius: var(--radius-btn); }
.btn--l { height: 48px; padding: 0 24px; font-size: 16px; border-radius: var(--radius-pill); }

.btn--primary {
  background: var(--gradient-main);
  color: #fff;
  box-shadow: 0 0 0 0 rgba(101,76,244,0);
}
.btn--primary:hover {
  background: var(--gradient-main), var(--gradient-hover);
  filter: brightness(1.08);
  box-shadow: var(--shadow-cta-glow);
}
.btn--primary-pink { background: var(--gradient-2); color: #fff; border-radius: var(--radius-full); }

.btn--secondary {
  background: var(--link-blue);
  color: #fff;
}
.btn--secondary:hover { background: #1FA0E0; }

.btn--ghost {
  background: transparent;
  color: var(--link-blue);
  border: 2px solid var(--link-blue);
}
.btn--ghost:hover { background: var(--link-blue); color: #fff; }

.btn--pill {
  background: transparent;
  color: var(--fg-on-dark);
  border-radius: var(--radius-pill);
  height: 40px; padding: 0 16px;
  font-weight: 500;
}
.btn--pill:hover { background: rgba(255,255,255,0.06); }

/* Inputs */
.input {
  height: 48px;
  padding: 14px 16px;
  border-radius: var(--radius-input);
  font: 400 16px/24px var(--font-regular);
  color: var(--fg-on-dark);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-dark);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.input::placeholder { color: var(--fg-muted); }
.input:focus { border-color: var(--blue); box-shadow: var(--focus-ring); }
.input[aria-invalid="true"] { border-color: var(--down); }
.input--light { background: #fff; color: var(--fg-on-light); border-color: var(--border-light-strong); }

/* Cards */
.card {
  background: var(--dark-gray-1);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--inner-glow-violet);
  border-color: rgba(101,76,244,.4);
}
.card--light {
  background: #fff;
  color: var(--fg-on-light);
  border-color: var(--border-light);
  box-shadow: var(--shadow-card);
}
.card--light:hover { box-shadow: var(--shadow-card-hover); }

/* Badges */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; height: 20px;
  font: 700 12px/1 var(--font-bold);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff;
  border-radius: var(--radius-full);
}
.badge--new, .badge--pro { background: var(--gradient-2); }
.badge--beta { background: transparent; color: var(--fg-muted); font-weight: 500; text-transform: none; letter-spacing: 0; padding: 0; }

/* Utility */
.container { max-width: var(--content-max); margin: 0 auto; padding-left: var(--inline); padding-right: var(--inline); }
.stack-1 > * + * { margin-top: var(--space-1); }
.stack-2 > * + * { margin-top: var(--space-2); }
.stack-3 > * + * { margin-top: var(--space-3); }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-6 > * + * { margin-top: var(--space-6); }
.stack-8 > * + * { margin-top: var(--space-8); }

/* Hero glow helpers */
.glow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.55;
  pointer-events: none;
}
.glow-blob--pink { background: var(--accent-pink); }
.glow-blob--blue { background: #4E4BF7; }