/* D1 design language: color, type, spacing. Values from the D1 reference
   sheet (rev 1, 25 Oct 2026). Neutral by law: no token is attached to a
   value, a pole or a direction. */

@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/IBMPlexSans-Regular-Latin1.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/IBMPlexSans-Medium-Latin1.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/IBMPlexSans-SemiBold-Latin1.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/IBMPlexMono-Regular-Latin1.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/IBMPlexMono-Medium-Latin1.woff2') format('woff2'); }

:root {
  color-scheme: light;

  /* Color · light */
  --ground: #F2F1ED;        /* screen background */
  --surface: #FBFAF7;       /* cells, fields, idle fills */
  --ink: #1B1B19;           /* text, a set cell, the primary action */
  --ink-2: #52524C;         /* secondary text, pole labels */
  --ink-3: #686862;         /* small labels, the unset dash */
  --rule: #D3D1CA;          /* hairline dividers */
  --rule-strong: #87857D;   /* control edges */
  --tint: #DEDCD5;          /* the set segment (Direction C) */
  --signal: #2C46A8;        /* system only: focus, being set, recorded */
  --needle: #E0432F;        /* the value line, identical at every position */
  --scrim: rgba(27, 27, 25, 0.32);
  --on-ink: #F2F1ED;
  --emblem-needle: #C8321F; /* the door emblem's needle, both themes */

  /* Type · families */
  --sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', Menlo, monospace;

  /* Type · roles (size/line-height) */
  --name-size: 34px;    --name-line: 40px;    /* Sans 500, -1% */
  --title-size: 22px;   --title-line: 28px;   /* Sans 500 */
  --body-size: 15px;    --body-line: 22px;    /* Sans 400 */
  --field-size: 16px;                         /* text fields: no zoom on focus */
  --pole-size: 12px;    --pole-line: 16px;    /* Sans 400 */
  --label-size: 11px;   --label-line: 16px;   /* Sans 600, caps, +8% */
  --readout-size: 13px; --readout-line: 16px; /* Mono 500 */
  --data-size: 12px;    --data-line: 16px;    /* Mono 400, +4% */
  --label-tracking: 0.08em;
  --small-tracking: 0.1em;

  /* Spacing */
  --s4: 4px;   /* axis head to strip; between cells */
  --s8: 8px;   /* between axis rows; between buttons */
  --s12: 12px; /* label to field; inside the record bar */
  --s16: 16px; /* phone margin; group gaps */
  --s24: 24px; /* sheet padding; door sections */
  --s32: 32px; /* desktop panel padding */
  --s48: 48px; /* door: description to form */
  --s64: 64px; /* desktop and sheet margins */

  /* Edges and sizes */
  --radius: 2px;
  --hairline: 1px;
  --touch: 44px;
  --strip-height: 15px;  /* Direction C: a thin row of segments */
  --strip-pad: 15px;     /* above and below it, so the touch area stays 45 */
  --strip-touch: 45px;
  --button-height: 52px;
  --field-height: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground: #121211;
    --surface: #1B1B19;
    --ink: #E8E7E2;
    --ink-2: #ABAAA3;
    --ink-3: #8F8E87;
    --rule: #2E2D2A;
    --rule-strong: #6A6963;
    /* Direction C has no dark board. Derived: a warm grey between surface and
       rule-strong, one step past rule, separating from surface and ground
       about as much as the light tint does (contrast ~1.4:1). */
    --tint: #363531;
    --signal: #9FB0F5;
    --needle: #C8321F;
    --scrim: rgba(0, 0, 0, 0.56);
    --on-ink: #121211;
  }
}