/* ============================================================
   ViewFyre — Design System Foundation
   Palette and type locked. Motion tokens defined here; the
   scroll choreography that consumes them lives in viewfyre.js.
   ============================================================ */

/* ---------- 1. Fonts ---------------------------------------- */
/* Saira 600/700 display · IBM Plex Sans 400/500/600 body · IBM Plex Mono 400/500 labels
   Loaded in <head> with preconnect:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Saira:wght@600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
*/

/* ---------- 2. Tokens --------------------------------------- */
:root{
  /* Colour — sampled from the logo, contrast-audited (worst pair 5.34:1, all AA) */
  --bg:            #000000;
  --panel:         #0A0A0A;   /* barely-raised surface */
  --panel-2:       #141414;   /* cards, form fields */
  --paper:         #E0E0E0;   /* body text — 15.91:1 on bg */
  --muted:         #9A9A9A;   /* secondary text — 6.55:1 on panel-2 */
  --dim:           #7E7E7E;   /* tertiary; 5.1:1 on black */
  --orange:        #D2782A;   /* brand accent — 6.46:1 on bg */
  --orange-hi:     #EC9838;   /* small text on panels — 8.00:1 on panel-2 */
  --orange-deep:   #793B11;   /* shadow / seams, never text */
  --line:          rgba(224,224,224,.10);
  --line-strong:   rgba(224,224,224,.18);
  --glow:          rgba(210,120,42,.28);

  /* Type */
  --display: 'Saira', system-ui, sans-serif;
  --body:    'IBM Plex Sans', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Fluid scale — 1.25 ratio, clamped between 360px and 1440px viewports */
  --t--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.83rem);
  --t-0:  clamp(1.00rem, 0.97rem + 0.15vw, 1.06rem);
  --t-1:  clamp(1.20rem, 1.13rem + 0.34vw, 1.38rem);
  --t-2:  clamp(1.44rem, 1.30rem + 0.68vw, 1.80rem);
  --t-3:  clamp(1.73rem, 1.47rem + 1.25vw, 2.34rem);
  --t-4:  clamp(2.07rem, 1.63rem + 2.14vw, 3.05rem);
  --t-5:  clamp(2.49rem, 1.75rem + 3.55vw, 3.96rem);
  --t-6:  clamp(2.99rem, 1.79rem + 5.75vw, 5.15rem);

  /* Spacing — 8px base */
  --s-1: .5rem;  --s-2: 1rem;   --s-3: 1.5rem;  --s-4: 2rem;
  --s-5: 3rem;   --s-6: 4rem;   --s-7: 6rem;    --s-8: 8rem;
  --section-y: clamp(4.5rem, 9vw, 9rem);

  /* Layout */
  --max:      1180px;
  --max-text: 68ch;
  --gutter:   clamp(1.25rem, 4vw, 3rem);

  --radius:    3px;
  --radius-lg: 5px;

  /* Motion — consumed by CSS and JS alike */
  --dur-fast:   160ms;
  --dur:        300ms;
  --dur-reveal: 620ms;
  --ease:       cubic-bezier(.22,.75,.25,1);   /* decelerating, calm */
  --ease-out:   cubic-bezier(.16,1,.3,1);
  --reveal-y:   24px;
  --stagger:    80ms;
}

/* ---------- 3. Reset ---------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* JS smooth-scroll takes over when enabled; this is the no-JS fallback */
}
body{
  background:var(--bg);
  color:var(--paper);
  font-family:var(--body);
  font-size:var(--t-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video,canvas{ display:block; max-width:100%; height:auto; }
input,button,textarea,select{ font:inherit; color:inherit; }
button{ background:none; border:none; cursor:pointer; }
p,h1,h2,h3,h4,li{ overflow-wrap:break-word; }

/* ---------- 4. Typography ----------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.025em;
  text-wrap:balance;
}
h1{ font-size:var(--t-6); }
h2{ font-size:var(--t-4); }
h3{ font-size:var(--t-2); letter-spacing:-.015em; }
h4{ font-size:var(--t-1); font-weight:600; letter-spacing:-.01em; }

p{ max-width:var(--max-text); text-wrap:pretty; }
.lead{ font-size:var(--t-1); line-height:1.55; }
.muted{ color:var(--muted); }

/* Section eyebrows and technical labels — the 01 / DATA tags */
.tag{
  font-family:var(--mono);
  font-size:var(--t--1);
  font-weight:500;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--orange-hi);
}

/* ---------- 5. Layout --------------------------------------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }

/* ---------- 6. Links and focus ------------------------------ */
a{ color:var(--orange-hi); text-decoration-thickness:1px; text-underline-offset:.2em; }
a:hover{ color:var(--paper); }

/* Visible focus everywhere — keyboard users must never be lost */
:focus-visible{
  outline:2px solid var(--orange-hi);
  outline-offset:3px;
  border-radius:2px;
}
:focus:not(:focus-visible){ outline:none; }

.skip-link{
  position:absolute; left:var(--s-2); top:-100px; z-index:999;
  background:var(--panel-2); color:var(--paper);
  padding:var(--s-2) var(--s-3); border:1px solid var(--orange);
  border-radius:var(--radius); transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus{ top:var(--s-2); }

/* ---------- 7. Buttons -------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.85em 1.6em;
  font-weight:600; font-size:var(--t-0); letter-spacing:.01em;
  text-decoration:none; border-radius:var(--radius);
  transition:background var(--dur) var(--ease),
             color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.btn-primary{ background:var(--orange); color:#0A0500; border:1px solid var(--orange); }
.btn-primary:hover{ background:var(--orange-hi); border-color:var(--orange-hi); color:#0A0500; box-shadow:0 0 28px var(--glow); }
.btn-ghost{ border:1px solid var(--line-strong); color:var(--paper); }
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange-hi); }

/* ---------- 8. Surfaces ------------------------------------- */
.panel{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:var(--s-4);
}

/* ---------- 9. Scroll reveal -------------------------------- */
/* JS adds .is-in when the element enters the viewport, once. */
.reveal{
  opacity:0;
  transform:translate3d(0,var(--reveal-y),0);
  transition:opacity var(--dur-reveal) var(--ease-out),
             transform var(--dur-reveal) var(--ease-out);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }

/* Stagger children of a group */
.stagger > *{ transition-delay:calc(var(--i,0) * var(--stagger)); }

/* Parallax layers — JS writes --py, CSS applies it.
   Transform only; never top/height. */

/* ---------- 10. Reduced motion ------------------------------ */
/* Everything still visible and usable — motion simply stops. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  }

/* ---------- 11. Print --------------------------------------- */
@media print{
  body{ background:#fff; color:#000; }
  .reveal{ opacity:1; transform:none; }
  video,canvas{ display:none; }
}