/* ============================================================
   ant.exchange — Design Tokens
   shadcn/ui-style · soft shadows · violet accent
   ------------------------------------------------------------
   Canonical token source. Values lifted from the live ant.exchange
   design audit (Inter, #7B62FF accent, #F6F7FB app bg, white cards).
   Every other layer references these vars, never hard-coded hex.
   ============================================================ */

/* ── Inter font faces (self-hosted woff2) ── */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/Inter-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/Inter-Italic.woff2") format("woff2"); }

:root {
  /* ── Surfaces ── */
  --app-bg:            #F6F7FB;   /* light gray-blue page background */
  --background:        #FFFFFF;   /* cards, popovers, inputs */
  --card:              #FFFFFF;
  --popover:           #FFFFFF;
  --footer-bg:         #F8FAFC;

  /* ── Text / foreground ── */
  --foreground:        #0F172A;   /* slate-900 — primary text */
  --card-foreground:   #0F172A;
  --muted:             #F8FAFC;   /* slate-50 muted surface */
  --muted-foreground:  #64748B;   /* slate-500 — helper/grey text */

  /* ── Primary accent (violet) ── */
  --primary:           #7B62FF;
  --primary-hover:     #6A50F0;
  --primary-active:    #5B40E0;
  --primary-foreground:#FFFFFF;
  --ring:              #7B62FF;

  /* ── Secondary / accent violets ── */
  --secondary:         #F5F3FF;   /* violet-50 */
  --secondary-foreground:#4C1D95; /* violet-900 */
  --accent:            #EDE9FE;   /* violet-100 — active chip/menu bg */
  --accent-foreground: #5B21B6;   /* violet-800 */
  --info-soft:         #F1EEFF;   /* soft violet info plate bg */

  /* ── Feedback states ── */
  --destructive:       #DC2626;   /* red-600 */
  --destructive-soft:  #FEF2F2;
  --success:           #16A34A;   /* green-600 */
  --success-soft:      #ECFDF5;
  --success-foreground:#166534;
  --warning:           #D97706;
  --warning-soft:      #FFFBEB;

  /* ── Borders ── */
  --border:            #E7E5F4;   /* card borders */
  --input:             #E5E7EB;   /* gray-200 input borders */
  --border-strong:     #CBD5E1;

  /* ── Radii ── */
  --radius:            0.75rem;   /* 12px base */
  --radius-sm:         0.5rem;    /* 8px */
  --radius-md:         0.75rem;   /* 12px */
  --radius-lg:         1rem;      /* 16px — input container */
  --radius-xl:         1.25rem;   /* 20px */
  --radius-2xl:        1.5rem;    /* 24px — big cards */
  --radius-pill:       9999px;

  /* ── Soft shadows ── */
  --shadow-xs:  0 1px 2px 0 rgba(15,23,42,.04);
  --shadow-sm:  0 1px 3px 0 rgba(15,23,42,.06), 0 1px 2px -1px rgba(15,23,42,.05);
  --shadow:     0 4px 12px -2px rgba(15,23,42,.07), 0 2px 6px -2px rgba(15,23,42,.05);
  --shadow-md:  0 8px 24px -6px rgba(15,23,42,.10), 0 4px 10px -4px rgba(15,23,42,.06);
  --shadow-lg:  0 18px 44px -12px rgba(15,23,42,.16), 0 8px 18px -8px rgba(15,23,42,.08);
  --shadow-primary: 0 10px 26px -8px rgba(123,98,255,.45);

  /* ── Typography ── */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ── Type scale ── */
  --fs-hero:    36px;   /* hero h1 / h2 */
  --fs-h2:      30px;
  --fs-h3:      22px;
  --fs-h4:      18px;
  --fs-lead:    18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-xs:      12px;
  --fs-amount:  30px;   /* calculator amount field */

  /* ── Control heights ── */
  --control-h:  50px;

  /* ── Layout ── */
  --container:  1200px;
  --header-h:   72px;

  /* ── z-index layers ── */
  --z-topbar:   70;
  --z-header:   80;
  --z-float:    90;
  --z-overlay:  1000;
  --z-dialog:   1100;
  --z-toast:    1200;

  /* ── Status pills ── */
  --status-online-bg:  #DCFCE7;
  --status-online-fg:  #166534;
  --status-online-dot: #22C55E;
  --status-offline-bg: #FEE2E2;
  --status-offline-fg: #991B1B;
  --status-offline-dot:#EF4444;

  /* ── Motion ── */
  --dur-fast:   140ms;
  --dur:        220ms;
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   Base element setup
   ============================================================ */
* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--app-bg);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-weight: 400;
  overflow-x: clip;
}
html { max-width: 100%; overflow-x: clip; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

h1, h2, h3, h4 { margin: 0; color: var(--foreground); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

img { max-width: 100%; }

::selection { background: var(--accent); color: var(--accent-foreground); }

*:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(123,98,255,.35); }

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