/* ==========================================================================
   AiTrendz design tokens: Neon Pulse (brand option 1, chosen by Richard)
   Dark-only theme. Font URLs are relative to this file (../fonts/; path fixed for site/assets/css/).
   Contrast ratios are WCAG 2.x, computed against --at-color-bg (#0A0B14)
   unless noted otherwise. AA needs 4.5:1 for text and 3:1 for UI/graphics.
   Section 9 maps these onto Frontend Dev's scaffold names (--color-*, --space-*).
   ========================================================================== */

/* ---------- 1. Self-hosted fonts (SIL OFL 1.1, Latin subset, variable) ---------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-var.woff2") format("woff2-variations"),
       url("../fonts/space-grotesk-latin-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2713, U+2715, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-var.woff2") format("woff2-variations"),
       url("../fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2713, U+2715, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-var.woff2") format("woff2-variations"),
       url("../fonts/jetbrains-mono-latin-var.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2713, U+2715, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* ---------- 2. Core palette ---------- */
  --at-color-bg:        #0A0B14;  /* page background */
  --at-color-surface:   #141729;  /* cards, panels, header */
  --at-color-surface-2: #1C2038;  /* raised / hover surface, inputs */
  --at-color-primary:   #22E4FF;  /* neon cyan: primary buttons, links, focus. 12.71:1 */
  --at-color-accent:    #FF3DCB;  /* neon magenta: highlights, SI moments. 6.33:1 */
  --at-color-text:      #EAF0FF;  /* body text. 17.19:1 (15.54 on surface) */
  --at-color-muted:     #8A93B8;  /* secondary text. 6.49:1 (5.87 on surface, 5.29 on surface-2) */

  /* ---------- 3. Derived colors ---------- */
  --at-color-on-primary:    #0A0B14;  /* label on cyan: 12.71:1 */
  --at-color-on-accent:     #0A0B14;  /* label on magenta: 6.33:1 */
  --at-color-primary-hover: #5CEBFF;  /* label on it: 13.80:1 */
  --at-color-accent-hover:  #FF66D6;  /* label on it: 7.59:1 */
  --at-color-primary-soft:  rgba(34, 228, 255, 0.10);
  --at-color-accent-soft:   rgba(255, 61, 203, 0.10);
  --at-color-border:        #262B47;  /* decorative dividers only (1.42:1, not for inputs) */
  --at-color-border-strong: #69729A;  /* input/control borders: 4.18:1 on bg, 3.78:1 on surface */
  --at-color-success:       #3DDC97;  /* 11.10:1 */
  --at-color-warning:       #FFC857;  /* 12.75:1 */
  --at-color-error:         #FF6B81;  /* 7.16:1 (6.48 on surface, 5.84 on surface-2) */
  --at-color-overlay:       rgba(10, 11, 20, 0.86);
  --at-color-grid-line:     rgba(138, 147, 184, 0.07);

  /* Focus ring: cyan outline (12.71:1 vs bg) with a bg-colored halo so it also shows on cyan buttons */
  --at-focus-color: #22E4FF;
  --at-focus-halo:  #0A0B14;
  --at-focus-width: 3px;
  --at-focus-offset: 2px;
  --at-focus-ring: 0 0 0 var(--at-focus-offset) var(--at-focus-halo), 0 0 0 calc(var(--at-focus-offset) + var(--at-focus-width)) var(--at-focus-color);

  /* Gradients */
  --at-gradient-signal:  linear-gradient(90deg, #22E4FF 0%, #FF3DCB 100%);           /* trend line, headline accent */
  --at-gradient-signal-diag: linear-gradient(45deg, #22E4FF 0%, #B55BF0 60%, #FF3DCB 100%);
  --at-gradient-area:    linear-gradient(180deg, rgba(34, 228, 255, 0.28) 0%, rgba(34, 228, 255, 0) 100%);
  --at-gradient-panel:   linear-gradient(180deg, rgba(20, 23, 41, 0.95) 0%, rgba(20, 23, 41, 0.75) 100%);
  --at-gradient-page:    radial-gradient(900px 500px at 85% 0%, rgba(34, 228, 255, 0.10), transparent),
                         radial-gradient(700px 500px at 0% 100%, rgba(255, 61, 203, 0.08), transparent);

  /* Glows and shadows */
  --at-glow-primary:    0 0 40px rgba(34, 228, 255, 0.45);
  --at-glow-primary-sm: 0 0 16px rgba(34, 228, 255, 0.40);
  --at-glow-accent:     0 0 30px rgba(255, 61, 203, 0.35);
  --at-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --at-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --at-shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* ---------- 4. Typography ---------- */
  --at-font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --at-font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --at-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type scale, from 360px to 1280px viewports */
  --at-text-xs:   0.75rem;                                  /* 12px  mono labels, legal */
  --at-text-sm:   0.875rem;                                 /* 14px  meta, hints, chips */
  --at-text-base: 1rem;                                     /* 16px  body */
  --at-text-lg:   clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);  /* 17-20px lede */
  --at-text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);   /* 20-24px h3 */
  --at-text-2xl:  clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);   /* 24-36px h2 */
  --at-text-3xl:  clamp(2rem, 1.4rem + 2.6vw, 3.25rem);     /* 32-52px page h1 */
  --at-text-hero: clamp(2.375rem, 1.5rem + 4vw, 4.75rem);   /* 38-76px home hero */
  --at-weight-regular: 400;
  --at-weight-medium: 500;
  --at-weight-semibold: 600;
  --at-weight-bold: 700;
  --at-leading-tight: 1.05;    /* hero/display */
  --at-leading-snug: 1.2;      /* headings */
  --at-leading-base: 1.6;      /* body */
  --at-tracking-display: -0.035em;
  --at-tracking-heading: -0.02em;
  --at-tracking-label: 0.12em; /* uppercase mono labels */

  /* ---------- 5. Spacing (4px base) and layout ---------- */
  --at-space-1: 0.25rem;  /* 4  */
  --at-space-2: 0.5rem;   /* 8  */
  --at-space-3: 0.75rem;  /* 12 */
  --at-space-4: 1rem;     /* 16 */
  --at-space-5: 1.5rem;   /* 24 */
  --at-space-6: 2rem;     /* 32 */
  --at-space-7: 3rem;     /* 48 */
  --at-space-8: 4.5rem;   /* 72 */
  --at-space-9: 6rem;     /* 96 */
  --at-content-max: 75rem;  /* 1200px */
  --at-gutter: clamp(1rem, 0.5rem + 2.5vw, 4.5rem); /* 16px at 360 to 72px at 1280+ */
  --at-header-height: 4.5rem;
  --at-tap-min: 44px;

  /* ---------- 6. Radii ---------- */
  --at-radius-sm: 0.5rem;    /* 8  chips, inputs */
  --at-radius-md: 0.875rem;  /* 14 buttons */
  --at-radius-lg: 1.5rem;    /* 24 cards, panels */
  --at-radius-pill: 999px;

  /* ---------- 7. Motion ---------- */
  --at-duration-instant: 100ms;
  --at-duration-fast: 160ms;   /* hover, press */
  --at-duration-base: 320ms;   /* menus, reveals */
  --at-duration-slow: 600ms;   /* section reveals */
  --at-duration-draw: 1400ms;  /* hero trend-line draw */
  --at-duration-ambient: 18s;  /* glow drift loop */
  --at-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --at-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --at-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --at-hover-lift: -4px;
  --at-reveal-shift: 24px;

  /* ---------- 8. Z-index ---------- */
  --at-z-header: 50;
  --at-z-menu: 60;
  --at-z-skip: 100;
}

/* Reduced motion: no movement, no loops. Opacity fades of 1ms keep JS transitionend handlers working. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --at-duration-instant: 1ms;
    --at-duration-fast: 1ms;
    --at-duration-base: 1ms;
    --at-duration-slow: 1ms;
    --at-duration-draw: 1ms;
    --at-duration-ambient: 0s;
    --at-hover-lift: 0px;
    --at-reveal-shift: 0px;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 9. Scaffold compatibility (Frontend Dev's /workspace/aitrendz/site/assets/styles.css) ----------
   Load order does not matter (see the selector below). The cleanest option is to replace the scaffold's :root and dark-mode blocks with this file.
   Neon Pulse is dark-only, so the scaffold's light defaults and its prefers-color-scheme block are both replaced. */
html:root { /* (0,1,1) specificity, so it beats the scaffold's :root and its dark-mode :root whatever the load order */
  --color-bg: var(--at-color-bg);
  --color-surface: var(--at-color-surface);
  --color-surface-2: var(--at-color-surface-2);
  --color-border: var(--at-color-border-strong);   /* scaffold uses it on inputs and cards, so it uses the 3:1-safe border */
  --color-text: var(--at-color-text);
  --color-text-muted: var(--at-color-muted);
  --color-accent: var(--at-color-primary);         /* scaffold "accent" = main action color = brand primary (cyan) */
  --color-accent-strong: var(--at-color-primary);  /* links: 12.71:1 */
  --color-on-accent: var(--at-color-on-primary);
  --color-accent-soft: var(--at-color-primary-soft);
  --color-glow-1: rgba(34, 228, 255, 0.16);
  --color-glow-2: rgba(255, 61, 203, 0.16);
  --color-glow-3: rgba(181, 91, 240, 0.12);
  --color-grid-line: var(--at-color-grid-line);
  --color-note-bg: rgba(255, 200, 87, 0.10);
  --color-note-border: var(--at-color-warning);
  --color-note-text: #FFE3A6;                      /* 15.68:1 on bg */
  --color-error: var(--at-color-error);
  --color-success: var(--at-color-success);
  --color-placeholder-bg: var(--at-color-surface-2);
  --color-placeholder-text: #B7C0E0;               /* 8.86:1 on surface-2 */
  --color-focus: var(--at-focus-color);
  --color-focus-halo: var(--at-focus-halo);
  --color-overlay: var(--at-color-overlay);
  --font-sans: var(--at-font-sans);
  --font-mono: var(--at-font-mono);
  --font-size-sm: var(--at-text-sm);
  --font-size-base: var(--at-text-base);
  --font-size-lg: var(--at-text-lg);
  --font-size-xl: var(--at-text-xl);
  --font-size-2xl: var(--at-text-2xl);
  --font-size-hero: var(--at-text-hero);
  --font-weight-normal: var(--at-weight-regular);
  --font-weight-bold: var(--at-weight-bold);
  --font-weight-black: var(--at-weight-bold);      /* Space Grotesk tops out at 700 */
  --line-height-tight: var(--at-leading-snug);
  --line-height-base: var(--at-leading-base);
  --space-1: var(--at-space-1); --space-2: var(--at-space-2); --space-3: var(--at-space-3); --space-4: var(--at-space-4);
  --space-5: var(--at-space-5); --space-6: var(--at-space-6); --space-7: var(--at-space-7); --space-8: var(--at-space-8);
  --content-max: var(--at-content-max);
  --header-height: var(--at-header-height);
  --radius-sm: var(--at-radius-sm);
  --radius-md: var(--at-radius-md);
  --radius-lg: var(--at-radius-lg);
  --radius-pill: var(--at-radius-pill);
  --shadow-sm: var(--at-shadow-sm);
  --shadow-lg: var(--at-shadow-md);
  --duration-fast: var(--at-duration-fast);
  --duration-base: var(--at-duration-slow);
  --duration-hero: var(--at-duration-ambient);
  --easing: var(--at-ease-out);
  --reveal-shift: var(--at-reveal-shift);
  --hover-lift: var(--at-hover-lift);
  --focus-width: var(--at-focus-width);
}