/*
 * Design tokens: "the residence at night" (handoff section 6).
 * The colour values are copied exactly from the handoff; tests/unit/DesignTokensTest.php
 * fails if one drifts. The product is dark only (spec 7.1); emails carry their own inline colours.
 */
:root {
  /* Surfaces */
  --ebony: #14110E;
  --walnut: #1C1814;
  --walnut-2: #24201A;
  --smoke: #3A332A;
  --smoke-soft: #2A251F;
  /* Edge of a form field: 3.4:1 on walnut and 3.6:1 on ebony, the 3:1 a control needs to be seen (WCAG 1.4.11). */
  --field-edge: #756B5B;

  /* Text */
  --ivory: #EFE7DA;
  --sand: #B8AC99;
  --stone: #8C8272;

  /* Accent */
  --brass: #B89668;
  --brass-light: #D2B88E;
  --brass-deep: #8E7048;

  /* Water: charts, icons and large text only; it fails AA for body text */
  --tide: #5E7E78;

  /* Status (console) */
  --ok: #8DBBA9;
  --ok-bg: rgba(94,126,120,.18);
  --pending: #D9B77E;
  --pending-bg: rgba(184,150,104,.16);
  --alert: #E3906F;
  --alert-bg: rgba(227,144,111,.14);
  --info: #9DB2D6;
  --info-bg: rgba(157,178,214,.14);

  /* Fonts. Display text always goes through --font-display so a licensed face
     (Canela, Saol) can replace Cormorant later without touching components. */
  --font-display: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --font-text: 'Jost', Futura, 'Century Gothic', 'Helvetica Neue', Arial, sans-serif;

  /* Type scale, mobile first; the desktop sizes arrive at 960px below. */
  --type-display-size: 52px;
  --type-display-leading: 1.02;
  --type-h1-size: 40px;
  --type-h1-leading: 1.05;
  --type-h2-size: 32px;
  --type-h2-leading: 1.1;
  --type-h3-size: 24px;
  --type-h3-leading: 1.2;
  --type-lead-size: 17px;
  --type-lead-leading: 1.7;
  --type-body-size: 16px;
  --type-body-leading: 1.65;
  --type-small-size: 14px;
  --type-small-leading: 1.55;
  --type-label-size: 12px;
  --type-label-leading: 1.4;
  --type-label-tracking: 0.18em;

  /* Weights: thin display weights shimmer on dark, so display never goes below 500. */
  --weight-display: 500;
  --weight-display-small: 600;
  --weight-lead: 300;
  --weight-body: 400;
  --weight-label: 500;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;
  --space-11: 96px;

  /* Corners: square on the site; in the console 8px for controls and 12px for
     panels (UI refresh, October 2026, was 6px); 16px for the Knox panel and
     the quick-jump palette. */
  --radius-site: 0;
  --radius-console: 8px;
  --radius-knox: 16px;
  --radius-full: 999px;

  /* The frame decides the corner and control height; components.css switches
     these for the console. */
  --radius-control: var(--radius-site);
  --button-height-site: 52px;
  --button-height-console: 40px;
  --input-height-site: 50px;
  --input-height-console: 40px;
  --input-height: var(--input-height-site);
  --control-font-size: 15px;
  --target-min: 44px;

  /* Layout */
  --site-max-width: 1440px;
  --site-gutter: 24px;
  --site-margin: 24px;
  --site-header-height: 72px;
  --console-sidebar-width: 264px;
  /* The sidebar folded to its icons. */
  --console-rail-width: 76px;

  /* Motion: menus and the Knox panel take 200ms; only the home film takes 900ms. */
  --motion-fast: 200ms;
  --motion-film: 900ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* The only shadows allowed: the Knox button and panel, and floating menus. */
  --shadow-float: 0 8px 24px rgba(0,0,0,.35);
  --shadow-panel: 0 20px 50px rgba(0,0,0,.45);
}

@media (min-width: 640px) {
  :root {
    --site-margin: 40px;
  }
}

@media (min-width: 960px) {
  :root {
    --type-display-size: 96px;
    --type-display-leading: 1.0;
    --type-h1-size: 64px;
    --type-h1-leading: 1.02;
    --type-h2-size: 44px;
    --type-h2-leading: 1.08;
    --type-h3-size: 28px;
    --type-h3-leading: 1.2;
    --type-lead-size: 19px;
    --type-lead-leading: 1.75;
    --type-body-size: 16px;
    --type-body-leading: 1.7;
    --site-margin: 56px;
    --site-header-height: 96px;
  }
}