/* Kartai — тепла тема (акцент налаштовується) поверх Industry styles.css. Підключати ПІСЛЯ styles.css.
   Світла — за замовчуванням; темна — <html data-theme="dark">. */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&family=Onest:wght@400;500;600&display=swap');

:root {
  --color-bg: #faf6f1;
  --color-surface: #ffffff;
  --color-text: #2a2420;
  --color-divider: color-mix(in srgb, #2a2420 11%, transparent);

  --color-neutral-100: #f4eee7; --color-neutral-200: #ebe3d9; --color-neutral-300: #ddd2c5;
  --color-neutral-400: #c2b5a6; --color-neutral-500: #a29585; --color-neutral-600: #82756a;
  --color-neutral-700: #645a50; --color-neutral-800: #463e37; --color-neutral-900: #2a2420;


  --font-heading: "Rubik", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Onest", system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow-sm: 0 1px 2px rgb(74 50 30 / 0.06), 0 2px 8px rgb(74 50 30 / 0.04);
  --shadow-md: 0 6px 18px rgb(74 50 30 / 0.09);
  --shadow-lg: 0 18px 44px rgb(74 50 30 / 0.16);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #1b1714;
  --color-surface: #26201c;
  --color-text: #f2eae2;
  --color-divider: color-mix(in srgb, #f2eae2 12%, transparent);

  --color-neutral-100: #2a241f; --color-neutral-200: #342d27; --color-neutral-300: #463e37;
  --color-neutral-400: #645a50; --color-neutral-500: #82756a; --color-neutral-600: #a29585;
  --color-neutral-700: #c2b5a6; --color-neutral-800: #ddd2c5; --color-neutral-900: #f4eee7;


  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35);
  --shadow-md: 0 6px 18px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 18px 44px rgb(0 0 0 / 0.55);
}


/* — акцентні палітри: <html data-accent="sage|teal|clay|lavender|terracotta">; sage — за замовчуванням — */
:root {
  --color-accent: #5c8768; --color-accent-2: #9f7735;
  --color-accent-100: #eef4ef; --color-accent-200: #d9e8dc; --color-accent-300: #b9d4bf; --color-accent-400: #93ba9c; --color-accent-500: #739f7e; --color-accent-600: #5c8768; --color-accent-700: #476b52; --color-accent-800: #33503c; --color-accent-900: #213427;
  --color-accent-2-100: #faf3e6; --color-accent-2-200: #f2e2c3; --color-accent-2-300: #e5c992; --color-accent-2-400: #d3ab63; --color-accent-2-500: #bb9045; --color-accent-2-600: #9f7735; --color-accent-2-700: #7e5d29; --color-accent-2-800: #5c431e; --color-accent-2-900: #3b2b14;
}
:root[data-theme="dark"] {
  --color-accent: #8fc19c; --color-accent-2: #d0ad6f;
  --color-accent-100: #1f2e23; --color-accent-200: #2b4131; --color-accent-300: #3c5c45; --color-accent-400: #557d5f; --color-accent-500: #6f9f7b; --color-accent-600: #8fc19c; --color-accent-700: #b1d6ba; --color-accent-800: #d3e9d8; --color-accent-900: #ecf6ef;
  --color-accent-2-100: #2e2414; --color-accent-2-200: #44361d; --color-accent-2-300: #634e2a; --color-accent-2-400: #8a6d3b; --color-accent-2-500: #b08e52; --color-accent-2-600: #d0ad6f; --color-accent-2-700: #e3c896; --color-accent-2-800: #f0dfbe; --color-accent-2-900: #faf1e0;
}
:root[data-accent="teal"] {
  --color-accent: #4a8480; --color-accent-2: #9f7735;
  --color-accent-100: #ebf5f4; --color-accent-200: #d2e8e6; --color-accent-300: #acd3cf; --color-accent-400: #82b8b4; --color-accent-500: #5f9c98; --color-accent-600: #4a8480; --color-accent-700: #386864; --color-accent-800: #284d4a; --color-accent-900: #193230;
  --color-accent-2-100: #faf3e6; --color-accent-2-200: #f2e2c3; --color-accent-2-300: #e5c992; --color-accent-2-400: #d3ab63; --color-accent-2-500: #bb9045; --color-accent-2-600: #9f7735; --color-accent-2-700: #7e5d29; --color-accent-2-800: #5c431e; --color-accent-2-900: #3b2b14;
}
:root[data-theme="dark"][data-accent="teal"] {
  --color-accent: #7fbcb7; --color-accent-2: #d0ad6f;
  --color-accent-100: #182c2b; --color-accent-200: #213e3c; --color-accent-300: #2f5956; --color-accent-400: #437a76; --color-accent-500: #5c9c97; --color-accent-600: #7fbcb7; --color-accent-700: #a7d4d0; --color-accent-800: #cde8e6; --color-accent-900: #eaf6f5;
  --color-accent-2-100: #2e2414; --color-accent-2-200: #44361d; --color-accent-2-300: #634e2a; --color-accent-2-400: #8a6d3b; --color-accent-2-500: #b08e52; --color-accent-2-600: #d0ad6f; --color-accent-2-700: #e3c896; --color-accent-2-800: #f0dfbe; --color-accent-2-900: #faf1e0;
}
:root[data-accent="clay"] {
  --color-accent: #a6675c; --color-accent-2: #5c8768;
  --color-accent-100: #f9f0ee; --color-accent-200: #f0dcd8; --color-accent-300: #e3bfb8; --color-accent-400: #d29d93; --color-accent-500: #bd7f74; --color-accent-600: #a6675c; --color-accent-700: #865147; --color-accent-800: #633c35; --color-accent-900: #402722;
  --color-accent-2-100: #eef4ef; --color-accent-2-200: #d9e8dc; --color-accent-2-300: #b9d4bf; --color-accent-2-400: #93ba9c; --color-accent-2-500: #739f7e; --color-accent-2-600: #5c8768; --color-accent-2-700: #476b52; --color-accent-2-800: #33503c; --color-accent-2-900: #213427;
}
:root[data-theme="dark"][data-accent="clay"] {
  --color-accent: #d49a8f; --color-accent-2: #8fc19c;
  --color-accent-100: #33221f; --color-accent-200: #4a302b; --color-accent-300: #6a453e; --color-accent-400: #8f5f56; --color-accent-500: #b57d72; --color-accent-600: #d49a8f; --color-accent-700: #e5bab2; --color-accent-800: #f1d8d3; --color-accent-900: #faefed;
  --color-accent-2-100: #1f2e23; --color-accent-2-200: #2b4131; --color-accent-2-300: #3c5c45; --color-accent-2-400: #557d5f; --color-accent-2-500: #6f9f7b; --color-accent-2-600: #8fc19c; --color-accent-2-700: #b1d6ba; --color-accent-2-800: #d3e9d8; --color-accent-2-900: #ecf6ef;
}
:root[data-accent="lavender"] {
  --color-accent: #756da1; --color-accent-2: #5c8768;
  --color-accent-100: #f2f1f8; --color-accent-200: #e1def0; --color-accent-300: #c8c3e2; --color-accent-400: #aaa3cf; --color-accent-500: #8d85b9; --color-accent-600: #756da1; --color-accent-700: #5c5582; --color-accent-800: #443f60; --color-accent-900: #2c293f;
  --color-accent-2-100: #eef4ef; --color-accent-2-200: #d9e8dc; --color-accent-2-300: #b9d4bf; --color-accent-2-400: #93ba9c; --color-accent-2-500: #739f7e; --color-accent-2-600: #5c8768; --color-accent-2-700: #476b52; --color-accent-2-800: #33503c; --color-accent-2-900: #213427;
}
:root[data-theme="dark"][data-accent="lavender"] {
  --color-accent: #a29cd0; --color-accent-2: #8fc19c;
  --color-accent-100: #24223a; --color-accent-200: #322f4f; --color-accent-300: #47436e; --color-accent-400: #625d93; --color-accent-500: #807ab3; --color-accent-600: #a29cd0; --color-accent-700: #c1bce2; --color-accent-800: #ddd9f0; --color-accent-900: #f1effa;
  --color-accent-2-100: #1f2e23; --color-accent-2-200: #2b4131; --color-accent-2-300: #3c5c45; --color-accent-2-400: #557d5f; --color-accent-2-500: #6f9f7b; --color-accent-2-600: #8fc19c; --color-accent-2-700: #b1d6ba; --color-accent-2-800: #d3e9d8; --color-accent-2-900: #ecf6ef;
}
:root[data-accent="terracotta"] {
  --color-accent: #c95a35; --color-accent-2: #5c8768;
  --color-accent-100: #fcefe8; --color-accent-200: #f8dccd; --color-accent-300: #f0bda6; --color-accent-400: #e6987a; --color-accent-500: #d9744f; --color-accent-600: #c95a35; --color-accent-700: #a5452a; --color-accent-800: #7b331f; --color-accent-900: #4c2014;
  --color-accent-2-100: #eef4ef; --color-accent-2-200: #d9e8dc; --color-accent-2-300: #b9d4bf; --color-accent-2-400: #93ba9c; --color-accent-2-500: #739f7e; --color-accent-2-600: #5c8768; --color-accent-2-700: #476b52; --color-accent-2-800: #33503c; --color-accent-2-900: #213427;
}
:root[data-theme="dark"][data-accent="terracotta"] {
  --color-accent: #ec8a64; --color-accent-2: #8fc19c;
  --color-accent-100: #3a2419; --color-accent-200: #553222; --color-accent-300: #7a4530; --color-accent-400: #a85e40; --color-accent-500: #d27551; --color-accent-600: #ec8a64; --color-accent-700: #f5ae90; --color-accent-800: #fad1bf; --color-accent-900: #fdebe2;
  --color-accent-2-100: #1f2e23; --color-accent-2-200: #2b4131; --color-accent-2-300: #3c5c45; --color-accent-2-400: #557d5f; --color-accent-2-500: #6f9f7b; --color-accent-2-600: #8fc19c; --color-accent-2-700: #b1d6ba; --color-accent-2-800: #d3e9d8; --color-accent-2-900: #ecf6ef;
}

/* — фон світлої теми: <html data-ground="tint|cream|sand|linen|stone">; tint — відтінок під акцент — */
:root:not([data-theme="dark"])[data-ground="cream"] { --color-bg: #faf6f1; --color-surface: #ffffff; --color-neutral-100: #f4eee7; --color-neutral-200: #ebe3d9; }
:root:not([data-theme="dark"])[data-ground="sand"] { --color-bg: #f0e9df; --color-surface: #fbf8f3; --color-neutral-100: #e8dfd3; --color-neutral-200: #ddd2c4; }
:root:not([data-theme="dark"])[data-ground="linen"] { --color-bg: #e9e3d8; --color-surface: #f7f3ec; --color-neutral-100: #e0d8cb; --color-neutral-200: #d3c9b9; }
:root:not([data-theme="dark"])[data-ground="stone"] { --color-bg: #e7e4df; --color-surface: #f6f4f1; --color-neutral-100: #dedad3; --color-neutral-200: #d1ccc3; }
:root:not([data-theme="dark"])[data-ground="tint"][data-accent="sage"] { --color-bg: #e8ede5; --color-surface: #f7f9f5; --color-neutral-100: #dfe6db; --color-neutral-200: #d1dacb; }
:root:not([data-theme="dark"])[data-ground="tint"][data-accent="teal"] { --color-bg: #e3ecea; --color-surface: #f5f9f8; --color-neutral-100: #d9e4e2; --color-neutral-200: #c9d7d4; }
:root:not([data-theme="dark"])[data-ground="tint"][data-accent="clay"] { --color-bg: #f0e6e2; --color-surface: #fbf7f5; --color-neutral-100: #e8dcd7; --color-neutral-200: #dccdc7; }
:root:not([data-theme="dark"])[data-ground="tint"][data-accent="lavender"] { --color-bg: #e8e6ef; --color-surface: #f7f6fa; --color-neutral-100: #dfdce8; --color-neutral-200: #d1cddd; }
:root:not([data-theme="dark"])[data-ground="tint"][data-accent="terracotta"] { --color-bg: #f2e8df; --color-surface: #fcf8f4; --color-neutral-100: #eaddd1; --color-neutral-200: #dfcfc0; }

/* — натуральна темна тема для фірмової пари «Морська хвиля + Камінь»: мокрий камінь уночі, приглушена морська вода — */
:root[data-theme="dark"][data-accent="teal"][data-ground="stone"] {
  --color-bg: #151a19;
  --color-surface: #1d2322;
  --color-text: #e3e9e6;
  --color-divider: color-mix(in srgb, #e3e9e6 11%, transparent);
  --color-accent: #6ea9a3;
  --color-neutral-100: #1f2423; --color-neutral-200: #283030; --color-neutral-300: #39423f; --color-neutral-400: #56605d; --color-neutral-500: #74807c; --color-neutral-600: #95a09c; --color-neutral-700: #b6bfbb; --color-neutral-800: #d5dcd9; --color-neutral-900: #eef2f0;
  --color-accent-100: #172726; --color-accent-200: #1e3735; --color-accent-300: #2a4f4c; --color-accent-400: #3b6d69; --color-accent-500: #508c87; --color-accent-600: #6ea9a3; --color-accent-700: #98c8c3; --color-accent-800: #c3e1de; --color-accent-900: #e6f3f1;
  --color-accent-2: #c7a670;
  --color-accent-2-100: #29231a; --color-accent-2-200: #3a3122; --color-accent-2-300: #55472f; --color-accent-2-400: #776341; --color-accent-2-500: #9a8257; --color-accent-2-600: #c7a670; --color-accent-2-700: #dcc49a; --color-accent-2-800: #ecdcc0; --color-accent-2-900: #f8f0e2;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 8px 22px rgb(0 0 0 / 0.42);
  --shadow-lg: 0 20px 48px rgb(0 0 0 / 0.55);
}
:root[data-theme="dark"][data-accent="teal"][data-ground="stone"] .btn-primary { box-shadow: 0 6px 18px rgb(0 0 0 / 0.35); }

/* — компонентний шар: м'які, заокруглені, без креслярських міток — */
body { font-family: var(--font-body); }
h1, h2, h3, h4 { letter-spacing: -0.01em; }
.corner { display: none !important; }

.panel, .card {
  position: relative; background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-kicker { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 600; }

.btn { border-radius: var(--radius-md); font-weight: 600; }
.btn-icon { border-radius: 50%; }
.btn-secondary { background: var(--color-surface); }
.btn-secondary:hover { background: var(--color-neutral-100); }
.btn-primary { border-color: transparent; color: #fff;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-accent) 32%, transparent); }
.btn-primary:hover { background: var(--color-accent-700); }
.btn-primary:active { background: var(--color-accent-800); }
:root[data-theme="dark"] .btn-primary { color: var(--color-bg); }
:root[data-theme="dark"] .btn-primary:hover { background: var(--color-accent-700); }

.input { border-radius: var(--radius-md); background: var(--color-surface); }
.tag { border-radius: 999px; font-weight: 500; }

.seg { border-radius: 999px; border: 0; padding: 3px; gap: 2px; background: var(--color-neutral-200); }
.seg-opt { border-radius: 999px; }
.seg-opt + .seg-opt { border-left: 0; }
.seg-opt:has(input:checked) { box-shadow: var(--shadow-sm); }

.dialog { border-radius: var(--radius-lg); background: var(--color-surface); }
.nav a[aria-current='page'] { color: var(--color-accent-700); font-weight: 600; }