@import "./component-metrics.css";

/* inter-arrows:start — generated by scripts/fonts/embed-arrows.mjs */
/* Inter 4.1, SIL Open Font License 1.1; see fonts/Inter-LICENSE.md. */
@font-face {
  font-family: "Inter Arrows";
  src: url("data:font/woff2;base64,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") format("woff2");
  unicode-range: U+2190-21FF, U+27F0-27FF, U+2900-297F, U+2B00-2BFF;
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* inter-arrows:end */

/* Shared component tokens. Scoped names keep embedded documents independent.
 * Products may set tokens at their surface; component implementations stay shared.
 */
:root {
  /* Component scale is independent of an embedded document. */
  --ds-sf: 1;

  /* ----------------------------------------------------------
   SIZING SCALE
   One base unit and its multipliers, as in DS one.
   ---------------------------------------------------------- */

  --ds-1: 20px;
  --ds-01: calc(var(--ds-1) * 0.1);
  --ds-025: calc(var(--ds-1) * 0.25);
  --ds-05: calc(var(--ds-1) * 0.5);
  --ds-08: calc(var(--ds-1) * 0.8);
  --ds-2: calc(var(--ds-1) * 2);
  --ds-3: calc(var(--ds-1) * 3);
  --ds-4: calc(var(--ds-1) * 4);

  /* ----------------------------------------------------------
   PALETTE
   The same values as palette.ts and one.css; the accent is Apple green.
   ---------------------------------------------------------- */

  --ds-white: #ffffff;
  --ds-black: #2a2a2a;
  --ds-slate: #1e1e1e;
  --ds-slate-light: #e6e6e6;
  --ds-slate-dark: #3c3c3c;
  --ds-grey: #797979;

  --ds-tuned-red: #ff5f5f;
  --ds-red-for-blood: #de0331;
  --ds-pink: #f5aad1;
  --ds-sharp-blue: #594dff;
  --ds-zenith-blue: #ccccff;
  --ds-apple-green: #99ff73;
  /* Dark Apple green keeps a white switch thumb clear in either scheme. */
  --ds-switch-track-on: #529d36;
  --ds-yellow: #eaff00;
  --ds-orange: #fec20d;

  --ds-accent-color: var(--ds-apple-green);

  /* ----------------------------------------------------------
   TYPE
   ---------------------------------------------------------- */

  --ds-typeface-regular:
    "Inter Arrows", "GT America", "GT-America-Standard-Regular", Inter, system-ui, -apple-system, sans-serif;
  /* The medium face for headings and strong text; one.css loads it as GT-America-Standard-Medium. */
  --ds-typeface-medium:
    "Inter Arrows", "GT-America-Standard-Medium", "GT America", Inter, system-ui, -apple-system, sans-serif;
  --ds-typeface-compressed: "Inter Arrows", "GT-America-Compressed-Regular", var(--ds-typeface-regular);
  --ds-typeface-mono: "Inter Arrows", "Iosevka", "Iosevka Extended", ui-monospace, "SF Mono", Menlo, monospace;
  /* Japanese and Chinese: Noto Sans when cjk.css (or the product) loads it,
     else the reader's own face. Latin keeps GT America. */
  --ds-typeface-regular-jp:
    "Inter Arrows", "GT America", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans CJK JP", sans-serif;
  --ds-typeface-regular-zh-hans:
    "Inter Arrows", "GT America", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --ds-typeface-regular-zh-hant:
    "Inter Arrows", "GT America", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif;
  /* GT America exposes circular dots as stylistic set 05. */
  --ds-font-features: "ss05" 1;

  --ds-type-weight-default: 400;
  --ds-type-weight-bold: 500;

  /* ----------------------------------------------------------
   SURFACES
   The chrome's `--chrome-panel-*` tokens read these.
   ---------------------------------------------------------- */

  --ds-paper: light-dark(#f4f4f4, #2c2c2c);
  --ds-text-color: light-dark(var(--ds-black), var(--ds-white));
  --ds-text-color-muted: light-dark(#5f5f5f, #cacaca);
  /* 5.1:1 on paper and 4.6:1 on the fill; the palette grey (#797979) reaches only 4.35:1 (color.text-contrast). */
  --ds-title-color: light-dark(#6e6e6e, #9a9a9a);
  /* Text that reports a failure or warns of a loss. Red for blood on light
     paper and Tuned red on dark: both palette colours, legible as 14px text. */
  --ds-danger-color: light-dark(var(--ds-red-for-blood), var(--ds-tuned-red));
  /* Text that asks for care before something goes wrong. Orange is too light
     for text on light paper and so is its dark-mode version, so light paper
     takes Orange's dim (#4c3f1a, its pastel in dark mode); dark paper takes
     Orange itself. Both read above 4.5:1 as 14px text. */
  --ds-warning-color: light-dark(#4c3f1a, var(--ds-orange));
  /* What went well or is done. Apple green is too light for text and marks on
     light paper, so light paper takes it deepened with the ink (an amount's green
     for money in); dark paper takes Apple green itself. */
  --ds-success-color: light-dark(color-mix(in oklab, var(--ds-apple-green) 30%, var(--ds-black)), var(--ds-apple-green));
  --ds-border-color: light-dark(#d8d8d8, #3d3d3d);
  --ds-fill: light-dark(var(--ds-slate-light), var(--ds-slate-dark));
  --ds-fill-hover: light-dark(#e2e2e2, #404040);
  --ds-focus-ring: var(--ds-sharp-blue);
  /* A row a person presses (ds-row, .ds-row, a tree's rows, ds-sidebar): under
     the pointer, pressed, and the current destination or selected row, which
     also takes the medium weight. */
  --ds-row-fill-hover: var(--ds-fill);
  --ds-row-fill-press: color-mix(in srgb, var(--ds-fill-hover) 92%, var(--ds-text-color));
  --ds-row-fill-current: var(--ds-fill-hover);
  --ds-row-current-weight: var(--ds-type-weight-bold);

  --ds-button-text-color: var(--ds-text-color);
  --ds-button-background-color-primary: var(--ds-accent-color);
  --ds-button-text-color-on-accent: var(--ds-black);
  --ds-button-background-color-secondary: var(--ds-fill);
  --ds-icon-color: currentColor;

  /* Shared fields, including the row treatment of a form's settings rows. */
  --ds-input-background: light-dark(#e8e8e8, #303030);
  --ds-input-color: light-dark(#2a2a2a, #f5f5f5);
  --ds-input-placeholder-color: var(--ds-text-color-muted);
  --ds-input-disabled-color: light-dark(#555555, #d0d0d0);
  --ds-input-reveal-color: light-dark(#1e1e1e, #f5f5f5);
}

/* A page written in Japanese or Chinese sets its labels in that language's
   face: Chinese in Simplified characters, as the shared words are written,
   unless it says Traditional. */
:root:lang(ja) {
  --ds-typeface-regular: var(--ds-typeface-regular-jp);
}

:root:lang(zh) {
  --ds-typeface-regular: var(--ds-typeface-regular-zh-hans);
}

:root:lang(zh-Hant),
:root:lang(zh-TW),
:root:lang(zh-HK),
:root:lang(zh-MO) {
  --ds-typeface-regular: var(--ds-typeface-regular-zh-hant);
}