/*
 * ════════════════════════════════════════════════════════════════════════
 * ANALOXIA - Design Tokens  ·  v1.0
 * Foundation CSS custom properties for analoxia.com
 * ════════════════════════════════════════════════════════════════════════
 *
 * Usage:  Import once, before any component styles.
 *   <link rel="stylesheet" href="/design/tokens/tokens.css">
 *
 * Tailwind 4 integration:  map these vars under @theme in your app.css.
 * Self-hosting:  uncomment the @font-face block below and ship the .woff2
 *   files via Bunny CDN. NO Google Fonts CDN in production.
 *
 * Sections:
 *   1. Brand core            7. Border radii
 *   2. Light mode            8. Shadows
 *   3. Dark mode             9. Motion
 *   4. Semantic colors      10. Z-index
 *   5. Typography           11. Layout / containers
 *   6. Spacing              12. Breakpoints (reference)
 *   + Global base styles, reduced-motion, dark-mode class
 * ════════════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────────────
 * SELF-HOSTED FONTS  (production - uncomment & point at your Bunny CDN paths)
 * Display: Inter Tight 700/800 · Body: Inter 400/500/600 · Mono: Geist Mono 400/500
 * ──────────────────────────────────────────────────────────────────────── */
/*
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/inter-regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/inter-medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/inter-semibold.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/inter-tight-bold.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/inter-tight-extrabold.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/geist-mono-regular.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/geist-mono-medium.woff2") format("woff2"); }
*/


:root {
  /* ═════════════════════════════════════════════════════════════════════
   * 1. BRAND CORE
   * ═════════════════════════════════════════════════════════════════════ */

  --brand-blue:           #3B82F6;   /* primary brand, links, info */
  --brand-blue-hover:     #2563EB;
  --brand-blue-light:     #DBEAFE;

  --brand-purple:         #7C3AED;   /* primary CTA, gradient endpoint */
  --brand-purple-hover:   #6D28D9;
  --brand-purple-light:   #EDE9FE;

  --brand-glow:           #A78BFA;   /* low-opacity radial for hero atmosphere */

  --brand-gradient:       linear-gradient(135deg, #3B82F6 0%, #7C3AED 100%);
  --brand-gradient-soft:  linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 100%);

  /* ═════════════════════════════════════════════════════════════════════
   * 2. LIGHT MODE  (primary surface)
   * ═════════════════════════════════════════════════════════════════════ */

  --bg:                   #FFFFFF;
  --bg-subtle:            #F8FAFC;   /* slate-50 - section alternates */
  --bg-card:              #FFFFFF;
  --bg-elevated:          #FFFFFF;

  --text-primary:         #0F172A;   /* slate-900 */
  --text-secondary:       #475569;   /* slate-600 */
  --text-tertiary:        #94A3B8;   /* slate-400 */
  --text-disabled:        #CBD5E1;   /* slate-300 */
  --text-inverse:         #FFFFFF;

  --border-subtle:        #E2E8F0;   /* slate-200 */
  --border-default:       #CBD5E1;   /* slate-300 */
  --border-strong:        #94A3B8;   /* slate-400 */

  /* ═════════════════════════════════════════════════════════════════════
   * 3. DARK MODE  (hero bands + optional app dark toggle)
   * ═════════════════════════════════════════════════════════════════════ */

  --bg-dark:              #0A0B14;   /* near-black, blue cast */
  --surface-dark-1:       #11131F;   /* cards on dark */
  --surface-dark-2:       #1A1C2B;   /* elevated cards on dark */

  --text-on-dark:         #F5F6FA;
  --text-mid-dark:        #A1A6B8;
  --text-low-dark:        #7E839A;

  --border-dark:          #262838;
  --border-dark-strong:   #3D4053;

  --surface-dark-3:       #232539;            /* hover for solid on-dark controls */
  --border-on-dark:       rgb(255 255 255 / 0.28);  /* hairline on dark hero bands */
  --border-on-dark-hover: rgb(255 255 255 / 0.50);
  --overlay-on-dark:      rgb(255 255 255 / 0.10);   /* hover wash on dark */

  /* ═════════════════════════════════════════════════════════════════════
   * 4. SEMANTIC COLORS  (foreground / bg / text triplets)
   * ═════════════════════════════════════════════════════════════════════ */

  --color-success:        #10B981;   /* emerald-500 */
  --color-success-bg:     #D1FAE5;
  --color-success-text:   #047857;

  --color-warning:        #F59E0B;   /* amber-500 */
  --color-warning-bg:     #FEF3C7;
  --color-warning-text:   #B45309;

  --color-danger:         #EF4444;   /* red-500 */
  --color-danger-bg:      #FEE2E2;
  --color-danger-text:    #B91C1C;

  --color-info:           #3B82F6;   /* == brand-blue */
  --color-info-bg:        #DBEAFE;
  --color-info-text:      #1E40AF;

  /* ═════════════════════════════════════════════════════════════════════
   * 5. TYPOGRAPHY
   * ═════════════════════════════════════════════════════════════════════ */

  --font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Type scale - mobile defaults (overridden ≥768px below) */
  --text-display:   40px;
  --text-h1:        32px;
  --text-h2:        24px;
  --text-h3:        20px;
  --text-h4:        18px;
  --text-body-lg:   18px;
  --text-body:      16px;
  --text-body-sm:   14px;
  --text-caption:   12px;
  --text-button:    15px;
  --text-stat:      56px;

  /* Weights */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-black:     800;

  /* Line heights */
  --leading-tight:    1.1;   /* display headings */
  --leading-snug:     1.3;   /* h2–h4 */
  --leading-normal:   1.5;
  --leading-relaxed:  1.6;   /* body */
  --leading-loose:    1.7;   /* long-form reading */

  /* Letter spacing / tracking */
  --tracking-tighter: -0.04em; /* big mono stat numbers */
  --tracking-tight:   -0.02em; /* h1–h3 */
  --tracking-snug:    -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;  /* caption / eyebrow ALL CAPS */
  --tracking-wider:   0.08em;

  /* ═════════════════════════════════════════════════════════════════════
   * 6. SPACING  (4px base unit)
   * ═════════════════════════════════════════════════════════════════════ */

  --space-0:    0;
  --space-px:   1px;
  --space-0_5:  2px;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;
  --space-32:   128px;
  --space-40:   160px;
  --space-48:   192px;
  --space-64:   256px;

  /* ═════════════════════════════════════════════════════════════════════
   * 7. BORDER RADII
   * ═════════════════════════════════════════════════════════════════════ */

  --radius-0:     0;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-full:  9999px;

  /* ═════════════════════════════════════════════════════════════════════
   * 8. SHADOWS  (subtle, never dramatic)
   * ═════════════════════════════════════════════════════════════════════ */

  --shadow-none: none;
  --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:   0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.06);
  --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.06);

  --shadow-focus-ring: 0 0 0 3px rgb(59 130 246 / 0.20);

  /* ═════════════════════════════════════════════════════════════════════
   * 9. MOTION  (CSS-only, < 300ms; no scroll-jack, no parallax)
   * ═════════════════════════════════════════════════════════════════════ */

  --duration-fast:  150ms;
  --duration-base:  200ms;
  --duration-slow:  300ms;
  --duration-deep:  500ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);

  /* ═════════════════════════════════════════════════════════════════════
   * 10. Z-INDEX SCALE
   * ═════════════════════════════════════════════════════════════════════ */

  --z-base:            0;
  --z-dropdown:        10;
  --z-sticky:          20;
  --z-fixed:           30;
  --z-modal-backdrop:  40;
  --z-modal:           50;
  --z-popover:         60;
  --z-toast:           70;
  --z-tooltip:         80;

  /* ═════════════════════════════════════════════════════════════════════
   * 11. LAYOUT / CONTAINERS
   * ═════════════════════════════════════════════════════════════════════ */

  --container-sm:    640px;
  --container-md:    768px;
  --container-lg:    1024px;
  --container-xl:    1280px;   /* full content max-width */
  --container-2xl:   1536px;
  --container-prose: 720px;    /* long-form line length */

  /* ═════════════════════════════════════════════════════════════════════
   * 12. BREAKPOINTS  (reference - also hard-coded in @media below)
   * ═════════════════════════════════════════════════════════════════════ */

  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;
}


/* ════════════════════════════════════════════════════════════════════════
 * DESKTOP TYPE SCALE OVERRIDES  (≥768px)
 * ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  :root {
    --text-display: 72px;
    --text-h1:      56px;
    --text-h2:      40px;
    --text-h3:      28px;
    --text-h4:      22px;
    --text-body-lg: 20px;
    --text-body:    17px;
    --text-body-sm: 14px;
    --text-caption: 13px;
    --text-button:  16px;
    --text-stat:    96px;
  }
}

/* Largest display headlines on wide viewports */
@media (min-width: 1280px) {
  :root { --text-display: 80px; }
}


/* ════════════════════════════════════════════════════════════════════════
 * GLOBAL BASE STYLES
 * ════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body { margin: 0; min-height: 100vh; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--text-primary);
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); font-weight: var(--weight-black); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--text-h4); font-weight: var(--weight-semibold); }

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--brand-blue);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--brand-blue-hover); text-decoration: underline; }
a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
  border-radius: var(--radius-sm);
}

button { font-family: inherit; cursor: pointer; }

img, svg { display: block; max-width: 100%; height: auto; }

::selection { background: var(--brand-purple-light); color: var(--text-primary); }


/* ════════════════════════════════════════════════════════════════════════
 * TOKEN-DRIVEN UTILITIES  (minimal - lean on Tailwind for the rest)
 * ════════════════════════════════════════════════════════════════════════ */

/* Gradient text accent - use ONCE per page (H1 fragment) + on stat numbers */
.ax-gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Eyebrow / kicker label */
.ax-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--brand-purple);
}

/* Mono stat number */
.ax-stat {
  font-family: var(--font-mono);
  font-size: var(--text-stat);
  font-weight: var(--weight-black);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
}


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


/* ════════════════════════════════════════════════════════════════════════
 * DARK MODE
 * Marketing site uses dual-mode via section classes (dark hero bands).
 * App dashboard uses .theme-dark on <html>, or .theme-auto to follow OS.
 * ════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root.theme-auto {
    --bg:             var(--bg-dark);
    --bg-subtle:      var(--surface-dark-1);
    --bg-card:        var(--surface-dark-1);
    --bg-elevated:    var(--surface-dark-2);
    --text-primary:   var(--text-on-dark);
    --text-secondary: var(--text-mid-dark);
    --text-tertiary:  var(--text-low-dark);
    --border-subtle:  var(--border-dark);
    --border-default: var(--border-dark);
    --border-strong:  var(--border-dark-strong);
  }
}

.theme-dark {
  --bg:             var(--bg-dark);
  --bg-subtle:      var(--surface-dark-1);
  --bg-card:        var(--surface-dark-1);
  --bg-elevated:    var(--surface-dark-2);
  --text-primary:   var(--text-on-dark);
  --text-secondary: var(--text-mid-dark);
  --text-tertiary:  var(--text-low-dark);
  --border-subtle:  var(--border-dark);
  --border-default: var(--border-dark);
  --border-strong:  var(--border-dark-strong);
}