/*
 * Sukud design system - tokens
 *
 * Three layers, and components only ever read the last two:
 *   1. Scales      --sk-{hue}-{1..12}  raw 12-step colour ramps per theme
 *                    1-2 backgrounds, 3-5 soft fills, 6-8 borders,
 *                    9-10 solid fills, 11-12 text
 *   2. Semantic    --sk-canvas, --sk-surface, --sk-fg, --sk-border ...
 *   3. Tone        --t-solid, --t-soft, --t-text ... set by .sk-tone-{name}
 *                  so one component rule serves every intent.
 *
 * Change a value here and it changes everywhere the system is used.
 */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* ---------- 1. Scales (light) ---------- */
  /* brand */
  --sk-brand-1: #fdfdfe; --sk-brand-2: #f7f9ff; --sk-brand-3: #eff1ff; --sk-brand-4: #e5e9fe; --sk-brand-5: #dadffe; --sk-brand-6: #cbd3ff;
  --sk-brand-7: #b6c0fe; --sk-brand-8: #99a5ff; --sk-brand-9: #5856eb; --sk-brand-10: #4f4adf; --sk-brand-11: #4e4bd7; --sk-brand-12: #222168;
  --sk-brand-rgb: 88 86 235;
  /* violet */
  --sk-violet-1: #fdfdfe; --sk-violet-2: #f9f8fe; --sk-violet-3: #f2f0ff; --sk-violet-4: #eae7ff; --sk-violet-5: #e1dcfe; --sk-violet-6: #d6cefe;
  --sk-violet-7: #c5bafe; --sk-violet-8: #af9df9; --sk-violet-9: #7c4ee6; --sk-violet-10: #7242da; --sk-violet-11: #6c3fce; --sk-violet-12: #311b63;
  --sk-violet-rgb: 124 78 230;
  /* teal */
  --sk-teal-1: #fafefd; --sk-teal-2: #f2fbf9; --sk-teal-3: #dff9f3; --sk-teal-4: #caf5ed; --sk-teal-5: #b2f0e4; --sk-teal-6: #97e8d9;
  --sk-teal-7: #76dac9; --sk-teal-8: #5dc2b2; --sk-teal-9: #0a8577; --sk-teal-10: #087a6d; --sk-teal-11: #097568; --sk-teal-12: #003630;
  --sk-teal-rgb: 10 133 119;
  /* green */
  --sk-green-1: #fbfefc; --sk-green-2: #f4fbf6; --sk-green-3: #e5f8e9; --sk-green-4: #d5f4dc; --sk-green-5: #c3eecd; --sk-green-6: #aee6bb;
  --sk-green-7: #92d8a4; --sk-green-8: #68c584; --sk-green-9: #178445; --sk-green-10: #03793c; --sk-green-11: #10783e; --sk-green-12: #06381a;
  --sk-green-rgb: 23 132 69;
  /* amber */
  --sk-amber-1: #fffdfa; --sk-amber-2: #fdf8f2; --sk-amber-3: #fef0de; --sk-amber-4: #fee6ca; --sk-amber-5: #fcdbb3; --sk-amber-6: #f7ce9a;
  --sk-amber-7: #eeba79; --sk-amber-8: #df9f44; --sk-amber-9: #f5a524; --sk-amber-10: #eb9b0d; --sk-amber-11: #895904; --sk-amber-12: #412801;
  --sk-amber-rgb: 245 165 36;
  /* orange */
  --sk-orange-1: #fefdfc; --sk-orange-2: #fef7f5; --sk-orange-3: #feeeea; --sk-orange-4: #ffe4db; --sk-orange-5: #fed8cc; --sk-orange-6: #fec7b6;
  --sk-orange-7: #ffae94; --sk-orange-8: #f38e6f; --sk-orange-9: #d4460c; --sk-orange-10: #c53e03; --sk-orange-11: #ae3502; --sk-orange-12: #541501;
  --sk-orange-rgb: 212 70 12;
  /* red */
  --sk-red-1: #fefdfc; --sk-red-2: #fff7f7; --sk-red-3: #feeeed; --sk-red-4: #fee3e2; --sk-red-5: #ffd6d4; --sk-red-6: #fec5c3;
  --sk-red-7: #feabaa; --sk-red-8: #f48a8a; --sk-red-9: #d92d43; --sk-red-10: #cc1c39; --sk-red-11: #ba1131; --sk-red-12: #590614;
  --sk-red-rgb: 217 45 67;
  /* blue */
  --sk-blue-1: #fcfdfe; --sk-blue-2: #f6f9ff; --sk-blue-3: #ebf3ff; --sk-blue-4: #e0ebfe; --sk-blue-5: #d2e2fe; --sk-blue-6: #c0d7fe;
  --sk-blue-7: #a5c6fe; --sk-blue-8: #7fadfe; --sk-blue-9: #2a6ae0; --sk-blue-10: #1f5fd4; --sk-blue-11: #205cca; --sk-blue-12: #0b2a62;
  --sk-blue-rgb: 42 106 224;
  /* pink */
  --sk-pink-1: #fefcfd; --sk-pink-2: #fff6fa; --sk-pink-3: #ffecf4; --sk-pink-4: #ffe1ed; --sk-pink-5: #ffd3e5; --sk-pink-6: #ffc1db;
  --sk-pink-7: #f8a9cc; --sk-pink-8: #eb89b7; --sk-pink-9: #c93a88; --sk-pink-10: #bd2d7e; --sk-pink-11: #ab2471; --sk-pink-12: #520e34;
  --sk-pink-rgb: 201 58 136;
  /* ink */
  --sk-ink-1: #fdfdfe; --sk-ink-2: #f8f9fb; --sk-ink-3: #f1f2f7; --sk-ink-4: #e8eaf3; --sk-ink-5: #dee0ed; --sk-ink-6: #d3d5e1;
  --sk-ink-7: #c2c4d0; --sk-ink-8: #aaacb8; --sk-ink-9: #6e7183; --sk-ink-10: #646779; --sk-ink-11: #616471; --sk-ink-12: #2c2d36;
  --sk-ink-rgb: 110 113 131;

  /* ---------- 2. Semantic (light) ---------- */
  --sk-canvas: #f4f5f8;
  --sk-surface: #ffffff;
  --sk-surface-raised: #ffffff;
  --sk-surface-sunken: var(--sk-ink-2);
  --sk-surface-hover: var(--sk-ink-3);
  --sk-surface-active: var(--sk-ink-4);
  --sk-surface-inverse: #1b1c24;
  --sk-scrim: rgb(15 16 26 / 0.42);

  --sk-border-subtle: #eceef4;
  --sk-border: #e1e3ec;
  --sk-border-strong: var(--sk-ink-7);

  --sk-fg: #1b1c24;
  --sk-fg-muted: #555869;
  --sk-fg-subtle: #686b7c;
  --sk-fg-disabled: var(--sk-ink-8);
  --sk-fg-inverse: #ffffff;

  --sk-focus: var(--sk-brand-9);
  --sk-focus-ring: 0 0 0 3px rgb(var(--sk-brand-rgb) / 0.24);
  --sk-bevel: inset 0 1px 0 rgb(255 255 255 / 0.7);
  --sk-selection: rgb(var(--sk-brand-rgb) / 0.18);

  --sk-shadow-rgb: 22 24 40;
  --sk-shadow-xs: 0 1px 2px rgb(var(--sk-shadow-rgb) / 0.06);
  --sk-shadow-sm: 0 1px 2px rgb(var(--sk-shadow-rgb) / 0.05), 0 2px 6px -2px rgb(var(--sk-shadow-rgb) / 0.08);
  --sk-shadow-md: 0 1px 2px rgb(var(--sk-shadow-rgb) / 0.04), 0 6px 14px -4px rgb(var(--sk-shadow-rgb) / 0.1), 0 12px 24px -10px rgb(var(--sk-shadow-rgb) / 0.08);
  --sk-shadow-lg: 0 2px 4px rgb(var(--sk-shadow-rgb) / 0.04), 0 14px 28px -8px rgb(var(--sk-shadow-rgb) / 0.14), 0 28px 56px -16px rgb(var(--sk-shadow-rgb) / 0.12);
  --sk-shadow-xl: 0 4px 8px rgb(var(--sk-shadow-rgb) / 0.05), 0 28px 64px -12px rgb(var(--sk-shadow-rgb) / 0.26);

  /* ---------- Typography ---------- */
  --sk-font-sans: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sk-font-display: 'Bricolage Grotesque', 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --sk-font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Menlo, Consolas, monospace;

  --sk-text-2xs: 0.6875rem;  --sk-leading-2xs: 1rem;
  --sk-text-xs: 0.75rem;     --sk-leading-xs: 1rem;
  --sk-text-sm: 0.8125rem;   --sk-leading-sm: 1.125rem;
  --sk-text-md: 0.875rem;    --sk-leading-md: 1.25rem;
  --sk-text-lg: 1rem;        --sk-leading-lg: 1.5rem;
  --sk-text-xl: 1.125rem;    --sk-leading-xl: 1.625rem;
  --sk-text-2xl: 1.25rem;    --sk-leading-2xl: 1.75rem;
  --sk-display-sm: 1.5rem;   --sk-leading-display-sm: 1.95rem;
  --sk-display-md: 1.875rem; --sk-leading-display-md: 2.25rem;
  --sk-display-lg: 2.25rem;  --sk-leading-display-lg: 2.6rem;
  --sk-display-xl: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem);

  --sk-weight-regular: 400;
  --sk-weight-medium: 500;
  --sk-weight-semibold: 600;
  --sk-weight-bold: 700;
  --sk-weight-black: 800;
  --sk-tracking-display: -0.025em;
  --sk-tracking-tight: -0.01em;
  --sk-tracking-caps: 0.06em;

  /* ---------- Space (4px grid) ---------- */
  --sk-space-0: 0;
  --sk-space-px: 1px;
  --sk-space-0-5: 2px;
  --sk-space-1: 4px;
  --sk-space-1-5: 6px;
  --sk-space-2: 8px;
  --sk-space-2-5: 10px;
  --sk-space-3: 12px;
  --sk-space-4: 16px;
  --sk-space-5: 20px;
  --sk-space-6: 24px;
  --sk-space-7: 28px;
  --sk-space-8: 32px;
  --sk-space-10: 40px;
  --sk-space-12: 48px;
  --sk-space-16: 64px;
  --sk-space-20: 80px;

  /* ---------- Radius ---------- */
  --sk-radius-xs: 6px;
  --sk-radius-sm: 8px;
  --sk-radius-md: 10px;
  --sk-radius-lg: 14px;
  --sk-radius-xl: 18px;
  --sk-radius-2xl: 24px;
  --sk-radius-full: 999px;
  --sk-radius-control: var(--sk-radius-md);
  --sk-radius-card: 16px;

  /* ---------- Sizing ---------- */
  --sk-control-xs: 26px;
  --sk-control-sm: 32px;
  --sk-control-md: 38px;
  --sk-control-lg: 46px;
  --sk-icon-stroke: 1.85;

  --sk-sidebar-w: 264px;
  --sk-rail-w: 72px;
  --sk-topbar-h: 60px;
  --sk-bottomnav-h: 62px;
  --sk-content-max: 1240px;
  --sk-gutter: clamp(16px, 3.2vw, 32px);
  --sk-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---------- Motion ---------- */
  --sk-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sk-ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --sk-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --sk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sk-ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1.25);
  --sk-ease-glide: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-like, no overshoot */
  --sk-dur-instant: 80ms;
  --sk-dur-fast: 140ms;
  --sk-dur-base: 200ms;
  --sk-dur-slow: 320ms;
  --sk-dur-slower: 520ms;

  /* ---------- Layers ---------- */
  --sk-z-raised: 1;
  --sk-z-sticky: 20;
  --sk-z-header: 30;
  --sk-z-nav: 40;
  --sk-z-dropdown: 50;
  --sk-z-overlay: 60;
  --sk-z-modal: 70;
  --sk-z-popover: 80;
  --sk-z-toast: 90;
  --sk-z-tooltip: 100;
}

/* Touch screens get bigger targets without any per-component work. */
@media (pointer: coarse) {
  :root {
    --sk-control-sm: 36px;
    --sk-control-md: 44px;
    --sk-control-lg: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sk-dur-instant: 1ms;
    --sk-dur-fast: 1ms;
    --sk-dur-base: 1ms;
    --sk-dur-slow: 1ms;
    --sk-dur-slower: 1ms;
  }
}

/* ---------- Dark theme ----------
 * The head script in ui/layouts/base.html resolves "system" to a concrete
 * data-theme before first paint, so only one dark block is needed. Any
 * element can scope a theme with data-theme="dark" or "light". */
[data-theme="dark"] {
  color-scheme: dark;

  /* brand */
  --sk-brand-1: #101116; --sk-brand-2: #15171e; --sk-brand-3: #1e2136; --sk-brand-4: #252949; --sk-brand-5: #2e325b; --sk-brand-6: #383d6e;
  --sk-brand-7: #454c88; --sk-brand-8: #5b63b0; --sk-brand-9: #5856eb; --sk-brand-10: #6263f9; --sk-brand-11: #adb8ff; --sk-brand-12: #e4e8ff;
  --sk-brand-rgb: 88 86 235;
  /* violet */
  --sk-violet-1: #121116; --sk-violet-2: #17161d; --sk-violet-3: #231f35; --sk-violet-4: #2d2747; --sk-violet-5: #382f58; --sk-violet-6: #44396b;
  --sk-violet-7: #544784; --sk-violet-8: #6e5dab; --sk-violet-9: #7c4ee6; --sk-violet-10: #875bf4; --sk-violet-11: #bfb1fe; --sk-violet-12: #e9e6fe;
  --sk-violet-rgb: 124 78 230;
  /* teal */
  --sk-teal-1: #0d1312; --sk-teal-2: #101918; --sk-teal-3: #062924; --sk-teal-4: #01352e; --sk-teal-5: #004039; --sk-teal-6: #004e45;
  --sk-teal-7: #056056; --sk-teal-8: #077d70; --sk-teal-9: #0a8577; --sk-teal-10: #239183; --sk-teal-11: #87cec1; --sk-teal-12: #d7f0eb;
  --sk-teal-rgb: 10 133 119;
  /* green */
  --sk-green-1: #0e130f; --sk-green-2: #131914; --sk-green-3: #132819; --sk-green-4: #12351e; --sk-green-5: #134123; --sk-green-6: #174f2b;
  --sk-green-7: #1d6136; --sk-green-8: #277f47; --sk-green-9: #178445; --sk-green-10: #2a9050; --sk-green-11: #8bd19e; --sk-green-12: #d8f1dd;
  --sk-green-rgb: 23 132 69;
  /* amber */
  --sk-amber-1: #14110d; --sk-amber-2: #1b1610; --sk-amber-3: #2f1f0b; --sk-amber-4: #3e2705; --sk-amber-5: #4c3002; --sk-amber-6: #5c3a02;
  --sk-amber-7: #724900; --sk-amber-8: #935f04; --sk-amber-9: #f5a524; --sk-amber-10: #eb9b0d; --sk-amber-11: #edb162; --sk-amber-12: #fde6ca;
  --sk-amber-rgb: 245 165 36;
  /* orange */
  --sk-orange-1: #16100e; --sk-orange-2: #1d1513; --sk-orange-3: #331c14; --sk-orange-4: #452116; --sk-orange-5: #552819; --sk-orange-6: #67301f;
  --sk-orange-7: #7f3c28; --sk-orange-8: #a54f34; --sk-orange-9: #d4460c; --sk-orange-10: #e25421; --sk-orange-11: #fea386; --sk-orange-12: #fee3da;
  --sk-orange-rgb: 212 70 12;
  /* red */
  --sk-red-1: #161010; --sk-red-2: #1d1514; --sk-red-3: #341b1b; --sk-red-4: #452020; --sk-red-5: #562627; --sk-red-6: #682e2f;
  --sk-red-7: #80393b; --sk-red-8: #a64b4e; --sk-red-9: #d92d43; --sk-red-10: #e83d4f; --sk-red-11: #ff9f9f; --sk-red-12: #fee2e1;
  --sk-red-rgb: 217 45 67;
  /* blue */
  --sk-blue-1: #0f1216; --sk-blue-2: #14171e; --sk-blue-3: #182336; --sk-blue-4: #1c2c49; --sk-blue-5: #21365c; --sk-blue-6: #28416f;
  --sk-blue-7: #335188; --sk-blue-8: #436ab1; --sk-blue-9: #2a6ae0; --sk-blue-10: #3677ee; --sk-blue-11: #9abefe; --sk-blue-12: #dfeafe;
  --sk-blue-rgb: 42 106 224;
  /* pink */
  --sk-pink-1: #151012; --sk-pink-2: #1c1518; --sk-pink-3: #311a25; --sk-pink-4: #421f30; --sk-pink-5: #52253b; --sk-pink-6: #632e48;
  --sk-pink-7: #7a3959; --sk-pink-8: #9e4b74; --sk-pink-9: #c93a88; --sk-pink-10: #d74894; --sk-pink-11: #fe99c8; --sk-pink-12: #ffe0ec;
  --sk-pink-rgb: 201 58 136;
  /* ink */
  --sk-ink-1: #111113; --sk-ink-2: #171719; --sk-ink-3: #212228; --sk-ink-4: #2a2c35; --sk-ink-5: #343640; --sk-ink-6: #40424c;
  --sk-ink-7: #50525c; --sk-ink-8: #696b76; --sk-ink-9: #6f7385; --sk-ink-10: #7b7f91; --sk-ink-11: #babdcc; --sk-ink-12: #e8e9ef;
  --sk-ink-rgb: 111 115 133;

  --sk-canvas: #0e0f12;
  --sk-surface: #16171b;
  --sk-surface-raised: #1c1d22;
  --sk-surface-sunken: #111215;
  --sk-surface-hover: #22232a;
  --sk-surface-active: #2a2c34;
  --sk-surface-inverse: #f1f2f6;
  --sk-scrim: rgb(0 0 0 / 0.62);

  --sk-border-subtle: #212228;
  --sk-border: #2a2b32;
  --sk-border-strong: #3d3f49;

  --sk-fg: #eeeff4;
  --sk-fg-muted: #b1b4c3;
  --sk-fg-subtle: #8e92a4;
  --sk-fg-disabled: #50525c;
  --sk-fg-inverse: #111215;

  --sk-focus: #8b8cff;
  --sk-focus-ring: 0 0 0 3px rgb(var(--sk-brand-rgb) / 0.42);
  --sk-bevel: inset 0 1px 0 rgb(255 255 255 / 0.045);
  --sk-selection: rgb(var(--sk-brand-rgb) / 0.4);

  --sk-shadow-rgb: 0 0 0;
  --sk-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
  --sk-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 6px -2px rgb(0 0 0 / 0.35);
  --sk-shadow-md: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 18px -6px rgb(0 0 0 / 0.5);
  --sk-shadow-lg: 0 2px 4px rgb(0 0 0 / 0.3), 0 18px 36px -10px rgb(0 0 0 / 0.6);
  --sk-shadow-xl: 0 4px 8px rgb(0 0 0 / 0.35), 0 32px 72px -12px rgb(0 0 0 / 0.75);
}

/* ---------- 3. Tones ----------
 * Every component colours itself from --t-*. Wrap anything in
 * .sk-tone-{name} (or pass tone= to a macro) to change its intent. */
:root,
[data-theme],
.sk-tone-brand {
  --t-solid: var(--sk-brand-9); --t-solid-hover: var(--sk-brand-10); --t-on: #fff;
  --t-subtle: var(--sk-brand-2); --t-soft: var(--sk-brand-3); --t-soft-hover: var(--sk-brand-4); --t-soft-active: var(--sk-brand-5);
  --t-border: var(--sk-brand-6); --t-border-strong: var(--sk-brand-8);
  --t-text: var(--sk-brand-11); --t-text-strong: var(--sk-brand-12); --t-rgb: var(--sk-brand-rgb);
}
.sk-tone-violet,
.sk-tone-xp {
  --t-solid: var(--sk-violet-9); --t-solid-hover: var(--sk-violet-10); --t-on: #fff;
  --t-subtle: var(--sk-violet-2); --t-soft: var(--sk-violet-3); --t-soft-hover: var(--sk-violet-4); --t-soft-active: var(--sk-violet-5);
  --t-border: var(--sk-violet-6); --t-border-strong: var(--sk-violet-8);
  --t-text: var(--sk-violet-11); --t-text-strong: var(--sk-violet-12); --t-rgb: var(--sk-violet-rgb);
}
.sk-tone-teal {
  --t-solid: var(--sk-teal-9); --t-solid-hover: var(--sk-teal-10); --t-on: #fff;
  --t-subtle: var(--sk-teal-2); --t-soft: var(--sk-teal-3); --t-soft-hover: var(--sk-teal-4); --t-soft-active: var(--sk-teal-5);
  --t-border: var(--sk-teal-6); --t-border-strong: var(--sk-teal-8);
  --t-text: var(--sk-teal-11); --t-text-strong: var(--sk-teal-12); --t-rgb: var(--sk-teal-rgb);
}
.sk-tone-success,
.sk-tone-green {
  --t-solid: var(--sk-green-9); --t-solid-hover: var(--sk-green-10); --t-on: #fff;
  --t-subtle: var(--sk-green-2); --t-soft: var(--sk-green-3); --t-soft-hover: var(--sk-green-4); --t-soft-active: var(--sk-green-5);
  --t-border: var(--sk-green-6); --t-border-strong: var(--sk-green-8);
  --t-text: var(--sk-green-11); --t-text-strong: var(--sk-green-12); --t-rgb: var(--sk-green-rgb);
}
.sk-tone-warning,
.sk-tone-amber,
.sk-tone-gold {
  --t-solid: var(--sk-amber-9); --t-solid-hover: var(--sk-amber-10); --t-on: #2b1a00;
  --t-subtle: var(--sk-amber-2); --t-soft: var(--sk-amber-3); --t-soft-hover: var(--sk-amber-4); --t-soft-active: var(--sk-amber-5);
  --t-border: var(--sk-amber-6); --t-border-strong: var(--sk-amber-8);
  --t-text: var(--sk-amber-11); --t-text-strong: var(--sk-amber-12); --t-rgb: var(--sk-amber-rgb);
}
.sk-tone-orange,
.sk-tone-streak {
  --t-solid: var(--sk-orange-9); --t-solid-hover: var(--sk-orange-10); --t-on: #fff;
  --t-subtle: var(--sk-orange-2); --t-soft: var(--sk-orange-3); --t-soft-hover: var(--sk-orange-4); --t-soft-active: var(--sk-orange-5);
  --t-border: var(--sk-orange-6); --t-border-strong: var(--sk-orange-8);
  --t-text: var(--sk-orange-11); --t-text-strong: var(--sk-orange-12); --t-rgb: var(--sk-orange-rgb);
}
.sk-tone-danger,
.sk-tone-red {
  --t-solid: var(--sk-red-9); --t-solid-hover: var(--sk-red-10); --t-on: #fff;
  --t-subtle: var(--sk-red-2); --t-soft: var(--sk-red-3); --t-soft-hover: var(--sk-red-4); --t-soft-active: var(--sk-red-5);
  --t-border: var(--sk-red-6); --t-border-strong: var(--sk-red-8);
  --t-text: var(--sk-red-11); --t-text-strong: var(--sk-red-12); --t-rgb: var(--sk-red-rgb);
}
.sk-tone-info,
.sk-tone-blue {
  --t-solid: var(--sk-blue-9); --t-solid-hover: var(--sk-blue-10); --t-on: #fff;
  --t-subtle: var(--sk-blue-2); --t-soft: var(--sk-blue-3); --t-soft-hover: var(--sk-blue-4); --t-soft-active: var(--sk-blue-5);
  --t-border: var(--sk-blue-6); --t-border-strong: var(--sk-blue-8);
  --t-text: var(--sk-blue-11); --t-text-strong: var(--sk-blue-12); --t-rgb: var(--sk-blue-rgb);
}
.sk-tone-pink {
  --t-solid: var(--sk-pink-9); --t-solid-hover: var(--sk-pink-10); --t-on: #fff;
  --t-subtle: var(--sk-pink-2); --t-soft: var(--sk-pink-3); --t-soft-hover: var(--sk-pink-4); --t-soft-active: var(--sk-pink-5);
  --t-border: var(--sk-pink-6); --t-border-strong: var(--sk-pink-8);
  --t-text: var(--sk-pink-11); --t-text-strong: var(--sk-pink-12); --t-rgb: var(--sk-pink-rgb);
}
.sk-tone-neutral {
  --t-solid: var(--sk-surface-inverse); --t-solid-hover: var(--sk-ink-11); --t-on: var(--sk-fg-inverse);
  --t-subtle: var(--sk-ink-2); --t-soft: var(--sk-ink-3); --t-soft-hover: var(--sk-ink-4); --t-soft-active: var(--sk-ink-5);
  --t-border: var(--sk-ink-6); --t-border-strong: var(--sk-ink-8);
  --t-text: var(--sk-fg-muted); --t-text-strong: var(--sk-fg); --t-rgb: var(--sk-ink-rgb);
}
[data-theme="dark"] .sk-tone-neutral, [data-theme="dark"].sk-tone-neutral { --t-solid-hover: #d6d8e0; }