/* ==========================================================================
   RootCoreX — base.css
   Design tokens, reset, typography primitives and utilities.

   Loaded FIRST, before every other stylesheet. Contains no component styles.

   Cascade layers are declared here once, in priority order, so that later
   files can append to a layer without ever fighting specificity:
     tokens      → custom properties only
     reset       → normalisation
     base        → bare element styling
     layout      → containers, sections, grids
     components  → components.css
     utilities   → single-purpose overrides (always win)

   Self-hosted variable fonts are expected at /assets/fonts/. See README for
   the exact subset command used to generate them.
   ========================================================================== */

@layer tokens, reset, base, layout, components, utilities;

/* ==========================================================================
   FONTS
   Variable woff2, latin subset, font-display:swap.
   size-adjust + metric overrides on the fallback keep CLS at 0 during swap.
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-variable.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2212;
}

/* Metric-matched fallback — prevents layout shift before the webfont lands. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

/* ==========================================================================
   TOKENS
   ========================================================================== */

@layer tokens {
  :root {
    /* ---- Colour: raw brand values ------------------------------------- */
    --rcx-black: #050505;
    --rcx-surface: #111111;
    --rcx-card: #161616;
    --rcx-elevated: #1c1c1c;
    --rcx-white: #ffffff;
    --rcx-grey: #9b9b9b;
    --rcx-accent: #76ff03;

    /* Accent channel, so tints can be composed without hardcoding rgba. */
    --rcx-accent-rgb: 118 255 3;

    /* ---- Colour: semantic roles --------------------------------------- */
    --color-bg: var(--rcx-black);
    --color-bg-surface: var(--rcx-surface);
    --color-bg-card: var(--rcx-card);
    --color-bg-elevated: var(--rcx-elevated);

    --color-text: var(--rcx-white);
    --color-text-muted: var(--rcx-grey);
    --color-text-faint: #6b6b6b;
    --color-text-inverse: var(--rcx-black);

    --color-accent: var(--rcx-accent);
    --color-accent-soft: rgb(var(--rcx-accent-rgb) / 0.16);
    --color-accent-faint: rgb(var(--rcx-accent-rgb) / 0.08);
    --color-accent-glow: rgb(var(--rcx-accent-rgb) / 0.28);

    --color-border: rgb(255 255 255 / 0.08);
    --color-border-strong: rgb(255 255 255 / 0.14);
    --color-border-accent: rgb(var(--rcx-accent-rgb) / 0.36);

    /* Status — deliberately desaturated so they never compete with accent. */
    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --color-danger: #f87171;
    --color-info: #60a5fa;

    /* ---- Typography ---------------------------------------------------- */
    --font-display: "Space Grotesk", "Inter Fallback", system-ui, sans-serif;
    --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Fluid scale — 320px floor, 1440px ceiling, 1.25/1.333 ratio. */
    --text-xs: clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem);
    --text-sm: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
    --text-base: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem);
    --text-md: clamp(1rem, 0.96rem + 0.21vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1.06rem + 0.32vw, 1.375rem);
    --text-xl: clamp(1.375rem, 1.24rem + 0.63vw, 1.75rem);
    --text-2xl: clamp(1.625rem, 1.4rem + 1.07vw, 2.25rem);
    --text-3xl: clamp(2rem, 1.6rem + 1.96vw, 3rem);
    --text-4xl: clamp(2.5rem, 1.86rem + 3.04vw, 4rem);
    --text-5xl: clamp(3rem, 1.98rem + 4.82vw, 5.5rem);

    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --leading-none: 1;
    --leading-tight: 1.12;
    --leading-snug: 1.28;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    --tracking-tighter: -0.04em;
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
    --tracking-widest: 0.14em;

    /* ---- Spacing: 4px base -------------------------------------------- */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;

    /* Vertical rhythm between page sections — fluid, single source. */
    --section-gap: clamp(4rem, 2.4rem + 8vw, 9rem);
    --section-gap-sm: clamp(2.5rem, 1.7rem + 4vw, 5rem);

    /* ---- Layout -------------------------------------------------------- */
    --container-max: 76rem;      /* 1216px — Stripe-ish comfortable measure */
    --container-wide: 88rem;     /* 1408px — full-bleed feature sections    */
    --container-narrow: 46rem;   /* 736px  — prose, docs, legal             */
    --container-pad: clamp(1.25rem, 0.9rem + 1.75vw, 2.5rem);
    --measure: 68ch;

    --header-height: 4.5rem;

    /* ---- Radii --------------------------------------------------------- */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 26px;
    --radius-full: 999px;

    /* ---- Elevation ----------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.6);
    --shadow-lg: 0 24px 60px -20px rgb(0 0 0 / 0.75);
    --shadow-glow: 0 0 0 1px var(--color-border-accent),
      0 0 32px -6px var(--color-accent-glow);

    /* ---- Motion -------------------------------------------------------- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-fast: 140ms;
    --duration-base: 240ms;
    --duration-slow: 480ms;
    --duration-slower: 800ms;

    /* ---- Depth ordering ------------------------------------------------ */
    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 100;
    --z-header: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
  }

  /* Honour an explicit light-scheme request only for form controls and
     scrollbars; the brand is dark-only by design. */
  :root {
    color-scheme: dark;
  }
}

/* ==========================================================================
   RESET
   ========================================================================== */

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

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchors clear the fixed header. */
    scroll-padding-top: calc(var(--header-height) + var(--space-lg));
    tab-size: 2;
  }

  body {
    min-height: 100svh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  img,
  video {
    height: auto;
  }

  svg {
    fill: currentColor;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  ul[role="list"],
  ol[role="list"] {
    list-style: none;
    padding: 0;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  /* Anything the author didn't opt into animating stays still. */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ==========================================================================
   BASE ELEMENTS
   ========================================================================== */

@layer base {
  body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
    font-feature-settings: "cv11", "ss01";
    font-variant-ligatures: contextual;
    /* Prevents horizontal scroll from glow/blur decorations. */
    overflow-x: clip;
  }

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

  h1 {
    font-size: var(--text-4xl);
    letter-spacing: var(--tracking-tighter);
  }
  h2 {
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-tighter);
  }
  h3 {
    font-size: var(--text-xl);
  }
  h4 {
    font-size: var(--text-lg);
  }
  h5,
  h6 {
    font-size: var(--text-md);
  }

  p {
    text-wrap: pretty;
  }

  a {
    color: inherit;
    text-decoration-color: rgb(255 255 255 / 0.28);
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
    transition: color var(--duration-fast) var(--ease-out),
      text-decoration-color var(--duration-fast) var(--ease-out);
  }

  a:hover {
    color: var(--color-accent);
    text-decoration-color: currentColor;
  }

  strong,
  b {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
  }

  small {
    font-size: var(--text-sm);
  }

  code,
  kbd,
  samp,
  pre {
    font-family: var(--font-mono);
    font-size: 0.92em;
    font-variant-ligatures: none;
  }

  :not(pre) > code {
    padding: 0.15em 0.4em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    background-color: var(--color-bg-surface);
    color: var(--color-accent);
  }

  pre {
    overflow-x: auto;
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-surface);
    line-height: var(--leading-snug);
  }

  blockquote {
    padding-left: var(--space-lg);
    border-left: 2px solid var(--color-accent);
    color: var(--color-text-muted);
  }

  hr {
    height: 1px;
    border: 0;
    background-color: var(--color-border);
  }

  figcaption {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  /* ---- Focus -----------------------------------------------------------
     Keyboard-only ring. Never removed, never colour-only. */
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

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

  /* ---- Scrollbar ------------------------------------------------------- */
  @supports (scrollbar-width: thin) {
    html {
      scrollbar-width: thin;
      scrollbar-color: #2a2a2a transparent;
    }
  }

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #2a2a2a;
    border: 3px solid var(--color-bg);
    border-radius: var(--radius-full);
  }
  ::-webkit-scrollbar-thumb:hover {
    background-color: #3d3d3d;
  }

  /* ---- Windows High Contrast ------------------------------------------- */
  @media (forced-colors: active) {
    :focus-visible {
      outline-color: Highlight;
    }
  }
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

@layer layout {
  .container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .container--wide {
    max-width: var(--container-wide);
  }

  .container--narrow {
    max-width: var(--container-narrow);
  }

  /* Section owns its own vertical rhythm — never set margins on children. */
  .section {
    position: relative;
    padding-block: var(--section-gap);
  }

  .section--tight {
    padding-block: var(--section-gap-sm);
  }

  .section--flush-top {
    padding-block-start: 0;
  }

  .section--flush-bottom {
    padding-block-end: 0;
  }

  .section--surface {
    background-color: var(--color-bg-surface);
  }

  /* Hairline divider that fades at both ends. */
  .section--divided::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: var(--container-pad);
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--color-border-strong) 22%,
      var(--color-border-strong) 78%,
      transparent
    );
  }

  /* Vertical stack with a single controllable gap. */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-md));
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-md));
  }

  /* Auto-fitting grid. Set --grid-min per usage; defaults to 3-up at 1216px. */
  .grid-auto {
    display: grid;
    gap: var(--grid-gap, var(--space-lg));
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(var(--grid-min, 20rem), 100%), 1fr)
    );
  }

  .prose {
    max-width: var(--measure);
  }

  .prose > * + * {
    margin-block-start: var(--space-md);
  }

  .prose > * + :is(h2, h3, h4) {
    margin-block-start: var(--space-2xl);
  }

  .prose :is(h2, h3, h4) + * {
    margin-block-start: var(--space-sm);
  }

  .prose p,
  .prose li {
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
  }

  .prose :is(ul, ol) {
    padding-inline-start: var(--space-lg);
  }

  .prose li + li {
    margin-block-start: var(--space-xs);
  }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

@layer utilities {
  /* ---- Accessibility ---------------------------------------------------- */

  /* Screen-reader-only, still focusable when needed. */
  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: absolute;
    inset-block-start: var(--space-xs);
    inset-inline-start: var(--space-xs);
    z-index: var(--z-toast);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transform: translateY(calc(-100% - var(--space-md)));
    transition: transform var(--duration-base) var(--ease-out);
  }

  .skip-link:focus-visible {
    transform: translateY(0);
  }

  /* ---- Typography ------------------------------------------------------- */

  .text-display {
    font-family: var(--font-display);
  }
  .text-mono {
    font-family: var(--font-mono);
  }
  .text-muted {
    color: var(--color-text-muted);
  }
  .text-faint {
    color: var(--color-text-faint);
  }
  .text-accent {
    color: var(--color-accent);
  }
  .text-balance {
    text-wrap: balance;
  }
  .text-center {
    text-align: center;
  }

  .lead {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--color-text-muted);
    max-width: 58ch;
  }

  /* Section eyebrow — encodes the section's category, not decoration. */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-accent);
  }

  .eyebrow::before {
    content: "";
    inline-size: 1.5rem;
    block-size: 1px;
    background-color: currentColor;
  }

  /* ---- Visibility ------------------------------------------------------- */

  .hide-mobile {
    display: none;
  }

  @media (width >= 48rem) {
    .hide-mobile {
      display: revert;
    }
    .hide-desktop {
      display: none;
    }
  }

  /* ---- Scroll reveal ---------------------------------------------------
     JS adds .is-revealed via IntersectionObserver (see main.js).
     Without JS the content is visible by default — progressive enhancement.
     --reveal-delay staggers siblings.                                    */

  .js .reveal {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
    transition: opacity var(--duration-slow) var(--ease-out),
      transform var(--duration-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }

  .js .reveal.is-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .js .reveal {
      opacity: 1;
      transform: none;
    }
  }

  /* ---- Decoration ------------------------------------------------------- */

  /* Ambient accent bloom. Pointer-events off; purely atmospheric. */
  .glow {
    position: absolute;
    z-index: var(--z-base);
    pointer-events: none;
    border-radius: var(--radius-full);
    background: radial-gradient(
      circle,
      var(--color-accent-glow) 0%,
      transparent 68%
    );
    filter: blur(64px);
    opacity: 0.55;
  }

  .no-scroll {
    overflow: hidden;
  }
}