/*
 * SoftCloud 3.0 design tokens — shared by the homepage and the in-site tools.
 * Paper-white sky, deep-ocean ink, and the logo's teal-to-blue as the only brand colour.
 */
:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue",
        "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
        "Noto Sans CJK SC", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;

    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .64, 1);

    --radius-s: 10px;
    --radius-m: 16px;
    --radius-l: 24px;
    --radius-xl: 32px;

    --paper: #f3f5f6;
    --paper-sunk: #e9edef;
    --surface: #ffffff;
    --ink: #0d1f2a;
    --ink-soft: #445664;
    --ink-faint: #627382;
    --line: rgba(13, 31, 42, .1);
    --line-strong: rgba(13, 31, 42, .2);
    --accent: #0a7399;
    --accent-ink: #ffffff;
    --brand-teal: #0fa896;
    --brand-ocean: #1785b5;
    --good: #0a8f6f;
    --bad: #cf4b3f;
    --shadow-s: 0 1px 2px rgba(13, 31, 42, .05), 0 6px 16px -8px rgba(13, 31, 42, .12);
    --shadow-m: 0 1px 2px rgba(13, 31, 42, .04), 0 24px 48px -24px rgba(13, 45, 66, .28);
    --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);

    /* One tone per product. */
    --tone-rhyme: #1583b4;
    --tone-words: #0c9584;
    --tone-focus: #5263d4;
    --tone-sbti: #d95f3b;

    color-scheme: light;
}

[data-theme="dark"] {
    --paper: #0a141b;
    --paper-sunk: #060d13;
    --surface: #111e27;
    --ink: #eaf2f6;
    --ink-soft: #a6b8c4;
    --ink-faint: #8196a4;
    --line: rgba(190, 225, 245, .1);
    --line-strong: rgba(190, 225, 245, .22);
    --accent: #5cc4ea;
    --accent-ink: #06141c;
    --brand-teal: #3fd6c3;
    --brand-ocean: #58bdea;
    --good: #46d3a8;
    --bad: #ff8a7a;
    --shadow-s: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px -8px rgba(0, 0, 0, .5);
    --shadow-m: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 48px -24px rgba(0, 0, 0, .7);

    --tone-rhyme: #56b9e8;
    --tone-words: #3fd0bd;
    --tone-focus: #93a0ff;
    --tone-sbti: #ff9471;

    color-scheme: dark;
}