@layer tokens {
  /* Retrixはアニメーションとトランジションを持たない。2012年前後の画面と同じく、状態はその場で切り替える。 */
  /* 同じローカル書体の行メトリクスを揃える。字形や字幅、コンポーネントごとの余白は変えない。 */
  @font-face {
    font-family: "Retrix UI Latin";
    src: local("HelveticaNeue");
    font-weight: 400;
    ascent-override: 89%;
    descent-override: 11%;
    line-gap-override: 0%;
  }
  /* 一覧の行や操作に使うMedium（500）。欧文はHelvetica Neue Medium、日本語はヒラギノ角ゴ W5。 */
  @font-face {
    font-family: "Retrix UI Latin";
    src: local("HelveticaNeue-Medium");
    font-weight: 500;
    ascent-override: 89%;
    descent-override: 11%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: "Retrix UI Latin";
    src: local("HelveticaNeue-Bold");
    font-weight: 600 900;
    ascent-override: 89%;
    descent-override: 11%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: "Retrix UI Japanese";
    src: local("HiraginoSans-W3");
    font-weight: 400;
    ascent-override: 89%;
    descent-override: 11%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: "Retrix UI Japanese";
    src: local("HiraginoSans-W5");
    font-weight: 500;
    ascent-override: 89%;
    descent-override: 11%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: "Retrix UI Japanese";
    src: local("HiraginoSans-W6");
    font-weight: 600 900;
    ascent-override: 89%;
    descent-override: 11%;
    line-gap-override: 0%;
  }
  :root {
    /*
      基本色。Basecamp 2の画面の色を手本にする。
      補足の灰色（--rx-gray-650）と日付の茶色（--rx-tan）は、説明文に求める7:1を白地で満たすよう、手本より少し濃くする。
      - 机の地はクリーム色、その上に白いシート（作業面）を置く。
      - 罫線と枠は黄みを帯びた灰色にし、青みの灰色を使わない。
    */
    --rx-gray-0: #ffffff;
    --rx-gray-20: #f9f9f9;
    --rx-gray-50: #f2f2f2;
    --rx-gray-100: #ececec;
    --rx-gray-200: #dedede;
    --rx-gray-300: #cccccc;
    --rx-gray-500: #a9a8a4;
    --rx-gray-650: #666666;
    --rx-gray-900: #000000;
    --rx-black: #000000;
    --rx-desk-cream: #f6f2e8;
    --rx-teal: #1c5c77;
    --rx-teal-dark: #143f51;
    --rx-teal-soft: #e6eff3;
    --rx-blue: #2272b0;
    --rx-blue-dark: #185383;
    --rx-green: #008250;
    --rx-green-dark: #016c43;
    --rx-amber: #8a5a00;
    --rx-red: #990000;
    --rx-red-dark: #7a0f00;
    --rx-coral: #b0472f;
    --rx-coral-dark: #923a26;
    --rx-tan: #7b6f54;
    --rx-plum: #6d4c8a;
    --rx-gold: #8a631a;
    --rx-cream: #faf7ef;
    --rx-ice: #e1e8f8;
    --rx-mint: #e9f3e3;
    --rx-butter: #ffffcc;
    --rx-cover: var(--rx-teal-soft);
    /* 「今日」と選んだ行・更新した行の黄色。37signalsの黄色のハイライトに合わせる。 */
    --rx-mark: var(--rx-butter);
    /* テキスト文書やメモを置く黄色の紙。 */
    --rx-note: #ffffcd;
    --rx-note-edge: #e0e0e0;
    /*
      BC2のピル（件数・担当者・期日）。高さ18px・角丸9px・12pxの平らな塗り（lists.md）。
      件数は淡い青に青緑の文字、担当者と期日は灰色の地に灰色の文字（実測 #777 は4.5:1に届かないので #6b6b6b）。
    */
    --rx-pill-count: var(--rx-ice);
    --rx-pill-count-text: var(--rx-teal);
    --rx-pill-meta: #eeeeee;
    --rx-pill-meta-text: #6b6b6b;
    /*
      選んでいる項目・候補。BC2のジャンプの候補（overlays.md「1f」）と同じ、角の無い淡い青に黒い文字。
      メニュー・候補の一覧・切り替え・Dialなど、選んでいる状態は全てこの一つの見た目にする（ピルで囲わない）。
    */
    --rx-option-active: #ddeefe;
    --rx-option-active-text: var(--rx-ink);
    /*
      選んだ状態・オン。手本のMacの標準のチェックボックスとラジオの選んだ状態（controls.md 9・10章）と同じ、
      淡い青の縦の塗り、紺の縁（下だけ一段濃い）、濃い紺の文字。切り替え・選んだボタン・選んだ日・Switchのオンなど、
      選ぶ操作の「選んでいる」はどれもこの見た目にそろえる。ホバーの一段濃い塗りは手本が無い（推測）。
    */
    --rx-selected-fill: linear-gradient(#e4faff, #bcddfa 50%, #a1cff9);
    --rx-selected-fill-hover: linear-gradient(#d4f2ff, #aad3f8 50%, #8fc4f6);
    --rx-selected-edge: #5e64b3;
    --rx-selected-edge-end: #545773;
    --rx-selected-text: #001831;
    /* カレンダー・Progressの暖かい灰色の罫線（lists.md）。 */
    --rx-calendar-rule: #dcd9d2;
    /* ヘッダーの名前の濃い灰色と、名前と移動先の間の縦の線（BC2の実測）。 */
    --rx-logo: #3d3c37;
    --rx-header-rule: #ded7c7;
    /* 浮かぶパネル（BC2のポップオーバー。overlays.md「1」）。1px #bbb の枠・角丸5px・外へ約8pxの柔らかい影。 */
    --rx-popover-edge: #bbbbbb;
    --rx-popover-radius: 0.3125rem;
    --rx-popover-shadow: 0 var(--rx-stroke-width) 0.5rem rgb(0 0 0 / 18%);
    /* 背後に重ねた親のシートの枠。 */
    --rx-sheet-behind-edge: #e5e5e5;
    /* シートの背後に重ねる親のシート。 */
    --rx-sheet-behind: var(--rx-gray-20);
    /* 控えめなボタンの影。BC2の実測どおり、ぼかしの無い1px #ddd を下に付ける（controls.md 1章）。押すと内側へ沈む。 */
    --rx-shadow-control: 0 var(--rx-stroke-width) 0 #dddddd;
    --rx-shadow-control-hover: 0 var(--rx-stroke-width) 0 #cfcfcf;
    --rx-shadow-control-pressed: inset 0 var(--rx-stroke-width) 0.125rem rgb(0 0 0 / 12%);
    --rx-shadow-control-primary-pressed: inset 0 var(--rx-stroke-width) 0.125rem rgb(0 0 0 / 25%);
    /* 小さな札の輪郭と浅い影。 */
    --rx-shadow-chip:
      0 0 0 var(--rx-stroke-width) rgb(38 38 36 / 16%), 0 0.0625rem 0.0625rem rgb(38 38 36 / 5%);
    --rx-shadow-input: none;
    --rx-info-soft: var(--rx-ice);
    --rx-success-soft: var(--rx-mint);
    --rx-warning-soft: #fff6d6;
    --rx-danger-soft: #fbece8;
    /* カード（BC2のプロジェクトのカード）。枠なしで四方へ4〜5pxのぼかし。持ち上げたカード（ドラッグ中）はlift。 */
    --rx-shadow-paper: 0 0 0.3125rem rgb(0 0 0 / 22%);
    --rx-shadow-paper-lift: 0 0 0.5rem rgb(0 0 0 / 30%);
    /* シート。BC2の実測どおり、枠なしで四方へ同じ量のぼかし（約6px、ずらし無し）（structure.md「シート」）。 */
    --rx-shadow-sheet: 0 0 0.375rem rgb(0 0 0 / 28%);
    /* 浮かぶ要素の輪郭と影。ポップオーバー（overlays.md）は overlay.css の --rx-popover-* で1pxの枠を描く。 */
    --rx-shadow-menu:
      0 0 0 var(--rx-stroke-width) rgb(38 38 36 / 18%), 0 0.25rem 0.875rem rgb(38 38 36 / 20%);
    --rx-space-1: 0.25rem;
    --rx-space-2: 0.5rem;
    --rx-space-3: 0.75rem;
    --rx-space-4: 1rem;
    --rx-space-5: 1.25rem;
    --rx-space-6: 1.5rem;
    --rx-space-8: 2rem;
    --rx-space-12: 3rem;
    --rx-space-18: 4.5rem;
    --rx-background: var(--rx-desk-cream);
    --rx-surface: var(--rx-gray-0);
    --rx-text: var(--rx-gray-900);
    --rx-muted: var(--rx-gray-650);
    /* 日付・投稿者などの補足に使う茶色。 */
    --rx-meta: var(--rx-tan);
    --rx-border: var(--rx-gray-100);
    /* 入力欄とボタンの枠。罫線（--rx-border）より濃くし、操作できる所だと分かるようにする。 */
    --rx-control-border: var(--rx-gray-300);
    /* 一行の入力欄の枠（BC2の日付の欄）。ボタンの枠より淡い。 */
    --rx-input-border: var(--rx-gray-200);
    /* 複数行の入力欄（BC2のコメント欄）の枠。 */
    --rx-textarea-border: #c1c1c1;
    /* 入力欄の中のプレースホルダー。 */
    --rx-placeholder: #aaaaaa;
    /* 使えない操作の文字（Highriseの「First」）。形と塗りはそのままにする。 */
    --rx-disabled-text: #9a9a9a;
    /* ヘッダーの移動先・フッターなど、机の上の小さな灰色の文字。 */
    --rx-quiet: #6e6e67;
    --rx-stroke-width: 0.0625rem;
    --rx-ink: var(--rx-black);
    /* まとまりの見出し（Section・Boardの列など）の赤茶。 */
    --rx-heading: var(--rx-red);
    /*
      塗り。BC2の部品は平らな色で、グラデーションを使わない（controls.md）。
      グラデーションは手本で確かめられた所（Highrise・Classicのピルやページ送り）だけで、各コンポーネントのCSSに書く。
    */
    --rx-fill-paper: linear-gradient(transparent, transparent);
    --rx-fill-control: linear-gradient(var(--rx-surface), var(--rx-surface));
    /* ホバーと押した時の控えめな操作の面（手本に無いので推測）。 */
    --rx-fill-control-hover: linear-gradient(#fafafa, #fafafa);
    --rx-fill-control-pressed: linear-gradient(#f2f2f2, #f2f2f2);
    --rx-fill-success: linear-gradient(var(--rx-green), var(--rx-green));
    /* 操作のメニューの面。白いパネルに枠と影を付ける。選んでいる行は角の無い淡い青（--rx-menu-active）にする。 */
    --rx-fill-menu: linear-gradient(var(--rx-surface), var(--rx-surface));
    --rx-menu-active: var(--rx-option-active);
    /* 机の紙の質感。BC2の実測どおり、明るさだけの細かいノイズを重ねる（structure.md「机」）。 */
    --rx-desk-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.25 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --rx-link: var(--rx-teal);
    --rx-link-hover: var(--rx-red);
    --rx-info: var(--rx-blue-dark);
    --rx-success: var(--rx-green);
    --rx-warning: var(--rx-amber);
    --rx-danger: var(--rx-red);
    --rx-focus-ring: color-mix(in srgb, var(--rx-blue) 38%, var(--rx-surface));
    /*
      入力欄とボタンのフォーカス。Highriseの入力欄（Safari）の実測どおり、青い縁と外側の淡い青の輪（controls.md 11章）。
      forced-colorsでは影が消えるため、欄は透明なoutlineを併せて持つ。
    */
    --rx-focus-border: #7cb0e2;
    --rx-focus-glow: 0 0 0 0.1875rem rgb(124 176 226 / 55%);
    --rx-font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
    --rx-control-font-family:
      "Retrix UI Latin", "Retrix UI Japanese", "Helvetica Neue", Arial, var(--rx-font);
    /*
      文字の段。ベースの本文を13pxにし、ほかの段をそこから決める（ユーザーの指定）。
      手本（BC2）は英字で本文15px・ボタン12pxだが、和文は字面が大きく見えるので全体を一段下げ、段の比は手本に近づける。
      - 補足・日時・ピル --rx-small：11px
      - ボタン・入力欄・表・ラベル --rx-label：12px
      - 本文・一覧の題名 --rx-body：13px（ベース）
      - 続けて読む文章 --rx-reading：14px
      - まとまりの見出し --rx-section-title：15px
      - シートの見出し --rx-title：18px
      操作の高さはemで文字に追従するため、文字の大きさを整数pxに保ち、縦位置の端数を作らない。
    */
    --rx-body: 0.8125rem;
    --rx-label: 0.75rem;
    --rx-small: 0.6875rem;
    --rx-title: 1.125rem;
    --rx-section-title: 0.9375rem;
    /* 続けて読む文章（コメントの本文・カードの説明・文書）。手本では一覧（15px）より一段大きい16px。 */
    --rx-reading: 0.875rem;
    --rx-leading: calc(18 / 13);
    --rx-label-leading: calc(17 / 12);
    --rx-small-leading: calc(15 / 11);
    /*
      角丸（BC2の実測）。控えめなボタンと複数行の入力欄は5px、主ボタンは4px、シート・カード・パネルは3px、
      一行の入力欄と小さな要素は2px。件数やメタ情報のピルだけを丸くする。
    */
    --rx-radius-mark: 0.125rem;
    --rx-radius-control: 0.3125rem;
    --rx-radius-primary: 0.25rem;
    --rx-radius-field: 0.1875rem;
    --rx-radius-surface: 0.1875rem;
    --rx-radius-sheet: 0.1875rem;
    --rx-radius-pill: 999rem;
    /*
      状態を示す線と模様。破線は「ここに置ける」ドロップ先と「これから」のStepsやTimeline、
      斜線は使えない枠、太枠は今・編集中を示す。寸法をここで一つにし、各コンポーネントで描き直さない。
    */
    --rx-dash: 0.25rem;
    --rx-dash-gap: 0.1875rem;
    --rx-perforation: color-mix(in srgb, var(--rx-muted) 55%, var(--rx-surface));
    /*
      使えない枠や欄の面。Retrixは斜線を使わず、淡い灰色の平らな面にする（名前はPlyから引き継いでいる）。
    */
    /* 使えない枠の淡い灰色の面（Retrixは斜線を使わない。名前はPlyから引き継いでいる）。 */
    --rx-hatch: linear-gradient(var(--rx-gray-50), var(--rx-gray-50));
    /* 読み込み中の帯などで、模様を流す時の一周の幅。 */
    --rx-hatch-step: 0.5rem;
    --rx-frame-width: 0.125rem;
    /* 何を入れるか・何の値かを示す項目名の太さ。選択肢や値そのものは通常の太さのまま。 */
    --rx-label-weight: 600;
    --rx-measure: 40rem;
    /* シートの幅。BC2の実測どおり960px（structure.md「シート」）。 */
    --rx-page: 60rem;
    --rx-control-size: 1.5rem;
    --rx-control-compact: 1.375rem;
    --rx-control-font: var(--rx-label);
    --rx-control-leading: calc(17 / 12);
    --rx-button-font: var(--rx-label);
    /*
      控えめなButtonはBC2の実測どおり12pxの文字で高さ22px、largeは14pxの文字で高さ32px（一行のInputは24px、field.css）。
      枠を除いた内側の高さと文字の大きさの差を偶数にし、文字の上下の余りを整数pxに保つ（22 − 2 − 12 = 8、32 − 2 − 14 = 16）。
    */
    --rx-button-size: calc(22em / 12);
    --rx-button-large: calc(32em / 14);
    --rx-z-menu: 20;
  }
}