/* TAMAX design tokens
   Single source of truth for colour, type, spacing, radii, shadows and motion. */

:root {
  /* Brand colour.
     Sampled from the TAMAX.tech logo, whose gradient runs from a deep blue at
     the bottom left to a bright cyan at the top right. There is no green in
     the mark, so the old turquoise is now --tx-sky: the same role, the logo's
     own highlight colour. */
  --tx-black: #000000;
  --tx-midnight: #04101f;
  --tx-navy: #072a54;
  --tx-navy-600: #0b3a70;
  --tx-deep: #012e6a;
  --tx-blue: #0b7bd0;
  --tx-blue-700: #075ba8;
  --tx-cyan: #29b8ee;
  --tx-cyan-700: #0e6e93;
  --tx-sky: #56d9f9;
  --tx-sky-700: #1f7fa8;

  /* The logo gradient itself, for anything that should read as the mark. */
  --tx-brand-gradient: linear-gradient(135deg, #012e6a 0%, #0b6fc8 52%, #56d9f9 100%);

  /* Surfaces.
     Dark-by-default: these used to be light-mode primitives read directly
     by chrome components (header nav, footer, .tx-toc, .tx-prose) that
     never went through the .tx-on-dark semantic layer. Flipping the
     primitives themselves, rather than only the semantic tokens below,
     is what makes every page dark without hunting down each component. */
  --tx-white: #ffffff;
  --tx-bg: #081b32;
  --tx-bg-2: #0a2340;
  --tx-border: rgba(148, 195, 226, 0.16);
  --tx-border-strong: rgba(148, 195, 226, 0.32);
  --tx-blue-100: rgba(41, 184, 238, 0.12);

  /* Text */
  --tx-ink: #eaf4fb;
  --tx-muted: #a7bed2;
  --tx-on-dark: #eaf4fb;
  --tx-on-dark-muted: #a7bed2;

  /* Status */
  --tx-success: #56d9f9;
  --tx-success-bg: rgba(86, 217, 249, 0.12);
  --tx-danger: #ff6b6b;
  --tx-danger-bg: rgba(255, 107, 107, 0.12);
  --tx-warning-bg: rgba(240, 180, 70, 0.14);
  --tx-warning-border: rgba(240, 180, 70, 0.4);

  /* Typography */
  --tx-font-sans: "Manrope", "Inter", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --tx-font-display: "Space Grotesk", "Sora", "Manrope", ui-sans-serif, system-ui,
    -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tx-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Fluid type scale (mobile first, clamps to desktop) */
  --tx-fs-xs: 0.8125rem;
  --tx-fs-sm: 0.9063rem;
  --tx-fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --tx-fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --tx-fs-xl: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --tx-fs-h4: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --tx-fs-h3: clamp(1.3125rem, 1.15rem + 0.75vw, 1.625rem);
  --tx-fs-h2: clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);
  --tx-fs-h1: clamp(2rem, 1.45rem + 2.75vw, 3.75rem);
  --tx-fs-display: clamp(2.25rem, 1.5rem + 3.5vw, 4.25rem);

  --tx-lh-tight: 1.08;
  --tx-lh-snug: 1.25;
  --tx-lh-body: 1.65;

  /* Spacing scale */
  --tx-1: 0.25rem;
  --tx-2: 0.5rem;
  --tx-3: 0.75rem;
  --tx-4: 1rem;
  --tx-5: 1.5rem;
  --tx-6: 2rem;
  --tx-7: 2.5rem;
  --tx-8: 3rem;
  --tx-9: 4rem;
  --tx-10: 5rem;
  --tx-section: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* Layout */
  --tx-container: 92rem;
  --tx-container-narrow: 48rem;
  --tx-gutter: clamp(1.125rem, 0.75rem + 2vw, 2.5rem);
  --tx-header-h: 3.75rem;

  /* Radii */
  --tx-r-sm: 6px;
  --tx-r: 12px;
  --tx-r-lg: 18px;
  --tx-r-xl: 26px;
  --tx-r-pill: 999px;

  /* Elevation */
  --tx-shadow-sm: 0 1px 2px rgba(12, 27, 42, 0.06), 0 1px 3px rgba(12, 27, 42, 0.04);
  --tx-shadow: 0 4px 12px rgba(7, 42, 84, 0.07), 0 1px 3px rgba(7, 42, 84, 0.05);
  --tx-shadow-lg: 0 18px 48px rgba(7, 42, 84, 0.12), 0 4px 12px rgba(7, 42, 84, 0.06);
  --tx-shadow-glow: 0 0 0 1px rgba(41, 184, 238, 0.25), 0 12px 40px rgba(11, 123, 208, 0.22);

  /* Focus */
  --tx-focus: 3px solid var(--tx-cyan);
  --tx-focus-offset: 3px;

  /* Motion */
  --tx-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --tx-dur-fast: 140ms;
  --tx-dur: 240ms;
  --tx-dur-slow: 420ms;
}

/* Dark surface context: components inside re-map their local colours. */
.tx-on-dark {
  --tx-surface: rgba(255, 255, 255, 0.045);
  --tx-surface-border: rgba(148, 195, 226, 0.22);
  --tx-text: var(--tx-on-dark);
  --tx-text-muted: var(--tx-on-dark-muted);
  --tx-accent: var(--tx-cyan);
  --tx-focus: 3px solid var(--tx-cyan);
}

.tx-on-light {
  --tx-surface: var(--tx-white);
  --tx-surface-border: var(--tx-border);
  --tx-text: var(--tx-ink);
  --tx-text-muted: var(--tx-muted);
  --tx-accent: var(--tx-blue);
}

:root {
  --tx-surface: rgba(255, 255, 255, 0.045);
  --tx-surface-border: rgba(148, 195, 226, 0.18);
  --tx-text: var(--tx-ink);
  --tx-text-muted: var(--tx-muted);
  --tx-accent: var(--tx-cyan);
}