/* ============================================================================
   Crew design system — RK. Machine-readable token block.
   Spec, rationale, component rules, and print/motion requirements: docs/THEME.md
   (that file is authoritative; this one is the copy you paste into a build.)

   Usage: inline this into the deliverable's <style> block. Deliverables must be
   self-contained — do NOT ship a <link rel="stylesheet"> to this file.

   DARK IS THE DEFAULT here, and that is deliberate: the RK mark is a light
   monoline monogram that lives on void, and every other surface in the
   portfolio opens dark. Light is the opt-in, for printing and for daylight.
   ============================================================================ */

:root{
  color-scheme:dark;

  /* Type ------------------------------------------------------------------ */
  /* Space Grotesk is the brand face. No webfont is shipped — deliverables are
     self-contained and a CDN link is forbidden — so the system stack carries it
     when the face is absent. Embed as a data: URI per deliverable if needed. */
  --font-sans:"Space Grotesk","Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

  /* Identity -------------------------------------------------------------- */
  --brand:#7DE2FF;            /* ion — the single accent */
  --brand-soft:#A6ECFF;
  --red:#FF7A6B;
  --link:#7DE2FF;
  --heading:#F2F4F8;
  --text:#C9D2E0;
  --muted:#7C8496;

  /* Surfaces & borders ---------------------------------------------------- */
  --surface:#05070B;          /* ink — panels */
  --surface-2:#0A0D14;        /* raise */
  --input:#0A0D14;
  --rail:rgba(255,255,255,.06);
  --rail-active:rgba(255,255,255,.12);
  --border:rgba(255,255,255,.16);
  --border-soft:rgba(255,255,255,.09);
  --border-strong:rgba(255,255,255,.30);

  /* Status ---------------------------------------------------------------- */
  --ok:#5BE6A4;   --ok-bg:rgba(91,230,164,.10);  --ok-bd:rgba(91,230,164,.34);
  --warn:#FFC46B; --warn-bg:rgba(255,196,107,.10); --warn-bd:rgba(255,196,107,.34);
  --bad:#FF7A6B;  --bad-bg:rgba(255,122,107,.10);  --bad-bd:rgba(255,122,107,.34);

  /* Shape & motion -------------------------------------------------------- */
  /* 2px, not 6px: the mark is drawn with butt caps and the whole system is
     square-shouldered. Rounded corners fight the monogram. */
  --r:2px; --r-sm:2px; --pill:999px;
  --ease:cubic-bezier(.45,.05,.25,1);   /* the brand's revolution curve */
  --d2:180ms; --d3:240ms;

  /* Elevation ------------------------------------------------------------- */
  --e1:0 1px 2px rgba(0,0,0,.55);
  --e2:0 6px 18px rgba(0,0,0,.62);
  --e3:0 16px 40px rgba(0,0,0,.70);

  /* Page, terminal, code -------------------------------------------------- */
  --page:#000000;             /* void */
  --term-bg:#05070B; --term-bd:rgba(255,255,255,.12); --term-head:#0A0D14;
  --code-fg:#E4EAF3; --code-cmd:#7DE2FF; --code-cm:#6C7488;
  --code-p:#5BE6A4;  --code-o:#9AA3B4;
  --ok-soft:rgba(91,230,164,.06); --warn-text:#FFC46B;

  /* Chips & accents ------------------------------------------------------- */
  --purple:#B79BFF;           /* second signal — AI role, secondary chips. Never a
                                 second brand accent; ion stays the only one. */
  --chip-a-bg:rgba(125,226,255,.10); --chip-a-bd:rgba(125,226,255,.34);
  --chip-b-bg:rgba(183,155,255,.10); --chip-b-bd:rgba(183,155,255,.34);
  --halo:rgba(125,226,255,.10);
  --on-brand:#000000;         /* text sitting on an ion fill */

  /* Layout ---------------------------------------------------------------- */
  --contentw:820px;
}

/* Light — OPT-IN ONLY, via a top-bar toggle that sets data-mode="light" on
   <html> and persists to localStorage. Deliberately NOT wired to
   prefers-color-scheme: the brand opens dark, and a reader who wants daylight
   asks for it. Ion is darkened here — #7DE2FF on white is ~1.4:1 and unreadable. */
:root[data-mode="light"]{
  color-scheme:light;

  --brand:#0B6E8A; --brand-soft:#0E7C9B; --red:#C2402F; --link:#0B6E8A;
  --heading:#05070B; --text:#31384A; --muted:#5C6478;

  --surface:#FFFFFF; --surface-2:#F4F6F9; --input:#F9FAFC;
  --rail:rgba(5,7,11,.05); --rail-active:rgba(5,7,11,.11);
  --border:rgba(5,7,11,.18); --border-soft:rgba(5,7,11,.10);
  --border-strong:rgba(5,7,11,.36);

  --ok:#0F7A47; --ok-bg:#E8F8F0; --ok-bd:#A9E3C6; --ok-soft:#F1FBF6;
  --warn:#8A5A00; --warn-bg:#FFF4DE; --warn-bd:#F0D69A; --warn-text:#8A5A00;
  --bad:#C2402F; --bad-bg:#FDF0EE; --bad-bd:#F2C0B8;

  --e1:0 1px 2px rgba(5,7,11,.07);
  --e2:0 4px 12px rgba(5,7,11,.10);
  --e3:0 12px 32px rgba(5,7,11,.15);

  --page:#FFFFFF;
  --term-bg:#F9FAFC; --term-bd:rgba(5,7,11,.16); --term-head:#F4F6F9;
  --code-fg:#1B2130; --code-cmd:#0B6E8A; --code-cm:#5C6478;
  --code-p:#0F7A47;  --code-o:#454D60;

  --purple:#6D4AC9;
  --chip-a-bg:#E6F6FB; --chip-a-bd:#9FD3E4;
  --chip-b-bg:#F1ECFD; --chip-b-bd:#C6B4F0;
  --halo:#E6F6FB;
  --on-brand:#FFFFFF;
}

/* Baseline ------------------------------------------------------------------ */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px;background:var(--page)}
body{margin:0;font-family:var(--font-sans);color:var(--text);background:var(--page);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}

h1{font-size:clamp(1.9rem,4.4vw,2.6rem);line-height:1.08;letter-spacing:-.025em;
  margin:0 0 15px;font-weight:600;color:var(--heading);text-wrap:balance}
h2{font-size:1.4rem;letter-spacing:-.02em;margin:0 0 18px;font-weight:600;
  color:var(--heading);text-wrap:balance}
h3{font-size:1.01rem;margin:24px 0 11px;letter-spacing:-.01em;font-weight:600;
  color:var(--heading)}
p{margin:0 0 13px;color:var(--text)}
a{color:var(--link)}
b{color:var(--heading)}
code{font-family:var(--font-mono);font-size:.8rem}

/* Focus is never removed. */
:focus-visible{outline:2px solid var(--link);outline-offset:2px}

/* The mark ------------------------------------------------------------------
   Inline the SVG so currentColor resolves; never <img> it. The paths must carry
   their choreography classes (s1–s5 on the strokes, swoop on the trajectory) —
   without them the arrival has nothing to stagger. Canonical: the rk-logo repo.

   Two acts. Act 1, arrival: the strokes fly in blurred and scaled from distinct
   directions, the trajectory streaking in last along its own line of travel.
   Act 2, revolution: one full 360°, on hover and chained off the arrival.
   Animations, never transitions — a transition unwinds backwards on mouse-out. */
.mark{display:block;flex:none;width:26px;height:26px;color:var(--heading);
  transition:color var(--d3) var(--ease)}
.mark svg{width:100%;height:100%;display:block;overflow:visible}
.mark path{transform-box:fill-box;transform-origin:center}
.logo-chip:hover .mark,.brand:hover .mark{color:var(--brand)}

@keyframes markArrive{
  from{opacity:0;transform:translate(var(--fx,0),var(--fy,0)) scale(var(--fs,2.2));filter:blur(3px)}
  60%{filter:blur(.4px)}
  to{opacity:1;transform:none;filter:none}
}
.mark.arrive .s1{--fx:-30px;--fy:8px;--fs:2.6;animation:markArrive .85s cubic-bezier(.2,.7,.2,1) .05s both}
.mark.arrive .s2{--fx:-12px;--fy:-26px;--fs:2.2;animation:markArrive .85s cubic-bezier(.2,.7,.2,1) .22s both}
.mark.arrive .s3{--fx:-6px;--fy:30px;--fs:2.0;animation:markArrive .8s cubic-bezier(.2,.7,.2,1) .40s both}
.mark.arrive .s4{--fx:16px;--fy:-30px;--fs:2.4;animation:markArrive .85s cubic-bezier(.2,.7,.2,1) .55s both}
.mark.arrive .s5{--fx:24px;--fy:24px;--fs:2.0;animation:markArrive .8s cubic-bezier(.2,.7,.2,1) .72s both}
.mark.arrive .swoop{--fx:30px;--fy:-26px;--fs:1.3;animation:markArrive .7s cubic-bezier(.2,.7,.2,1) 1.0s both}
.mark.spin{animation:markSpin .9s var(--ease)}
@keyframes markSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* Motion — mandatory. */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  /* Cancel the mark's choreography outright rather than racing it to 0.001ms —
     `both` fill would otherwise leave a stroke stuck at its arrival transform. */
  .mark.spin,.mark.arrive .s1,.mark.arrive .s2,.mark.arrive .s3,
  .mark.arrive .s4,.mark.arrive .s5,.mark.arrive .swoop{animation:none!important}
}

/* Print — mandatory. Ink on white regardless of mode; the void does not print. */
@media print{
  .topbar,.sidenav,.term-actions,.chooser,.formbar{display:none!important}
  body{background:#ffffff!important;color:#111111;font-size:10.5pt}
  .shell{display:block;max-width:none;padding:0}
  .content{max-width:none}
  section{break-inside:avoid;border-top:1px solid #dddddd;padding:16px 0}
  .reveal{opacity:1!important;transform:none!important}
  details .body{display:block!important}
  figure{box-shadow:none;break-inside:avoid}
  a{color:#0B6E8A;text-decoration:none}
}
