/* SKL design tokens — shared by the CRM and the skl.company landing. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-opsz-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-latin-ext-opsz-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-cyrillic-opsz-normal.woff2) format("woff2-variations");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/inter-cyrillic-ext-opsz-normal.woff2) format("woff2-variations");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

:root {
  color-scheme: light;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-serif: "New York", "Iowan Old Style", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  /* Surfaces */
  --bg: #ffffff;
  --bg-subtle: #f7f7f8;
  --bg-muted: #f0f1f3;
  --bg-hover: rgba(24, 28, 38, 0.045);
  --bg-active: rgba(24, 28, 38, 0.075);
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f4f5f6;
  --overlay: rgba(16, 18, 24, 0.28);
  --glass: rgba(255, 255, 255, 0.72);

  /* Lines */
  --border: #e8e9ec;
  --border-strong: #d8dbe0;
  --border-subtle: #f0f1f3;

  /* Text */
  --text: #17181b;
  --text-2: #5d636e;
  --text-3: #8b919c;
  --text-4: #b4b9c2;
  --text-inverse: #ffffff;

  /* Brand graphite from the SKL mark */
  --graphite: #1c1d20;
  --graphite-2: #2e3035;

  /* Status */
  --success: #1f9d55;
  --warning: #d97706;
  --danger: #e5484d;
  --danger-soft: #fdecec;

  /* Accent (overridden by [data-accent]) */
  --accent: #1c1d20;
  --accent-hover: #2e3035;
  --accent-fg: #ffffff;
  --accent-soft: #f0f1f3;
  --accent-text: #1c1d20;
  --accent-ring: rgba(28, 29, 32, 0.18);

  /* Shape */
  --r-xs: 5px;
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 22px;
  --r-full: 999px;

  /* Elevation — cool, blue-tinted, very soft */
  --shadow-xs: 0 1px 2px rgba(20, 28, 48, 0.05);
  --shadow-sm: 0 1px 2px rgba(20, 28, 48, 0.06), 0 2px 6px -1px rgba(20, 28, 48, 0.05);
  --shadow-md: 0 2px 6px rgba(20, 28, 48, 0.06), 0 8px 24px -4px rgba(20, 28, 48, 0.1);
  --shadow-lg: 0 4px 12px rgba(20, 28, 48, 0.06), 0 24px 48px -12px rgba(20, 28, 48, 0.18);
  --shadow-xl: 0 12px 32px rgba(20, 28, 48, 0.08), 0 40px 80px -20px rgba(20, 28, 48, 0.28);
  --ring: 0 0 0 3px var(--accent-ring);
  --hairline: inset 0 0 0 1px var(--border);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;

  /* Label palette */
  --c-gray-bg: #f0f1f3;   --c-gray-fg: #4f5560;   --c-gray-dot: #9aa0aa;
  --c-red-bg: #fdecec;    --c-red-fg: #b4232a;    --c-red-dot: #e5484d;
  --c-orange-bg: #fff0e5; --c-orange-fg: #b54708; --c-orange-dot: #f76b15;
  --c-yellow-bg: #fff8db; --c-yellow-fg: #8a6100; --c-yellow-dot: #e8b400;
  --c-green-bg: #e7f6ec;  --c-green-fg: #1a7f45;  --c-green-dot: #30a46c;
  --c-teal-bg: #e2f6f4;   --c-teal-fg: #0f766e;   --c-teal-dot: #12a594;
  --c-blue-bg: #e8f1ff;   --c-blue-fg: #0b5bd3;   --c-blue-dot: #0a72ff;
  --c-indigo-bg: #eef0ff; --c-indigo-fg: #4338ca; --c-indigo-dot: #5b5bd6;
  --c-purple-bg: #f5edfc; --c-purple-fg: #7c3aad; --c-purple-dot: #8e4ec6;
  --c-pink-bg: #fdebf5;   --c-pink-fg: #b3246e;   --c-pink-dot: #d6409f;
}

:root[data-accent="blue"]   { --accent: #0a72ff; --accent-hover: #0063e6; --accent-soft: #e8f1ff; --accent-text: #0b5bd3; --accent-ring: rgba(10, 114, 255, 0.22); }
:root[data-accent="indigo"] { --accent: #5b5bd6; --accent-hover: #4d4dc4; --accent-soft: #eef0ff; --accent-text: #4338ca; --accent-ring: rgba(91, 91, 214, 0.22); }
:root[data-accent="purple"] { --accent: #8e4ec6; --accent-hover: #7d3fb5; --accent-soft: #f5edfc; --accent-text: #7c3aad; --accent-ring: rgba(142, 78, 198, 0.22); }
:root[data-accent="pink"]   { --accent: #d6409f; --accent-hover: #c2328d; --accent-soft: #fdebf5; --accent-text: #b3246e; --accent-ring: rgba(214, 64, 159, 0.22); }
:root[data-accent="red"]    { --accent: #e5484d; --accent-hover: #d13b40; --accent-soft: #fdecec; --accent-text: #b4232a; --accent-ring: rgba(229, 72, 77, 0.22); }
:root[data-accent="orange"] { --accent: #f76b15; --accent-hover: #e25d0b; --accent-soft: #fff0e5; --accent-text: #b54708; --accent-ring: rgba(247, 107, 21, 0.24); }
:root[data-accent="green"]  { --accent: #30a46c; --accent-hover: #26915e; --accent-soft: #e7f6ec; --accent-text: #1a7f45; --accent-ring: rgba(48, 164, 108, 0.24); }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111214;
  --bg-subtle: #151619;
  --bg-muted: #1c1d21;
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-active: rgba(255, 255, 255, 0.085);
  --surface: #18191c;
  --surface-raised: #1f2024;
  --surface-sunken: #0d0e10;
  --overlay: rgba(0, 0, 0, 0.5);
  --glass: rgba(26, 27, 31, 0.72);
  --border: #26282d;
  --border-strong: #33363c;
  --border-subtle: #1e2024;
  --text: #f1f2f4;
  --text-2: #a3a9b3;
  --text-3: #767c87;
  --text-4: #50545c;
  --text-inverse: #111214;
  --danger-soft: rgba(229, 72, 77, 0.14);
  --accent: #f1f2f4;
  --accent-hover: #ffffff;
  --accent-fg: #111214;
  --accent-soft: #24262b;
  --accent-text: #f1f2f4;
  --accent-ring: rgba(255, 255, 255, 0.2);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 8px 24px -4px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 24px 48px -12px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 80px -20px rgba(0, 0, 0, 0.7);
  --c-gray-bg: #25272c;   --c-gray-fg: #c1c5cc;
  --c-red-bg: #3a1c1e;    --c-red-fg: #ff9592;
  --c-orange-bg: #3b2415; --c-orange-fg: #ffa057;
  --c-yellow-bg: #362d12; --c-yellow-fg: #f5d90a;
  --c-green-bg: #132d21;  --c-green-fg: #4cc38a;
  --c-teal-bg: #0f2e2b;   --c-teal-fg: #3dd9c3;
  --c-blue-bg: #10243e;   --c-blue-fg: #70b8ff;
  --c-indigo-bg: #1d2046; --c-indigo-fg: #9eb1ff;
  --c-purple-bg: #2c1a3d; --c-purple-fg: #d19dff;
  --c-pink-bg: #37172a;   --c-pink-fg: #ff8dcc;
}

:root[data-theme="dark"][data-accent="blue"]   { --accent: #3b8eff; --accent-hover: #5aa0ff; --accent-fg: #fff; --accent-soft: #10243e; --accent-text: #70b8ff; --accent-ring: rgba(59, 142, 255, 0.3); }
:root[data-theme="dark"][data-accent="indigo"] { --accent: #7070e8; --accent-hover: #8484f0; --accent-fg: #fff; --accent-soft: #1d2046; --accent-text: #9eb1ff; --accent-ring: rgba(112, 112, 232, 0.3); }
:root[data-theme="dark"][data-accent="purple"] { --accent: #a46ad6; --accent-hover: #b47fe0; --accent-fg: #fff; --accent-soft: #2c1a3d; --accent-text: #d19dff; --accent-ring: rgba(164, 106, 214, 0.3); }
:root[data-theme="dark"][data-accent="pink"]   { --accent: #e25aad; --accent-hover: #ea70ba; --accent-fg: #fff; --accent-soft: #37172a; --accent-text: #ff8dcc; --accent-ring: rgba(226, 90, 173, 0.3); }
:root[data-theme="dark"][data-accent="red"]    { --accent: #ec5d5e; --accent-hover: #f27172; --accent-fg: #fff; --accent-soft: #3a1c1e; --accent-text: #ff9592; --accent-ring: rgba(236, 93, 94, 0.3); }
:root[data-theme="dark"][data-accent="orange"] { --accent: #ff801f; --accent-hover: #ff9343; --accent-fg: #fff; --accent-soft: #3b2415; --accent-text: #ffa057; --accent-ring: rgba(255, 128, 31, 0.3); }
:root[data-theme="dark"][data-accent="green"]  { --accent: #3cb179; --accent-hover: #4cc38a; --accent-fg: #fff; --accent-soft: #132d21; --accent-text: #4cc38a; --accent-ring: rgba(60, 177, 121, 0.3); }

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
    --dur-4: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}