/* ───────────────────────────────────────────────────────────────────
   Atasuai Design System — tokens (marketing site)
   Source: design_handoff_atasuai_site/_ds/.../tokens/*.css
   Loaded only by the marketing layout (_SiteLayout.cshtml).
   ─────────────────────────────────────────────────────────────────── */

/* ───────── Typefaces (self-hosted) ─────────
   Inter: the site-wide variable font (100–900, latin+cyrillic).
   JetBrains Mono: numerals / IDs / code chips only — never Kazakh prose.
   Puhuiti: CJK fallback for zh-cn (already shipped with the site). */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2"), url("../fonts/inter.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/jetbrains-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "Puhuiti";
  src: url("../fonts/puhuiti.woff2") format("woff2"), url("../fonts/puhuiti.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── Primitives · Brand blue (core identity) ─── */
  --brand-blue-50:  rgb(239,244,255);
  --brand-blue-100: rgb(221,232,255);
  --brand-blue-200: rgb(185,208,255);
  --brand-blue-300: rgb(148,183,255);
  --brand-blue-400: rgb(114,158,254);
  --brand-blue-500: rgb(79,137,252);   /* base brand */
  --brand-blue-600: rgb(46,111,232);   /* primary action / brand strong */
  --brand-blue-700: rgb(30,84,181);
  --brand-blue-800: rgb(22,62,130);
  --brand-blue-900: rgb(15,42,87);

  /* ─── Primitives · Brand navy (dark surfaces, logo lockup) ─── */
  --brand-navy-700: rgb(42,74,133);
  --brand-navy-800: rgb(22,48,99);
  --brand-navy-900: rgb(14,31,66);

  /* ─── Primitives · Accents (buyer-side energy) ─── */
  --brand-orange-500: rgb(255,122,0);
  --brand-pink-500:   rgb(238,43,105);

  /* ─── Primitives · Neutral / gray ─── */
  --gray-0:   rgb(255,255,255);
  --gray-50:  rgb(249,250,251);
  --gray-100: rgb(243,244,246);
  --gray-200: rgb(229,231,235);
  --gray-300: rgb(209,213,219);
  --gray-400: rgb(156,163,175);
  --gray-500: rgb(107,114,128);
  --gray-600: rgb(75,85,99);
  --gray-700: rgb(55,65,81);
  --gray-800: rgb(37,46,58);
  --gray-900: rgb(29,38,48);

  /* ─── Primitives · Semantic scales ─── */
  --success-100: rgb(214,245,220);
  --success-300: rgb(128,220,149);
  --success-500: rgb(26,189,53);
  --success-700: rgb(15,122,31);

  --warning-100: rgb(255,237,213);
  --warning-300: rgb(252,211,77);
  --warning-500: rgb(249,115,22);
  --warning-700: rgb(194,65,12);

  --error-100: rgb(254,226,226);
  --error-300: rgb(252,165,165);
  --error-500: rgb(239,68,68);
  --error-600: rgb(220,38,38);
  --error-700: rgb(185,28,28);
  --error-800: rgb(153,27,27);

  --info-100: rgb(224,242,254);
  --info-300: rgb(147,197,253);
  --info-500: rgb(14,165,233);
  --info-700: rgb(3,105,161);

  --violet-50:  rgb(237,233,254);
  --violet-600: rgb(109,40,217);
  --pink-50:    rgb(253,242,248);
  --pink-600:   rgb(190,24,93);

  /* ─── Semantic · Backgrounds / surfaces ─── */
  --color-bg-page:    var(--gray-50);
  --color-bg-canvas:  var(--gray-0);
  --color-bg-inset:   var(--gray-100);
  --color-bg-overlay: var(--gray-900);
  --color-bg-scrim:   rgba(15,23,41,0.45);

  --color-bg-brand:         var(--brand-blue-500);
  --color-bg-brand-strong:  var(--brand-blue-600);
  --color-bg-brand-hover:   var(--brand-blue-600);
  --color-bg-brand-pressed: var(--brand-blue-700);
  --color-bg-brand-subtle:  var(--brand-blue-50);

  --color-bg-success:        var(--success-500);
  --color-bg-success-hover:  rgb(20,156,45);
  --color-bg-success-subtle: var(--success-100);
  --color-bg-warning:        var(--warning-500);
  --color-bg-warning-subtle: var(--warning-100);
  --color-bg-error:          var(--error-500);
  --color-bg-error-default:  var(--error-700);
  --color-bg-error-hover:    var(--error-800);
  --color-bg-error-pressed:  var(--error-700);
  --color-bg-error-subtle:   var(--error-100);
  --color-bg-info:           var(--info-500);
  --color-bg-info-subtle:    var(--info-100);

  /* Subtle tints — chips, soft badges, illustration backings */
  --color-bg-tint-blue:    var(--brand-blue-50);
  --color-bg-tint-emerald: var(--success-100);
  --color-bg-tint-amber:   var(--warning-100);
  --color-bg-tint-sky:     var(--info-100);
  --color-bg-tint-pink:    var(--pink-50);
  --color-bg-tint-violet:  var(--violet-50);
  --color-bg-tint-slate:   var(--gray-50);

  /* ─── Semantic · Text ─── */
  --color-text-primary:   var(--gray-900);
  --color-text-secondary: var(--gray-700);
  --color-text-tertiary:  var(--gray-500);
  --color-text-disabled:  var(--gray-400);
  --color-text-brand:     var(--brand-blue-600);
  --color-text-on-brand:  var(--gray-0);
  --color-text-success:   var(--success-700);
  --color-text-warning:   var(--warning-700);
  --color-text-error:     var(--error-700);
  --color-text-info:      var(--info-700);

  /* ─── Semantic · Borders ─── */
  --color-border-subtle:  var(--gray-100);
  --color-border-default: var(--gray-200);
  --color-border-strong:  var(--gray-300);
  --color-border-brand:   var(--brand-blue-500);
  --color-border-focus:   var(--brand-blue-600);
  --color-border-success: var(--success-500);
  --color-border-warning: var(--warning-500);
  --color-border-error:   var(--error-500);

  /* ─── Semantic · Icons ─── */
  --color-icon-default:  var(--gray-600);
  --color-icon-strong:   var(--gray-800);
  --color-icon-disabled: var(--gray-400);
  --color-icon-brand:    var(--brand-blue-500);
  --color-icon-on-brand: var(--gray-0);
  --color-icon-tint-blue:    var(--brand-blue-600);
  --color-icon-tint-emerald: var(--success-700);
  --color-icon-tint-amber:   var(--warning-700);
  --color-icon-tint-sky:     var(--info-700);
  --color-icon-tint-pink:    var(--pink-600);
  --color-icon-tint-violet:  var(--violet-600);
  --color-icon-tint-slate:   var(--gray-600);

  /* Focus ring (brand blue at low alpha) */
  --color-focus-ring: rgba(46,111,232,0.32);

  /* ─── Brand accent hook ─── */
  --main-color:          var(--brand-blue-500);
  --main-color-hover:    var(--brand-blue-600);
  --main-color-subtle:   var(--brand-blue-50);
  --main-color-contrast: var(--gray-0);

  /* ─── Typography ─── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-base: 14px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;
  --font-size-3xl:  32px;
  --font-size-4xl:  40px;

  --line-height-xs:   14px;
  --line-height-sm:   16px;
  --line-height-base: 20px;
  --line-height-md:   24px;
  --line-height-lg:   28px;
  --line-height-xl:   32px;
  --line-height-2xl:  40px;
  --line-height-3xl:  48px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --tracking-display:  -0.022em;
  --tracking-tightest: -0.018em;
  --tracking-tighter:  -0.012em;
  --tracking-tight:    -0.006em;
  --tracking-normal:    0em;
  --tracking-wide:      0.04em;
  --tracking-wider:     0.12em;

  /* ─── Spacing scale (px) ─── */
  --space-none: 0px;
  --space-2xs:  2px;
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   12px;
  --space-base: 16px;
  --space-lg:   20px;
  --space-xl:   24px;
  --space-2xl:  32px;
  --space-3xl:  40px;
  --space-4xl:  48px;
  --space-5xl:  64px;
  --space-6xl:  80px;

  /* ─── Corner radii (px) ─── */
  --radius-none: 0px;
  --radius-2xs:  2px;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 999px;

  /* ─── Control sizing ─── */
  --control-height-sm: 32px;
  --control-height-md: 40px;
  --control-height-lg: 48px;

  /* ─── Elevation ─── */
  --elevation-flat: 0 0 0 1px var(--color-border-default);
  --elevation-soft:
    0 1px 2px rgba(15,23,41,0.06),
    0 1px 3px rgba(15,23,41,0.06);
  --elevation-medium:
    0 4px 8px -2px rgba(15,23,41,0.10),
    0 2px 4px -2px rgba(15,23,41,0.06);
  --elevation-strong:
    0 16px 32px -8px rgba(15,23,41,0.18),
    0 4px 8px -4px rgba(15,23,41,0.10);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);

  /* ─── Motion ─── */
  --duration-instant: 0ms;
  --duration-fast:    140ms;
  --duration-base:    220ms;
  --duration-slow:    320ms;
  --duration-slower:  480ms;

  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-enter:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0.0, 1, 1);
  --ease-linear:   linear;

  /* ─── Stacking order ─── */
  --z-base:     0;
  --z-raised:   1;
  --z-dropdown: 1000;
  --z-sticky:   1100;
  --z-drawer:   1200;
  --z-modal:    1300;
  --z-toast:    1400;
  --z-tooltip:  1500;
}

/* ─── Type helpers ─── */
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.t-display-lg { font: var(--font-weight-bold) var(--font-size-4xl)/var(--line-height-3xl) var(--font-sans); letter-spacing: var(--tracking-display); }
.t-display    { font: var(--font-weight-bold) var(--font-size-3xl)/var(--line-height-xl)  var(--font-sans); letter-spacing: var(--tracking-tightest); }
.t-title      { font: var(--font-weight-semibold) var(--font-size-2xl)/var(--line-height-2xl) var(--font-sans); letter-spacing: var(--tracking-tighter); }
.t-heading    { font: var(--font-weight-semibold) var(--font-size-lg)/var(--line-height-lg) var(--font-sans); letter-spacing: var(--tracking-tight); }
.t-body-lg    { font: var(--font-weight-regular) var(--font-size-md)/var(--line-height-md) var(--font-sans); }
.t-body       { font: var(--font-weight-regular) var(--font-size-base)/var(--line-height-base) var(--font-sans); }
.t-label      { font: var(--font-weight-medium) var(--font-size-base)/var(--line-height-base) var(--font-sans); }
.t-caption    { font: var(--font-weight-regular) var(--font-size-sm)/var(--line-height-sm) var(--font-sans); }
.t-eyebrow    { font: var(--font-weight-semibold) var(--font-size-xs)/var(--line-height-xs) var(--font-sans); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.t-mono       { font: var(--font-weight-regular) var(--font-size-sm)/var(--line-height-sm) var(--font-mono); font-variant-numeric: tabular-nums; }

/* ─── Base element defaults ─── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: var(--color-bg-canvas);
  font-feature-settings: "cv01" 1, "cv03" 1;
}

::selection { background: rgba(46,111,232,.16); }

/* CJK: keep Inter for latin glyphs, Puhuiti for Chinese text */
html[lang="zh-cn"] body,
html[lang="zh-cn"] button,
html[lang="zh-cn"] input,
html[lang="zh-cn"] textarea {
  font-family: "Inter", "Puhuiti", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (pointer: coarse) {
  :root {
    --control-height-sm: 40px;
    --control-height-md: 44px;
    --control-height-lg: 52px;
  }
}