/* ==========================================================================
   Sassly UI — design tokens
   Themes:   [data-theme="neutral" | "onix"]
   Modes:    [data-mode="light" | "dark"]
   Surfaces: [data-surface="flat" | "tray"]
   Put the attributes on <html>, or on any element to scope a preview.
   Components only ever read the semantic --sx-* tokens below.
   ========================================================================== */

/* ---------- Shared scale (all themes) ---------- */
:root {
  --sx-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sx-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --sx-fs-2xs: 10.5px;
  --sx-fs-xs: 11px;
  --sx-fs-sm: 12px;
  --sx-fs-base: 13px;
  --sx-fs-md: 14px;
  --sx-fs-lg: 15px;
  --sx-fs-xl: 18px;
  --sx-fs-2xl: 24px;
  --sx-fs-3xl: 32px;
  --sx-fs-4xl: 44px;

  --sx-lh-tight: 1.2;
  --sx-lh: 1.5;

  --sx-space-1: 4px;
  --sx-space-2: 8px;
  --sx-space-3: 12px;
  --sx-space-4: 16px;
  --sx-space-5: 20px;
  --sx-space-6: 24px;
  --sx-space-8: 32px;

  --sx-h-xs: 24px;
  --sx-h-sm: 28px;
  --sx-h-md: 34px;
  --sx-h-lg: 40px;

  --sx-r-pill: 999px;

  /* Motion. One curve family everywhere; durations scale with distance. */
  --sx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --sx-ease-in: cubic-bezier(0.55, 0, 0.75, 0.2);
  --sx-ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --sx-dur-1: 120ms;
  --sx-dur-2: 180ms;
  --sx-dur-3: 260ms;
  --sx-dur-4: 420ms;
  --sx-dur-5: 640ms;

  --sx-z-pop: 40;
  --sx-z-toast: 60;
  --sx-z-modal: 80;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sx-dur-3: 160ms;
    --sx-dur-4: 200ms;
    --sx-dur-5: 240ms;
    --sx-ease-spring: var(--sx-ease-out);
  }
}

/* ==========================================================================
   NEUTRAL — quiet greys, hairline rings, blue focus, magenta marks
   ========================================================================== */
:root,
[data-theme="neutral"] {
  color-scheme: light;

  --sx-shell: #f5f5f5;
  --sx-panel: #fcfcfc;
  --sx-panel-wash: none;
  --sx-surface: #ffffff;
  --sx-surface-2: #fafafa;
  --sx-surface-3: #f3f3f4;
  --sx-raised: #ffffff;
  --sx-raised-hover: #f4f4f5;
  --sx-tray: #efeff0;
  --sx-fill: rgba(10, 10, 10, 0.04);
  --sx-fill-strong: rgba(10, 10, 10, 0.075);
  --sx-overlay: rgba(10, 10, 10, 0.28);

  --sx-ink: #0a0a0a;
  --sx-ink-2: #404040;
  --sx-muted: #707070;
  --sx-faint: #a3a3a3;

  --sx-line: rgba(10, 10, 10, 0.085);
  --sx-line-soft: rgba(10, 10, 10, 0.055);
  --sx-line-strong: rgba(10, 10, 10, 0.15);

  --sx-primary: #0a0a0a;
  --sx-primary-bg: linear-gradient(180deg, #2b2b2b 0%, #0a0a0a 100%);
  --sx-primary-hover: linear-gradient(180deg, #3a3a3a 0%, #161616 100%);
  --sx-on-primary: #ffffff;

  --sx-accent: #2f6bff;
  --sx-accent-bg: linear-gradient(180deg, #4a7fff 0%, #2f6bff 100%);
  --sx-accent-ink: #1f5ae8;
  --sx-accent-soft: rgba(47, 107, 255, 0.09);
  --sx-accent-line: rgba(47, 107, 255, 0.28);
  --sx-on-accent: #ffffff;

  --sx-mark: #dd0674;
  --sx-mark-ink: #c20566;
  --sx-mark-soft: #fdf2f8;
  --sx-mark-line: rgba(221, 6, 116, 0.18);

  --sx-success: #13a35c;
  --sx-success-ink: #0b7a43;
  --sx-success-soft: rgba(19, 163, 92, 0.09);
  --sx-success-line: rgba(19, 163, 92, 0.25);
  --sx-warning: #d38b06;
  --sx-warning-ink: #8a5800;
  --sx-warning-soft: rgba(234, 160, 0, 0.11);
  --sx-warning-line: rgba(211, 139, 6, 0.28);
  --sx-danger: #e5484d;
  --sx-danger-ink: #c62f35;
  --sx-danger-soft: rgba(229, 72, 77, 0.08);
  --sx-danger-line: rgba(229, 72, 77, 0.26);
  --sx-on-success: #ffffff;
  --sx-on-danger: #ffffff;
  --sx-on-warning: #1a1300;
  --sx-info: #2f6bff;
  --sx-info-ink: #1f5ae8;
  --sx-info-soft: rgba(47, 107, 255, 0.09);
  --sx-info-line: rgba(47, 107, 255, 0.26);

  --sx-c1: #2f6bff;
  --sx-c2: #e8950c;
  --sx-c3: #12a594;
  --sx-c4: #e5488f;
  --sx-c5: #8b5cf6;
  --sx-c6: #a3a3a3;
  --sx-c-track: rgba(10, 10, 10, 0.06);

  --sx-glow-1: rgba(236, 72, 153, 0.22);
  --sx-glow-2: rgba(139, 92, 246, 0.22);
  --sx-glow-3: rgba(47, 107, 255, 0.2);

  --sx-focus: rgba(47, 107, 255, 0.5);
  --sx-focus-ring: 0 0 0 3px rgba(47, 107, 255, 0.18), 0 0 0 1px rgba(47, 107, 255, 0.55);
  --sx-selection: rgba(47, 107, 255, 0.18);

  --sx-ring: 0 0 0 1px var(--sx-line);
  --sx-shadow-1: 0 0 0 0.5px rgba(0, 0, 0, 0.09), 0 1px 1px -0.5px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.04);
  --sx-shadow-2: 0 0 0 1px rgba(10, 10, 10, 0.065), 0 1px 2px rgba(10, 10, 10, 0.05), 0 6px 16px -6px rgba(10, 10, 10, 0.1);
  --sx-shadow-3: 0 0 0 1px rgba(10, 10, 10, 0.07), 0 4px 8px -2px rgba(10, 10, 10, 0.07), 0 18px 36px -10px rgba(10, 10, 10, 0.2);
  --sx-shadow-pop: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 2px 6px -2px rgba(0, 0, 0, 0.08), 0 14px 30px -10px rgba(0, 0, 0, 0.28);
  --sx-shadow-primary: 0 1px 2px rgba(0, 0, 0, 0.22), 0 3px 8px -3px rgba(0, 0, 0, 0.3);
  --sx-shadow-accent: 0 1px 2px rgba(31, 90, 232, 0.3), 0 3px 8px -3px rgba(47, 107, 255, 0.42);
  --sx-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14);

  --sx-r-xs: 4px;
  --sx-r-sm: 6px;
  --sx-r-md: 8px;
  --sx-r-lg: 10px;
  --sx-r-xl: 14px;
  --sx-r-2xl: 18px;

  --sx-heading-weight: 600;
  --sx-heading-tracking: -0.011em;
  --sx-display-weight: 500;
  --sx-display-tracking: -0.018em;
  --sx-strong-weight: 500;

  /* Card surface defaults (Flat). Tray overrides below. */
  --sx-canvas: var(--sx-surface-2);
  --sx-card-bg: var(--sx-surface);
  --sx-card-shadow: var(--sx-ring), 0 1px 2px rgba(10, 10, 10, 0.03);
  --sx-card-radius: var(--sx-r-xl);
}

[data-theme="neutral"][data-mode="dark"] {
  color-scheme: dark;

  --sx-shell: #0c0c0d;
  --sx-panel: #121213;
  --sx-surface: #19191b;
  --sx-surface-2: #161618;
  --sx-surface-3: #222225;
  --sx-raised: #26262a;
  --sx-raised-hover: #2e2e33;
  --sx-tray: #0f0f10;
  --sx-fill: rgba(255, 255, 255, 0.05);
  --sx-fill-strong: rgba(255, 255, 255, 0.09);
  --sx-overlay: rgba(0, 0, 0, 0.55);

  --sx-ink: #ededed;
  --sx-ink-2: #c8c8cc;
  --sx-muted: #8f8f96;
  --sx-faint: #5c5c63;

  --sx-line: rgba(255, 255, 255, 0.085);
  --sx-line-soft: rgba(255, 255, 255, 0.055);
  --sx-line-strong: rgba(255, 255, 255, 0.15);

  --sx-primary: #ededed;
  --sx-primary-bg: linear-gradient(180deg, #ffffff 0%, #e4e4e6 100%);
  --sx-primary-hover: linear-gradient(180deg, #ffffff 0%, #f1f1f2 100%);
  --sx-on-primary: #0c0c0d;

  --sx-accent: #4d8dff;
  --sx-accent-bg: linear-gradient(180deg, #5f99ff 0%, #3f80f7 100%);
  --sx-accent-ink: #80adff;
  --sx-accent-soft: rgba(77, 141, 255, 0.14);
  --sx-accent-line: rgba(77, 141, 255, 0.34);

  --sx-mark: #f2559f;
  --sx-mark-ink: #ff7ab8;
  --sx-mark-soft: rgba(242, 85, 159, 0.13);
  --sx-mark-line: rgba(242, 85, 159, 0.3);

  --sx-success: #4cc38a;
  --sx-success-ink: #6fd6a3;
  --sx-success-soft: rgba(76, 195, 138, 0.13);
  --sx-success-line: rgba(76, 195, 138, 0.3);
  --sx-warning: #f0b443;
  --sx-warning-ink: #f5c86f;
  --sx-warning-soft: rgba(240, 180, 67, 0.13);
  --sx-warning-line: rgba(240, 180, 67, 0.3);
  --sx-danger: #ff6369;
  --sx-danger-ink: #ff8a8e;
  --sx-danger-soft: rgba(255, 99, 105, 0.13);
  --sx-danger-line: rgba(255, 99, 105, 0.32);
  --sx-on-success: #0c0c0d;
  --sx-on-danger: #0c0c0d;
  --sx-on-warning: #0c0c0d;
  --sx-info: #4d8dff;
  --sx-info-ink: #80adff;
  --sx-info-soft: rgba(77, 141, 255, 0.14);
  --sx-info-line: rgba(77, 141, 255, 0.32);

  --sx-c1: #5b95ff;
  --sx-c2: #f5b13d;
  --sx-c3: #2cc9b4;
  --sx-c4: #f472b6;
  --sx-c5: #a78bfa;
  --sx-c6: #6b6b73;
  --sx-c-track: rgba(255, 255, 255, 0.08);

  --sx-glow-1: rgba(236, 72, 153, 0.26);
  --sx-glow-2: rgba(139, 92, 246, 0.28);
  --sx-glow-3: rgba(77, 141, 255, 0.24);

  --sx-focus: rgba(77, 141, 255, 0.6);
  --sx-focus-ring: 0 0 0 3px rgba(77, 141, 255, 0.24), 0 0 0 1px rgba(77, 141, 255, 0.7);
  --sx-selection: rgba(77, 141, 255, 0.3);

  --sx-shadow-1: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.45);
  --sx-shadow-2: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 18px -8px rgba(0, 0, 0, 0.55);
  --sx-shadow-3: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 4px 10px -2px rgba(0, 0, 0, 0.45), 0 18px 36px -10px rgba(0, 0, 0, 0.7);
  --sx-shadow-pop: 0 0 0 0.5px rgba(255, 255, 255, 0.13), 0 14px 30px -10px rgba(0, 0, 0, 0.7);
  --sx-shadow-primary: 0 1px 2px rgba(0, 0, 0, 0.5), 0 3px 8px -3px rgba(0, 0, 0, 0.6);
  --sx-shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.45), 0 3px 10px -3px rgba(77, 141, 255, 0.5);
  --sx-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --sx-card-shadow: var(--sx-ring);
}

/* ==========================================================================
   ONIX — slate primary, orange accent, warm paper neutrals (onix.sassly.ai)
   ========================================================================== */
[data-theme="onix"] {
  color-scheme: light;

  --sx-shell: #f3f2ed;
  --sx-panel: #fbfaf7;
  --sx-panel-wash:
    radial-gradient(900px 420px at 6% -8%, rgba(97, 155, 138, 0.08), transparent 64%),
    radial-gradient(760px 380px at 100% -4%, rgba(254, 127, 45, 0.055), transparent 60%);
  --sx-surface: #ffffff;
  --sx-surface-2: #fbfaf7;
  --sx-surface-3: #f3f2ed;
  --sx-raised: #ffffff;
  --sx-raised-hover: #f7f6f2;
  --sx-tray: #efede6;
  --sx-fill: rgba(27, 35, 41, 0.045);
  --sx-fill-strong: rgba(27, 35, 41, 0.08);
  --sx-overlay: rgba(23, 42, 53, 0.3);

  --sx-ink: #1b2329;
  --sx-ink-2: #4b5660;
  --sx-muted: #66717a;
  --sx-faint: #a0a9b0;

  --sx-line: #e5e3dc;
  --sx-line-soft: #eeede7;
  --sx-line-strong: #d6d4cb;

  --sx-primary: #233d4d;
  --sx-primary-bg: linear-gradient(180deg, #2f5064 0%, #233d4d 100%);
  --sx-primary-hover: linear-gradient(180deg, #365a70 0%, #284556 100%);
  --sx-on-primary: #ffffff;

  --sx-accent: #fe7f2d;
  --sx-accent-bg: linear-gradient(180deg, #ff9150 0%, #fe7f2d 100%);
  --sx-accent-ink: #a3480f;
  --sx-accent-soft: #fff1e7;
  --sx-accent-line: #fad7bf;
  --sx-on-accent: #2a1406;

  --sx-mark: #fe7f2d;
  --sx-mark-ink: #a3480f;
  --sx-mark-soft: #fff1e7;
  --sx-mark-line: #fad7bf;

  --sx-success: #5b8f45;
  --sx-success-ink: #3b6a2b;
  --sx-success-soft: #f0f6ea;
  --sx-success-line: #d8e7c8;
  --sx-warning: #d99a1e;
  --sx-warning-ink: #7f5700;
  --sx-warning-soft: #fff7de;
  --sx-warning-line: #f5e2a4;
  --sx-danger: #c2463c;
  --sx-danger-ink: #a8392f;
  --sx-danger-soft: #fceeec;
  --sx-danger-line: #f3d6d2;
  --sx-on-success: #ffffff;
  --sx-on-danger: #ffffff;
  --sx-on-warning: #2a1d00;
  --sx-info: #619b8a;
  --sx-info-ink: #2b6455;
  --sx-info-soft: #eaf4f1;
  --sx-info-line: #cde2db;

  --sx-c1: #233d4d;
  --sx-c2: #fe7f2d;
  --sx-c3: #619b8a;
  --sx-c4: #fcca46;
  --sx-c5: #a1c181;
  --sx-c6: #a9a69b;
  --sx-c-track: #eceae3;

  --sx-glow-1: rgba(254, 127, 45, 0.2);
  --sx-glow-2: rgba(252, 202, 70, 0.22);
  --sx-glow-3: rgba(97, 155, 138, 0.2);

  --sx-focus: rgba(35, 61, 77, 0.45);
  --sx-focus-ring: 0 0 0 3px rgba(35, 61, 77, 0.14), 0 0 0 1px rgba(35, 61, 77, 0.5);
  --sx-selection: rgba(254, 127, 45, 0.22);

  --sx-ring: 0 0 0 1px rgba(27, 35, 41, 0.075);
  --sx-shadow-1: 0 0 0 1px rgba(27, 35, 41, 0.075), 0 1px 1.5px rgba(27, 35, 41, 0.05);
  --sx-shadow-2: 0 0 0 1px rgba(27, 35, 41, 0.075), 0 1px 2px rgba(27, 35, 41, 0.05), 0 4px 10px -3px rgba(27, 35, 41, 0.08);
  --sx-shadow-3: 0 0 0 1px rgba(27, 35, 41, 0.075), 0 2px 4px rgba(27, 35, 41, 0.06), 0 12px 28px -6px rgba(27, 35, 41, 0.18);
  --sx-shadow-pop: 0 0 0 1px rgba(27, 35, 41, 0.08), 0 4px 10px -2px rgba(27, 35, 41, 0.08), 0 16px 34px -10px rgba(27, 35, 41, 0.26);
  --sx-shadow-primary: 0 1px 2px rgba(23, 42, 53, 0.3), 0 3px 8px -2px rgba(23, 42, 53, 0.26);
  --sx-shadow-accent: 0 1px 2px rgba(163, 72, 15, 0.28), 0 3px 8px -2px rgba(254, 127, 45, 0.32);
  --sx-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.16);

  --sx-r-xs: 3px;
  --sx-r-sm: 7px;
  --sx-r-md: 9px;
  --sx-r-lg: 11px;
  --sx-r-xl: 13px;
  --sx-r-2xl: 16px;

  --sx-heading-weight: 650;
  --sx-heading-tracking: -0.02em;
  --sx-display-weight: 700;
  --sx-display-tracking: -0.035em;
  --sx-strong-weight: 600;

  --sx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --sx-canvas: var(--sx-surface-2);
  --sx-card-bg: var(--sx-surface);
  --sx-card-shadow: var(--sx-shadow-1);
  --sx-card-radius: var(--sx-r-xl);
}

[data-theme="onix"][data-mode="dark"] {
  color-scheme: dark;

  --sx-shell: #0d1418;
  --sx-panel: #10191e;
  --sx-panel-wash:
    radial-gradient(900px 420px at 6% -8%, rgba(97, 155, 138, 0.1), transparent 64%),
    radial-gradient(760px 380px at 100% -4%, rgba(254, 127, 45, 0.07), transparent 60%);
  --sx-surface: #162128;
  --sx-surface-2: #131d23;
  --sx-surface-3: #1d2a32;
  --sx-raised: #1f2d35;
  --sx-raised-hover: #273943;
  --sx-tray: #0e171c;
  --sx-fill: rgba(214, 232, 240, 0.05);
  --sx-fill-strong: rgba(214, 232, 240, 0.09);
  --sx-overlay: rgba(4, 10, 13, 0.6);

  --sx-ink: #e7ecee;
  --sx-ink-2: #bac5cb;
  --sx-muted: #8b9aa3;
  --sx-faint: #5e6d76;

  --sx-line: rgba(214, 232, 240, 0.09);
  --sx-line-soft: rgba(214, 232, 240, 0.06);
  --sx-line-strong: rgba(214, 232, 240, 0.16);

  --sx-primary: #3a5f74;
  --sx-primary-bg: linear-gradient(180deg, #46697e 0%, #335466 100%);
  --sx-primary-hover: linear-gradient(180deg, #507590 0%, #3a5f74 100%);
  --sx-on-primary: #ffffff;

  --sx-accent: #ff8a3d;
  --sx-accent-bg: linear-gradient(180deg, #ff9d5c 0%, #ff8a3d 100%);
  --sx-accent-ink: #ffb07a;
  --sx-accent-soft: rgba(255, 138, 61, 0.13);
  --sx-accent-line: rgba(255, 138, 61, 0.32);
  --sx-on-accent: #2a1406;

  --sx-mark: #ff8a3d;
  --sx-mark-ink: #ffb07a;
  --sx-mark-soft: rgba(255, 138, 61, 0.13);
  --sx-mark-line: rgba(255, 138, 61, 0.3);

  --sx-success: #86b874;
  --sx-success-ink: #a9d39a;
  --sx-success-soft: rgba(134, 184, 116, 0.13);
  --sx-success-line: rgba(134, 184, 116, 0.3);
  --sx-warning: #e9b949;
  --sx-warning-ink: #f2cf7a;
  --sx-warning-soft: rgba(233, 185, 73, 0.13);
  --sx-warning-line: rgba(233, 185, 73, 0.3);
  --sx-danger: #e06a5f;
  --sx-danger-ink: #f29a90;
  --sx-danger-soft: rgba(224, 106, 95, 0.14);
  --sx-danger-line: rgba(224, 106, 95, 0.32);
  --sx-on-success: #0d1418;
  --sx-on-danger: #0d1418;
  --sx-on-warning: #0d1418;
  --sx-info: #7db8a6;
  --sx-info-ink: #a5d3c5;
  --sx-info-soft: rgba(125, 184, 166, 0.13);
  --sx-info-line: rgba(125, 184, 166, 0.3);

  --sx-c1: #a8c3d4;
  --sx-c2: #ff8a3d;
  --sx-c3: #4f9b84;
  --sx-c4: #f2cf5b;
  --sx-c5: #a9cc8a;
  --sx-c6: #6f7f88;
  --sx-c-track: rgba(214, 232, 240, 0.08);

  --sx-glow-1: rgba(255, 138, 61, 0.22);
  --sx-glow-2: rgba(242, 207, 91, 0.16);
  --sx-glow-3: rgba(125, 184, 166, 0.2);

  --sx-focus: rgba(255, 138, 61, 0.55);
  --sx-focus-ring: 0 0 0 3px rgba(255, 138, 61, 0.2), 0 0 0 1px rgba(255, 138, 61, 0.6);
  --sx-selection: rgba(255, 138, 61, 0.3);

  --sx-ring: 0 0 0 1px rgba(214, 232, 240, 0.08);
  --sx-shadow-1: 0 0 0 1px rgba(214, 232, 240, 0.08), 0 1px 2px rgba(0, 0, 0, 0.4);
  --sx-shadow-2: 0 0 0 1px rgba(214, 232, 240, 0.08), 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 18px -6px rgba(0, 0, 0, 0.5);
  --sx-shadow-3: 0 0 0 1px rgba(214, 232, 240, 0.1), 0 4px 10px -2px rgba(0, 0, 0, 0.4), 0 16px 34px -8px rgba(0, 0, 0, 0.65);
  --sx-shadow-pop: 0 0 0 1px rgba(214, 232, 240, 0.12), 0 16px 34px -10px rgba(0, 0, 0, 0.7);
  --sx-shadow-primary: 0 1px 2px rgba(0, 0, 0, 0.5), 0 3px 8px -2px rgba(0, 0, 0, 0.5);
  --sx-shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.45), 0 3px 10px -2px rgba(255, 138, 61, 0.4);
  --sx-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  --sx-card-shadow: var(--sx-shadow-1);
}

/* ==========================================================================
   SURFACES — Flat (default above): one flat card with a hairline ring.
              Tray: cards lifted onto a recessed grey tray.
   ========================================================================== */
[data-surface="tray"],
[data-theme][data-mode][data-surface="tray"] {
  --sx-canvas: var(--sx-tray);
  --sx-card-bg: var(--sx-surface);
  --sx-card-shadow: var(--sx-shadow-2);
}