/**
 * Nocturne. Every colour, type, space and shape decision in this template, and nowhere
 * else. Custom properties only: no selectors, no rules.
 *
 * The page is dark and the panels that interrupt it are light, which is the reverse of
 * Hartfield. The same role names carry both, so a section lifted between the two templates
 * arrives themed rather than inverted by accident.
 *
 * One colour runs the whole page: sky blue at hue 228, taken from a real sky rather than
 * from a swatch. Soft rather than electric, chroma 0.086, which is what makes it read as
 * daylight instead of as a brand colour. Every other value here is cooled toward it rather
 * than left neutral, which is what stops a black page reading as a dashboard.
 *
 * It is declared twice because it has to be. The sky is legible on the dark page at 10.69:1
 * and carries dark text at 10.33:1, but on paper it is far too pale to carry anything. The
 * deep cut sits at hue 230 against 228 and holds slightly more chroma, so it reads as the
 * same sky in shadow rather than as a second, duller blue.
 */

:root {
  /* Colour, by role. The page. */
  --surface: #080A0D;        /* blue-black. 17.60 for --ink */
  --surface-alt: #12161B;    /* raised cards, and the nav when it settles */
  --ink: #EDF2F7;
  --ink-soft: #B8C4D0;       /* 11.18 */
  --ink-faint: #8A97A5;      /* 6.65 and 6.10 on the two dark surfaces */
  --accent: #7FC8E8;         /* sky. 10.69 on --surface, 9.79 on --surface-alt */
  --accent-ink: #06101A;     /* text on --accent, 10.33 */
  --line: #1F262E;

  /* The light panels that interrupt it. */
  --paper: #F7FAFC;
  --paper-alt: #E9EFF5;
  --ink-invert: #0A0F14;       /* 18.36 on --paper */
  --ink-invert-soft: #3A454F;  /* 9.34 */
  --ink-invert-faint: #586572; /* 5.69 and 5.15 */
  --accent-deep: #0F6A8C;      /* 5.79 on --paper, and carries white at 6.07 */
  --line-invert: #DCE5EC;

  /* The one thing on the page that is wrong, on the reply form and nowhere else. The page is
     blue-black, so this is a light coral: the warm answer to the sky accent rather than a
     deep red nobody could read. 8.80 on the page, 8.07 on the raised card. */
  --bad: #F2938C;

  /* Type. Gilda Display has one weight, so --weight-display-strong is the same 400 rather
     than a synthetic bold: asking for 500 would smear the letterforms instead of drawing
     them heavier. Where a heading needs more presence here it gets more size, not more
     weight. Plus Jakarta Sans carries everything that has to be read rather than admired. */
  --font-display: 'Gilda Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --weight-display: 400;
  --weight-display-strong: 400;
  --weight-body: 400;
  --weight-soft: 450;
  --t-display: clamp(3rem, 7.6vw, 6.4rem);
  --t-h2: clamp(2.2rem, 4.6vw, 3.9rem);
  --t-h3: 1.5rem;
  --t-lede: clamp(1.02rem, 1.2vw, 1.12rem);
  --t-body: 1rem;
  --t-small: 0.94rem;
  --t-meta: 0.83rem;
  --track-meta: 0.02em;
  --track-display: -0.01em;   /* the display face is loose by default at large sizes */
  --leading: 1.6;

  /* Space */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --nav-h: calc(48px + 2 * var(--space-4));   /* the bar, and what the cover pulls up by */
  --section-y: clamp(88px, 11vw, 168px);
  --gutter: clamp(20px, 4vw, 56px);

  /* Shape. Everything here is rounded, which is the other half of what separates this
     template from Hartfield's square corners and hairlines. */
  --r-button: 999px; --r-card: 20px; --r-image: 16px; --r-input: 0px;
  --r-panel: clamp(28px, 5vw, 72px);   /* the corner a whole section turns */
  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 18px 48px rgba(0,0,0,.35);

  /* Motion. Read by motion.js for the stagger. */
  --ease-settle: cubic-bezier(.22, 1, .36, 1);
  --ease-glide: cubic-bezier(.33, 1, .68, 1);
  --dur-reveal: .85s;
  --dur-slow: 1.2s;
  --stagger: 75ms;

  /* Measure */
  --measure: 46ch;
  --content-width: 1240px;
  --image-ratio: 4 / 5;

  /* Chrome that sits on a photograph rather than on a surface. A photograph is not a
     surface, so the ink ramp does not apply to it: these are pure white and pure black and
     the alpha does the work. Kept as channel triplets so one value serves every opacity. */
  --on-photo: #FFFFFF;
  --on-photo-rgb: 255 255 255;
  --scrim-rgb: 0 0 0;
  --surface-rgb: 8 10 13;    /* --surface, for the glass bar and its transition */
}