/* ============================================================
   ARISTOMINDS — THE DESIGN SYSTEM
   Every token here is lifted from design/explorations/04-copilot.html,
   which is the direction the whole site is built in. Sections may
   add their own styles, but they take their colours, radii and type
   from here — never from a literal.

   TWO TOKENS ARE DELIBERATELY NOT VERBATIM. Both were measured
   against the backgrounds they actually sit on and both were too
   faint to read:

     --ink-3   was #8B9791, which is 2.8:1 on the warm canvas. It
               carries most of the small labels on the page, so it
               is now dark enough to pass AA (4.5:1) on canvas and
               on white.
     --amber-d is new. Plain --amber is 2.9:1 on --amber-l, but it
               cannot simply be darkened — the same amber is a
               domain colour on the dark sections, where darkening
               it would make it WORSE. So amber for text on light
               is its own token.
   ============================================================ */

:root{
  /* --- surfaces --- */
  --canvas:  #F6F5F1;   /* the page                      */
  --canvas-2:#EFEEE8;   /* a band that needs separating  */
  --card:    #FFFFFF;
  --card-2:  #FBFBF9;   /* a panel inside a card         */
  --ink:     #14201C;   /* text, and the dark sections   */
  --ink-2:   #4F5D57;
  --ink-3:   #626F69;   /* the quiet labels — see the note below */

  /* --- brand --- */
  --green:   #0D6B54;
  --green-d: #095041;
  --green-l: #E6F1ED;
  --amber:   #C97C21;   /* on the dark sections, and as a fill    */
  --amber-d: #A05F13;   /* the same amber, dark enough to read as
                           text on a light background            */
  --amber-l: #FBF1E2;
  --amber-l2:#F6E3CE;   /* one step up from amber-l, for a lit state */
  --rose:    #B4453C;
  --rose-l:  #FBEDEB;
  --mint:    #6ADFB9;   /* the accent the dark sections use */
  --mint-h:  #84E8C6;   /* and where it goes on a hover     */

  /* --- lines and lift --- */
  --line:    rgba(20,32,28,.10);
  --line-2:  rgba(20,32,28,.18);
  --sh-sm:   0 1px 2px rgba(20,32,28,.05);
  --sh:      0 1px 2px rgba(20,32,28,.04), 0 14px 32px -20px rgba(20,32,28,.4);
  --sh-lg:   0 2px 4px rgba(20,32,28,.04), 0 34px 70px -34px rgba(20,32,28,.45);

  /* --- the dashboard app, on the ink ---
     Worked out in design/explorations/06-app-dashboard.html: the same
     --card/--card-2/--line/--ink-2/--ink-3 tiering the light theme has,
     mirrored for --ink instead of --canvas. --panel/--panel-2 are --ink
     lightened toward white (not a hue of their own); --line-ink/--line-ink-2
     are --line/--line-2 with the tint flipped from ink-on-light to
     white-on-ink, same two alphas. --onink-2/--onink-3 are text: .56 clears
     the .52 AA floor .on-ink p (below) already relies on, .32 is for
     disabled controls only, which WCAG exempts from the floor. */
  --panel:      #1E2A24;
  --panel-2:    #2A3730;
  --line-ink:   rgba(255,255,255,.10);
  --line-ink-2: rgba(255,255,255,.18);
  --onink-2:    rgba(255,255,255,.56);
  --onink-3:    rgba(255,255,255,.32);
  /* --rose fails AA on the ink outright (3.08:1, measured) -- unlike amber,
     it never needed a text-safe variant before now because --rose/--rose-l
     had only ever been used together, as a matched pair, on the light
     canvas. This is that variant for the dark: --rose lightened 25% toward
     white, 4.91:1 on --ink. */
  --rose-onink: #C7746D;

  /* --- shape and measure --- */
  --r:       16px;
  --r-sm:    10px;
  --r-xs:    4px;       /* a corner that reads square, not soft — every button */
  --maxw:    1180px;
  --header-h: 64px;     /* the bar the opening has to leave room for */

  /* THE AIR INSIDE A SECTION BAND, top and bottom. The page is divided by
     hairlines, and this is the distance between them — every band takes
     these two numbers, so the rhythm down the page is one pair to turn
     rather than the same clamp copied into seven files. */
  --band-t:  clamp(46px, 5.6vw, 74px);
  --band-b:  clamp(52px, 6.3vw, 84px);

  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--mono); font-size:14.5px; line-height:1.72; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

h1,h2,h3,h4{ margin:0; font-weight:500; letter-spacing:-.04em; line-height:1.1; text-wrap:balance; }
h1{ font-size:clamp(2.1rem,5.2vw,4rem); font-weight:400; letter-spacing:-.05em; line-height:1.04; }
h2{ font-size:clamp(1.65rem,3.3vw,2.65rem); }
h3{ font-size:clamp(1rem,1.4vw,1.16rem); letter-spacing:-.025em; font-weight:600; }
p{ margin:0; }

/* 28px of gutter is the design; on a phone it was 56 of a 320px screen going
   to air, so it comes in to 20 there. 4vw hits 28 at 700px — the width the
   page changes shape at anyway — so nothing above a phone moves.

   A SECTION THAT SETS `padding` HERE MUST DO IT PER EDGE. The section
   stylesheets are injected after this file, so a `padding: X 0` shorthand on
   an element that also carries `.wrap` throws the gutter away and the text
   runs to the edge of the glass. See the note in 50-counters.html. */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,28px); }
.sec{ padding:var(--band-t) 0 var(--band-b); }

/* The bar is fixed, so a tap on an in-page link lands the section's top edge
   underneath it and the heading is the first thing you do not see. Every
   anchored thing inside the page holds itself off by the bar's own height.
   It costs nothing anywhere else: scroll-margin only applies when something
   scrolls to the element, which is an anchor or a focus move. */
#sections [id]{ scroll-margin-top:calc(var(--header-h) + 14px); }

/* --- buttons ---
   EVERY BUTTON ON THE SITE IS SQUARE-ENDED, with no exceptions. --r-xs is
   the corner, here and in the places that roll their own button — the tabs
   in `who`, the arrows in `layers`, the send in `whitelist`, the minis in
   the product mock. If you add a button anywhere, it takes --r-xs.

   The pill is for things that are NOT pressed: the eyebrow above a
   heading, the status chips in the mock. Round means label, square means
   button. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:12.5px; letter-spacing:.02em; font-weight:600;
  padding:14px 24px; border-radius:var(--r-xs); border:1px solid transparent;
  cursor:pointer; transition:.2s;
}
.btn-primary{ background:var(--green); color:#fff; box-shadow:var(--sh-sm); }
.btn-primary:hover{ background:var(--green-d); transform:translateY(-1px); box-shadow:var(--sh); }
.btn-soft{ background:var(--card); color:var(--ink); border-color:var(--line-2); }
.btn-soft:hover{ border-color:var(--ink-3); }
.btn-sm{ padding:10px 18px; font-size:11.5px; }
.btn:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

/* --- out of the way until it is tabbed to --- */
.skip{
  position:fixed; top:10px; left:-9999px; z-index:200;
  background:var(--green); color:#fff;
  font-size:12px; font-weight:600; letter-spacing:.02em;
  padding:12px 20px; border-radius:var(--r-xs); box-shadow:var(--sh);
}
.skip:focus{ left:16px; outline:2px solid #fff; outline-offset:-4px; }
#sections:focus{ outline:none; }

/* --- the little uppercase label above a heading --- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  color:var(--green); background:var(--green-l);
  padding:7px 14px; border-radius:999px;
}
.on-ink .eyebrow{ color:var(--mint); background:rgba(106,223,185,.12); }

/* --- a section that runs on the dark ink --- */
.on-ink{ background:var(--ink); color:#fff; }
.on-ink h1,.on-ink h2,.on-ink h3{ color:#fff; }
.on-ink p{ color:rgba(255,255,255,.7); }

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}