/* =========================================================================
   motosh.dev — core layer
   Shared foundation for BOTH layouts (desktop.css / mobile.css).
   Owns: cascade layers, token extensions, reset, base type, primitives,
   the motion contract and utilities. Owns NO page layout.
   Design system: design-system/DESIGN.md (xAI — warm cream laboratory).
   ========================================================================= */

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

/* -------------------------------------------------------------------------
   TOKENS — extensions on top of design-system/variables.css
   Three deliberate extensions to the published system, and nothing else:
   1. fluid display type : three clamps the fixed eight-step scale cannot
                           express (the system tops out at 72px and has no
                           responsive story) — all three are auditable
   2. motion tokens      : the system documents no easing/duration scale
   3. --ink-* aliases    : semantic names over the raw palette
   No new radii. No new hues. No new surfaces.
   ---------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* Semantic ink */
    --ink: var(--color-jet-ink);
    --ink-2: var(--color-steel);
    --ink-3: var(--color-fog);
    --ink-4: var(--color-pewter);
    --line: var(--color-dove);
    --line-soft: color-mix(in srgb, var(--color-dove) 62%, transparent);

    /* Documented type extensions.
       The published scale is eight fixed steps, which cannot express fluid
       display type across a 375px phone and a 1440px desktop. Rather than
       scattering ad-hoc clamps through two stylesheets, display sizing is
       centralised into exactly three fluid tokens — used by BOTH layouts,
       and recognised by the inspector, so they are auditable like any other
       token instead of hiding as magic numbers.
         xl   — the home hero lockup      52 → 120
         lg   — case-page titles          40 → 72
         sect — every section headline    30 → 60 (ends on --text-heading-lg) */
    --text-display-xl: clamp(3.25rem, 12vw, 7.5rem);
    --text-display-lg: clamp(2.5rem, 7vw, 4.5rem);
    --text-section: clamp(1.875rem, 3.6vw, 3.75rem);

    /* Motion contract.
       THE LAW: numbers never animate, the chassis animates. Anything that is
       a measurement — a token in the inspector HUD, a millisecond in the
       measurement panel, a scale percentage on the device rig — changes at
       --dur-0. Only panels, overlays, curtains and handles move over time.
       The 420–680ms gap is deliberately empty: "control" and "navigation"
       must be audibly different durations. */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ease-spring: cubic-bezier(.16, 1.06, .3, 1);
    --dur-0: 0ms;    /* data and readouts */
    --dur-1: 140ms;  /* micro-state: pill, swatch, focus */
    --dur-2: 240ms;  /* commit: node landed, card opened, surface changed */
    --dur-3: 420ms;  /* spatial: viewport morph, sheet, rig resize */
    --dur-4: 680ms;  /* page transition */

    /* Fluid layout rhythm. The published spacing scale is fixed, so a
       responsive page inevitably grows ad-hoc clamps. Four named steps
       replace eighteen one-off clamps, and — like the type tokens — the
       inspector resolves them, so layout rhythm is auditable too. */
    --gap-sm: clamp(var(--spacing-24), 3vw, var(--spacing-48));
    --gap-md: clamp(var(--spacing-32), 4vw, var(--spacing-64));
    --gap-lg: clamp(var(--spacing-40), 5vw, var(--spacing-96));
    --gap-xl: clamp(var(--spacing-64), 8vw, var(--spacing-144));
    --section-pad: clamp(var(--spacing-96), 9vw, var(--spacing-144));

    /* The system's only depth cue is a 1px hairline. When it is drawn with a
       grid gap rather than a border it is still that hairline, so it gets a
       name — otherwise the inspector would flag it as an unexplained 1px. */
    --hairline: 1px;

    /* Elevation ladder (system: a single hairline ring, never a shadow stack) */
    --ring: inset 0 0 0 1px var(--line);
    --ring-ink: inset 0 0 0 1px var(--ink);
    --ring-soft: inset 0 0 0 1px var(--line-soft);

    /* Layers */
    --z-canvas: 0;
    --z-content: 1;
    --z-header: 60;
    --z-sheet: 90;
    --z-overlay: 120;
    --z-curtain: 200;

    /* Chrome */
    --header-h: 68px;
    --gutter: 32px;

    /* The single sanctioned chromatic atmosphere (DESIGN.md → Orb vocabulary) */
    --orb-warm: #ff8868;
    --orb-soft: #ffa888;

    /* Fonts resolved to the loaded substitutes */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }

  /* Optical settings for the display face — approximates the tighter
     universalSansDisplay cut the system specifies. */
  :root {
    --display-tracking: -.028em;
    --display-leading: .96;
  }
}

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

  * {
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* the header is sticky — anchors must not hide beneath it */
    scroll-padding-top: calc(var(--header-h) + 24px);
  }

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

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

  img,
  video {
    height: auto;
  }

  iframe {
    border: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  button,
  input,
  select,
  textarea {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    background: none;
    border: 0;
  }

  button {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  ul,
  ol {
    list-style: none;
  }

  /* The UA sheet gives every fieldset a 2px groove border and a min-content
     inline size — both show up as a stray box around control groups. */
  fieldset {
    min-inline-size: 0;
    border: 0;
  }

  legend {
    padding: 0;
  }

  table {
    border-collapse: collapse;
  }

  ::selection {
    color: var(--color-paper);
    background: var(--ink);
  }
}

/* -------------------------------------------------------------------------
   BASE
   ---------------------------------------------------------------------- */
@layer base {
  html {
    background: var(--surface-paper);
  }

  body {
    color: var(--ink);
    background: var(--surface-paper);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    overflow-x: clip;
  }

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

  p {
    text-wrap: pretty;
  }

  strong,
  b {
    font-weight: var(--font-weight-medium);
  }

  /* Layout forking. Blocks authored for one layout only are hidden here and
     re-enabled inside the matching layout stylesheet's `layout` layer. */
  [data-layout] {
    display: none;
  }

  :focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
  }

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

  [hidden] {
    display: none !important;
  }

  /* Body scroll lock. The pinning itself is applied inline by core.js
     (`position: fixed` + preserved offset) because `overflow: hidden` on
     <body> is silently ignored by iOS Safari. */
  body[data-scroll-lock="true"] {
    overscroll-behavior: none;
  }
}

/* -------------------------------------------------------------------------
   PRIMITIVES — shared by both layouts
   ---------------------------------------------------------------------- */
@layer primitives {
  .container {
    width: min(100% - (var(--gutter) * 2), var(--page-max-width));
    margin-inline: auto;
  }

  .skip-link {
    position: fixed;
    z-index: var(--z-overlay);
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: var(--spacing-12) var(--spacing-16);
    color: var(--color-paper);
    background: var(--ink);
    border-radius: var(--radius-full);
    font-size: var(--text-body-sm);
    font-weight: var(--font-weight-medium);
    transform: translateY(-180%);
    transition: transform var(--dur-2) var(--ease-out);
  }

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

  /* ---- Eyebrow / section label ---- */
  .label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-12);
    color: var(--ink-4);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--font-weight-regular);
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
  }

  .label::before {
    content: "";
    width: 20px;
    height: 1px;
    background: var(--line);
  }

  .label--bare::before {
    display: none;
  }

  /* ---- Mono meta ---- */
  .mono {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: -.01em;
  }

  /* ---- Buttons: pill is the system signature ---- */
  .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-8);
    min-height: 44px;
    padding: var(--spacing-12) var(--spacing-24);
    border-radius: var(--radius-full);
    font-size: var(--text-body-sm);
    font-weight: var(--font-weight-medium);
    line-height: 20px;
    white-space: nowrap;
    transition:
      color var(--dur-2) var(--ease-out),
      background-color var(--dur-2) var(--ease-out),
      box-shadow var(--dur-2) var(--ease-out),
      transform var(--dur-3) var(--ease-spring);
  }

  .btn__icon {
    display: inline-flex;
    transition: transform var(--dur-3) var(--ease-spring);
  }

  .btn--primary {
    color: var(--color-paper);
    background: var(--ink);
  }

  .btn--ghost {
    color: var(--ink);
    box-shadow: var(--ring);
  }

  .btn--light {
    color: var(--ink);
    background: var(--color-paper);
  }

  .btn--dark-ghost {
    color: var(--color-paper);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-paper) 26%, transparent);
  }

  .btn--compact {
    min-height: 34px;
    padding: var(--spacing-8) var(--spacing-16);
    font-size: var(--text-caption);
  }

  /* ---- Pills / tags ---- */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
    padding: var(--spacing-4) var(--spacing-12);
    border-radius: var(--radius-full);
    background: var(--surface-cream);
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: -.01em;
    line-height: 18px;
    white-space: nowrap;
  }

  .pill--beta {
    background: var(--surface-sand);
    color: var(--ink);
  }

  .pill--ink {
    background: var(--ink);
    color: var(--color-paper);
  }

  .pill__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-sprout);
  }

  .pill__dot--pending {
    background: var(--color-sunbeam);
  }

  /* ---- Surfaces ---- */
  .surface {
    background: var(--surface-cream);
    border-radius: var(--radius-cards);
  }

  .surface--ringed {
    box-shadow: var(--ring);
  }

  .surface--dark {
    background: var(--surface-charcoal);
    color: var(--color-paper);
  }

  /* ---- Hairline rule ---- */
  .rule {
    height: 1px;
    border: 0;
    background: var(--line);
  }

  /* ---- Round arrow affordance ---- */
  .round-arrow {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    color: var(--ink);
    box-shadow: var(--ring);
    transition:
      color var(--dur-2) var(--ease-out),
      background-color var(--dur-2) var(--ease-out),
      box-shadow var(--dur-2) var(--ease-out),
      transform var(--dur-3) var(--ease-spring);
  }

  .round-arrow--light {
    color: var(--color-paper);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-paper) 30%, transparent);
  }

  /* ---- Icons: Material Symbols Rounded, light weight to match the hairlines ---- */
  .mi {
    flex: none;
    font-family: "Material Symbols Rounded";
    font-size: 20px;
    font-weight: 300;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    white-space: nowrap;
    direction: ltr;
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    user-select: none;
  }

  .mi--sm {
    font-size: 18px;
    font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 20;
  }

  .mi--lg {
    font-size: 24px;
  }

  /* ---- Keycap ---- */
  .kbd {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--spacing-8);
    border-radius: var(--radius-md);
    background: var(--color-paper);
    box-shadow: var(--ring);
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1;
  }

  /* ---- Window chrome (terminal / browser mocks) ---- */
  .dots {
    display: inline-flex;
    gap: var(--spacing-8);
  }

  .dots i {
    width: 9px;
    height: 9px;
    border-radius: var(--radius-full);
    background: var(--color-pewter);
  }

  .dots--traffic i:nth-child(1) { background: var(--color-ember); }
  .dots--traffic i:nth-child(2) { background: var(--color-sunbeam); }
  .dots--traffic i:nth-child(3) { background: var(--color-sprout); }

  /* ---- Ambient orb: the only sanctioned chroma ---- */
  .orb {
    position: absolute;
    z-index: var(--z-canvas);
    border-radius: var(--radius-full);
    background: radial-gradient(
      circle at 50% 50%,
      color-mix(in srgb, var(--orb-warm) 42%, transparent) 0%,
      color-mix(in srgb, var(--orb-soft) 20%, transparent) 45%,
      transparent 70%
    );
    filter: blur(64px);
    pointer-events: none;
  }

  /* ---- Visually hidden ---- */
  .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* -------------------------------------------------------------------------
   MOTION CONTRACT
   One reveal system, one route curtain, one honest reduced-motion escape.
   ---------------------------------------------------------------------- */
@layer motion {
  .reveal {
    --reveal-order: 0;
  }

  .has-js .reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
      opacity var(--dur-4) var(--ease-out),
      transform var(--dur-4) var(--ease-out);
    transition-delay: calc(var(--reveal-order) * 70ms);
    will-change: opacity, transform;
  }

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

  /* Intro items animate on load rather than on scroll. */
  .has-js .intro-item {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    animation: intro-rise var(--dur-4) var(--ease-out) forwards;
    animation-delay: calc(120ms + var(--intro-order, 0) * 90ms);
  }

  .route-intro-hold .intro-item {
    animation-play-state: paused;
  }

  @keyframes intro-rise {
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* ---- Route curtain ---- */
  .route-curtain {
    position: fixed;
    z-index: var(--z-curtain);
    inset: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: end;
    gap: var(--spacing-24);
    padding: var(--spacing-40);
    color: var(--color-paper);
    background: var(--ink);
    clip-path: inset(100% 0 0 0);
    pointer-events: none;
    transition: clip-path var(--dur-4) var(--ease-in-out);
  }

  .route-curtain.is-active {
    clip-path: inset(0 0 0 0);
  }

  .route-curtain.is-arrival {
    clip-path: inset(0 0 0 0);
  }

  .route-curtain.is-arrival.is-releasing {
    clip-path: inset(0 0 100% 0);
  }

  .route-curtain__copy {
    display: grid;
    gap: var(--spacing-12);
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity var(--dur-3) var(--ease-out) 120ms,
      transform var(--dur-3) var(--ease-out) 120ms;
  }

  .route-curtain.is-active .route-curtain__copy,
  .route-curtain.is-arrival .route-curtain__copy {
    opacity: 1;
    transform: none;
  }

  .route-curtain.is-arrival.is-releasing .route-curtain__copy,
  .route-curtain.is-arrival.is-releasing .route-curtain__index {
    opacity: 0;
    transition-duration: var(--dur-2);
    transition-delay: 0s;
  }

  .route-curtain small {
    color: color-mix(in srgb, var(--color-paper) 56%, transparent);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .route-curtain strong {
    max-width: 18ch;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.75rem);
    font-weight: var(--font-weight-regular);
    letter-spacing: var(--display-tracking);
    line-height: var(--display-leading);
  }

  .route-curtain__index {
    align-self: end;
    color: color-mix(in srgb, var(--color-paper) 40%, transparent);
    font-family: var(--font-mono);
    font-size: 13px;
    transition: opacity var(--dur-3) var(--ease-out);
  }

  .route-arriving body > *:not(.route-curtain) {
    opacity: 0;
  }

}

/* -------------------------------------------------------------------------
   UTILITIES
   ---------------------------------------------------------------------- */
@layer utilities {
  .text-soft { color: var(--ink-3); }
  .text-mute { color: var(--ink-4); }
  .text-ink  { color: var(--ink); }

  .stack { display: grid; }
  .stack-4  { gap: var(--spacing-4); }
  .stack-8  { gap: var(--spacing-8); }
  .stack-12 { gap: var(--spacing-12); }
  .stack-16 { gap: var(--spacing-16); }
  .stack-24 { gap: var(--spacing-24); }
  .stack-32 { gap: var(--spacing-32); }

  .row {
    display: flex;
    align-items: center;
  }

  .no-motion { transition: none !important; }
}