/*
 * ACG Markets — Landing page design tokens (2026 launch)
 *
 * Built from Figma "ACG Markets" → "Dark Version" (node 312:4722), then
 * consolidated: the Figma file used 40+ font sizes, 16 radii and
 * 11 text greys. This file is the compact system those values were folded into.
 * The before → after map is on /style-guide#changes.
 *
 * This file is the spec. Add a value here only if no existing token works,
 * and update Figma to match.
 */

@font-face {
  font-family: "Manrope";
  src: url("../../fonts/manrope-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("../../fonts/CreatoDisplay-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Color: surfaces (4) ─────────────────────────────────────── */
  --acg-bg: #0e0e0e;               /* page */
  --acg-surface: #1f1f1f;          /* cards */
  --acg-surface-sunken: #141414;   /* hero frame, market tiles */
  --acg-surface-muted: #303939;    /* secondary block button */
  --acg-white: #ffffff;            /* eyebrow pill, arrow box */

  /* ── Color: brand ────────────────────────────────────────────── */
  --acg-teal: #3fe0d0;             /* the only accent */
  --acg-teal-deep: #006766;
  --acg-teal-mid: #2b7f7f;
  --acg-teal-ring: rgba(63, 224, 208, 0.15);
  --acg-teal-mist: #d3fbff;        /* step labels on the closing CTA (live site) */
  --acg-teal-hover: #6ce9dc;       /* primary button hover */

  /* ── Color: text (3 tiers + inverse) ─────────────────────────── */
  --acg-text: #ffffff;                          /* headings, values */
  --acg-text-secondary: rgba(255, 255, 255, 0.8); /* tile titles, trust bar, labels on teal */
  --acg-text-muted: rgba(255, 255, 255, 0.6);   /* body copy, labels, ticker codes */
  --acg-text-inverse: #000000;                  /* on teal / white */

  /* ── Color: borders (4) ──────────────────────────────────────── */
  --acg-border: #343d3e;                        /* rows, tiles */
  --acg-border-subtle: rgba(255, 255, 255, 0.1); /* rows on teal, dividers */
  --acg-border-strong: rgba(255, 255, 255, 0.6); /* outline button, link underline */
  --acg-border-accent: rgba(63, 224, 208, 0.6);  /* accent outline (rare) */
  /* Card edge: a hairline that shows only at the top-left and fades out (Figma cards) */
  --acg-card-edge: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.06) 22%, rgba(255, 255, 255, 0) 45%);

  /* ── Color: market categories (data colors, not UI accents) ──── */
  --acg-cat-metal: #b77b09;
  --acg-cat-index: #3568d9;
  --acg-cat-energy: #d85f25;
  --acg-cat-soft: #8250be;
  --acg-cat-agri: #3d8b48;
  --acg-cat-silver: #61738f;
  --acg-cat-fx: var(--acg-teal);
  --acg-cat-pgm: #8e7360;     /* palladium (S8) */
  --acg-cat-oil: #2f4547;     /* WTI badge on the market rings (S8) */
  --acg-trustpilot: #00b67a;
  --acg-youtube: #ff0033;      /* play button on video thumbnails */
  --acg-negative: #ff6b6b;     /* losses in figures (legal key facts; dashboard P&L) */

  /* ── Gradients (4) ───────────────────────────────────────────── */
  --acg-grad-teal: linear-gradient(205deg, var(--acg-teal-deep) 16%, var(--acg-teal-mid) 79%);
  --acg-grad-alpha: linear-gradient(180deg, #9aa8ff 0%, #3042b4 100%);
  --acg-grad-academy: linear-gradient(180deg, #ec6746 0%, #cf2900 100%);
  /* Alpha Group product cards (S7) */
  --acg-grad-myalpha: linear-gradient(172deg, #1b1f4c 0%, #1f2459 45%, #2a3287 100%); /* sampled from Figma */
  --acg-surface-prime: #010101;
  --acg-surface-workflow: #1a1640;
  /* Alpha Trader promo card: teal-blue glow rising from the bottom (sampled from Figma) */
  --acg-glow-trader: radial-gradient(60% 55% at 42% 112%, rgba(89, 150, 170, 0.75), transparent 70%), radial-gradient(45% 50% at 100% 95%, rgba(63, 170, 157, 0.6), transparent 70%);
  --acg-dots: radial-gradient(circle, rgba(255, 255, 255, 0.12) 1px, transparent 1.6px) 0 0 / 48px 48px;
  /* Closing CTA card: dark top-left, teal bottom-right (sampled from Figma), with fine noise against banding */
  --acg-grad-cta:
    radial-gradient(70% 90% at 100% 100%, rgba(42, 124, 123, 0.95), transparent 70%),
    radial-gradient(60% 70% at 0% 100%, rgba(3, 90, 88, 0.9), transparent 70%),
    radial-gradient(30% 40% at 100% 0%, rgba(7, 61, 66, 0.9), transparent 75%),
    linear-gradient(180deg, #181818 0%, #172626 55%, #1d4f4e 100%);
  --acg-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --acg-grad-wordmark:linear-gradient(180deg, #35b0a3 0%, #2a8179 40%, #183b37 85%, #0e0e0e 100%); /* footer wordmark, sampled from Figma */

  /* ── Typography ──────────────────────────────────────────────── */
  --acg-font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --acg-font-alt: "Creato Display", var(--acg-font); /* Alpha Group app labels only */

  --acg-weight-regular: 400;
  --acg-weight-medium: 500;
  --acg-weight-semibold: 600; /* badge letters only */

  /* 9 sizes. Headings step down ~1.25×, text steps by 2px. */
  --acg-size-display: 88px;  /* hero + stats */
  --acg-size-h1: 56px;       /* section headings */
  --acg-size-h2: 44px;       /* card titles */
  --acg-size-h3: 32px;       /* promo card titles */
  --acg-size-h4: 24px;       /* step titles */
  --acg-size-lg: 18px;       /* lead paragraph */
  --acg-size-md: 16px;       /* body, values */
  --acg-size-sm: 14px;       /* UI: nav, buttons, labels, eyebrow, tiles */
  --acg-size-xs: 12px;       /* captions, codes, risk + trust bars */
  --acg-size-legal: 10px;    /* risk warning on phones only (live site uses 9.6px) */

  --acg-leading-tight: 1.1;  /* display, h1, h2 */
  --acg-leading-snug: 1.3;   /* h3, h4 */
  --acg-leading-normal: 1.5; /* md, sm, xs */
  --acg-leading-relaxed: 1.75;/* lead paragraphs */

  --acg-tracking-display: -0.06em;
  --acg-tracking-tight: -0.025em; /* h1 */
  --acg-tracking-snug: -0.02em;   /* h2, h3, buttons */
  --acg-tracking-wide: 0.04em;    /* ticker codes */

  /* ── Spacing (4px grid, 10 steps) ────────────────────────────── */
  --acg-space-1: 4px;
  --acg-space-2: 8px;
  --acg-space-3: 12px;
  --acg-space-4: 16px;
  --acg-space-5: 20px;
  --acg-space-6: 24px;
  --acg-space-8: 32px;
  --acg-space-12: 48px;
  --acg-space-18: 72px;
  --acg-space-32: 128px;

  /* Layout */
  --acg-page: 1440px;
  --acg-container: 1240px;
  --acg-container-wide: 1376px;               /* nav */
  --acg-section-gap: var(--acg-space-32);     /* between sections */
  --acg-section-head-gap: var(--acg-space-18);/* heading → content */
  --acg-card-pad: var(--acg-space-8);
  --acg-grid-gap: var(--acg-space-5);

  /* ── Radius (4) ──────────────────────────────────────────────── */
  --acg-radius-sm: 4px;     /* buttons, arrow box */
  --acg-radius-md: 10px;    /* cards, tiles, badges, eyebrow */
  --acg-radius-lg: 20px;    /* hero frame, app icons */
  --acg-radius-full: 999px; /* dots */

  /* ── Effects (3) ─────────────────────────────────────────────── */
  --acg-ring: 0 0 0 3px var(--acg-teal-ring);
  --acg-inner-glow: inset 1px 1px 4px 2px rgba(255, 255, 255, 0.23);
  --acg-shadow: 0 16px 24px rgba(0, 60, 60, 0.2);
  --acg-blur: 10px;

  /* ── Motion ──────────────────────────────────────────────────── */
  --acg-duration: 180ms;
  --acg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --acg-focus: 0 0 0 2px var(--acg-bg), 0 0 0 4px var(--acg-teal);

  /* ── Component sizes ─────────────────────────────────────────── */
  --acg-control-h: 40px;   /* every button */
  --acg-badge: 36px;       /* tile badge */
  --acg-tile-w: 224px;
  --acg-tile-h: 68px;
  --acg-dot: 8px;
  --acg-risk-bar-h: 32px;
}