/*
 * yzworkstation design tokens.
 *
 * A restrained neutral system: near-white page, white cards, one blue for
 * action. Depth comes from soft elevation and generous space, not from rules
 * or saturated fields. Chinese carries the information; English appears only
 * as the brand line, never mixed inside a Chinese sentence.
 */

:root {
  /* Neutrals */
  --grey-0: #ffffff;
  --grey-05: #fbfbfd;
  --grey-1: #f5f5f7;
  --grey-2: #ebebef;
  --grey-3: #d9d9de;
  --grey-4: #c7c7cc;
  --ink-0: #1d1d1f;
  --ink-1: #515154;
  --ink-2: #6e6e73;
  --ink-3: #86868b;

  /* Action blue */
  --blue-500: #0a6ed1;
  --blue-600: #0857a8;
  --blue-050: #e8f1fb;

  /* State */
  --red-500: #c8342a;
  --amber-500: #8a6210;
  --green-500: #1c7a53;

  /* Night neutrals */
  --night-0: #0d0d0f;
  --night-1: #17171a;
  --night-2: #202024;
  --night-3: #2e2e33;
  --night-4: #3a3a40;
  --night-ink: #f5f5f7;
  --night-ink-1: #c8c8cd;
  --night-ink-2: #9a9aa0;
  --night-blue: #4c9bf5;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  /* Shape */
  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.5rem;
  --border-thin: 1px;

  /* Elevation */
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 20px rgb(0 0 0 / 0.05);
  --shadow-card-hover: 0 2px 6px rgb(0 0 0 / 0.06), 0 18px 42px rgb(0 0 0 / 0.10);
  --shadow-float: 0 8px 20px rgb(0 0 0 / 0.10), 0 24px 60px rgb(0 0 0 / 0.14);

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Noto Sans CJK SC", "Hiragino Sans GB", sans-serif;
  --font-display: "yzworkstation Display", var(--font-sans);
  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: clamp(1.25rem, 1.6vw, 1.4rem);
  --text-2xl: clamp(1.5rem, 2.2vw, 1.85rem);
  --text-3xl: clamp(1.9rem, 3.4vw, 2.75rem);
  --text-hero: clamp(2.5rem, 5.6vw, 4.25rem);

  /* Motion */
  --duration-fast: 140ms;
  --duration-normal: 260ms;
  --duration-slow: 420ms;
  /*
   * `--ease-out` is osu!lazer's OutQuint. In ppy/osu the UI uses OutQuint for
   * about 70% of every transform it writes (1342 of ~1990 `Easing.*` uses in
   * osu.Game); the previous value here was closer to OutCubic and sat up to
   * 0.17 away from it mid-curve, which is most of why things felt soft.
   */
  --ease-out: var(--ease-out-quint);

  /* Animation specification aliases and extended timing scale. Existing
   * duration tokens remain the public baseline for incumbent components. */
  --dur-instant: 90ms;
  --dur-fast: var(--duration-fast);
  --dur-normal: var(--duration-normal);
  --dur-slow: var(--duration-slow);
  --dur-entrance: 620ms;
  --dur-transition: 480ms;
  --dur-ambient: 14s;
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-emphasis: cubic-bezier(0.2, 0, 0, 1);
  --stagger: 60ms;
  --stagger-max: 8;

  /*
   * osu!lazer's curves, from osu-framework's DefaultEasingFunction (the
   * framework is a NuGet dependency of ppy/osu, so these formulas are not in
   * that repository — only their use is).
   *
   * OutQuint and InQuint are close enough to a cubic Bézier (max error 0.011)
   * to use one. The elastic curves are not: a Bézier can overshoot once, and
   * OutElastic rings. They are sampled into `linear()` from the framework's
   * own formula, end-offset term included, so they land on exactly 1:
   *   OutElastic      2^(-10t)·sin((t − .075)·2π/.3) + 1 − 2^-11·t      37% overshoot
   *   OutElasticHalf  2^(-10t)·sin((t/2 − .075)·2π/.3) + 1 − k·t        15% overshoot
   * The fallbacks below apply wherever `linear()` is unsupported.
   */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-quint: cubic-bezier(0.64, 0, 0.78, 0);
  --ease-out-sine: cubic-bezier(0.61, 1, 0.88, 1);
  --ease-in-sine: cubic-bezier(0.12, 0, 0.39, 0);
  --ease-inout-sine: cubic-bezier(0.37, 0, 0.63, 1);
  --ease-out-elastic: cubic-bezier(0.16, 1.36, 0.3, 1);
  --ease-out-elastic-half: cubic-bezier(0.22, 1.3, 0.36, 1);

  /* Press feedback (osu!lazer model): a quick compress on the way down, an
   * elastic settle on release. Only ever applied to transform on pressable
   * controls; the elastic overshoot is what gives the release its life. */
  --dur-press: 110ms;
  --dur-release: 400ms;
  --ease-elastic: cubic-bezier(0.22, 1.3, 0.36, 1);

  /* Layout */
  --shell: 71rem;
  /* The header and footer span a little wider than the reading column. */
  --shell-wide: 82rem;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --section-space: clamp(3.5rem, 7vw, 6.5rem);
  --content-measure: 66ch;

  --header-height: 3.5rem;
  --button-height: 2.75rem;
  --button-radius: 999px;
  --dialog-radius: var(--radius-lg);
}

:root {
  /*
   * Semantic: light. Neutral greys with no tint, white surfaces, and one
   * colour — the brand's cobalt (#2e5bff, 5.2:1 on white) — for links,
   * primary actions, selection and focus. The page is white; bands of
   * #f5f5f7 set sections and page headers apart, the way large product
   * sites divide a page, instead of boxes.
   */
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-strong: #ffffff;
  --color-surface-sunken: #f5f5f7;
  --color-text: #1d1d1f;
  --color-text-soft: #424245;
  --color-text-muted: #6e6e73;
  --color-text-faint: #77777d;
  --color-line: #d2d2d7;
  --color-rule: #c7c7cc;
  --color-accent: #2e5bff;
  --color-accent-strong: #1d46e0;
  --color-accent-wash: #eef2ff;
  --color-on-accent: #ffffff;
  --color-seal: var(--color-accent);
  --color-band: #f5f5f7;
  --color-band-strong: #e8e8ed;
  --color-error: var(--red-500);
  --color-warning: var(--amber-500);
  --color-success: var(--green-500);
  --focus-ring: 0 0 0 4px rgb(46 91 255 / 0.25);
}

html[data-theme="dark"] {
  /*
   * Semantic: dark. Near-black page, graphite surfaces, and a lighter
   * cobalt (#6f8dff, 6.3:1 on the page) for links. Filled accents carry
   * dark ink, since white on that cobalt is only 3:1.
   */
  --color-bg: #0f0f11;
  --color-surface: #1c1c1e;
  --color-surface-strong: #2c2c2e;
  --color-surface-sunken: #161618;
  --color-text: #f5f5f7;
  --color-text-soft: #d2d2d7;
  --color-text-muted: #a1a1a6;
  --color-text-faint: #8e8e93;
  --color-line: #2f2f33;
  --color-rule: #3a3a3e;
  --color-accent: #6f8dff;
  --color-accent-strong: #9bb0ff;
  --color-accent-wash: #1b2340;
  --color-on-accent: #0a1033;
  --color-seal: var(--color-accent);
  --color-band: #161618;
  --color-band-strong: #1f1f22;
  --color-error: #f0796a;
  --color-warning: #d7a95f;
  --color-success: #5cb894;
  --focus-ring: 0 0 0 4px rgb(111 141 255 / 0.32);
  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 20px rgb(0 0 0 / 0.35);
  --shadow-card-hover: 0 2px 6px rgb(0 0 0 / 0.45), 0 18px 42px rgb(0 0 0 / 0.5);
  --shadow-float: 0 8px 20px rgb(0 0 0 / 0.5), 0 24px 60px rgb(0 0 0 / 0.6);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    /*
     * Semantic: dark. Near-black page, graphite surfaces, and a lighter
     * cobalt (#6f8dff, 6.3:1 on the page) for links. Filled accents carry
     * dark ink, since white on that cobalt is only 3:1.
     */
    --color-bg: #0f0f11;
    --color-surface: #1c1c1e;
    --color-surface-strong: #2c2c2e;
    --color-surface-sunken: #161618;
    --color-text: #f5f5f7;
    --color-text-soft: #d2d2d7;
    --color-text-muted: #a1a1a6;
    --color-text-faint: #8e8e93;
    --color-line: #2f2f33;
    --color-rule: #3a3a3e;
    --color-accent: #6f8dff;
    --color-accent-strong: #9bb0ff;
    --color-accent-wash: #1b2340;
    --color-on-accent: #0a1033;
    --color-seal: var(--color-accent);
    --color-band: #161618;
    --color-band-strong: #1f1f22;
    --color-error: #f0796a;
    --color-warning: #d7a95f;
    --color-success: #5cb894;
    --focus-ring: 0 0 0 4px rgb(111 141 255 / 0.32);
    --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 20px rgb(0 0 0 / 0.35);
    --shadow-card-hover: 0 2px 6px rgb(0 0 0 / 0.45), 0 18px 42px rgb(0 0 0 / 0.5);
    --shadow-float: 0 8px 20px rgb(0 0 0 / 0.5), 0 24px 60px rgb(0 0 0 / 0.6);
  }
}

@media (max-width: 48rem) {
  :root {
    --section-space: 3.25rem;
  }
}

@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-out-elastic: linear(0, 0.1628, 0.392, 0.6464, 0.8906, 1.0974, 1.25, 1.3412, 1.3729, 1.3535, 1.2959, 1.2149, 1.1249, 1.0386, 0.9654, 0.9115, 0.8792, 0.868, 0.8749, 0.8952, 0.9238, 0.9556, 0.9861, 1.012, 1.0311, 1.0425, 1.0464, 1.044, 1.0368, 1.0266, 1.0154, 1.0046, 0.9954, 0.9887, 0.9846, 0.9832, 0.9841, 0.9866, 0.9902, 0.9942, 0.998, 1.0012, 1.0036, 1.005, 1.0055, 1.0052, 1.0043, 1.003, 1.0016, 1.0002, 0.9991, 0.9982, 0.9977, 0.9975, 0.9976, 0.9979, 0.9984, 0.9988, 0.9993, 0.9997, 1);
    --ease-out-elastic-half: linear(0, 0.1877, 0.3876, 0.5795, 0.75, 0.8911, 0.9999, 1.0769, 1.1249, 1.1485, 1.153, 1.1435, 1.1249, 1.1014, 1.0764, 1.0524, 1.0311, 1.0134, 0.9998, 0.9901, 0.9841, 0.9812, 0.9806, 0.9818, 0.9841, 0.987, 0.9901, 0.9931, 0.9958, 0.9979, 0.9996, 1.0008, 1.0016, 1.0019, 1.002, 1.0018, 1.0015, 1.0011, 1.0007, 1.0003, 1);
  }
}