/*
  TurnusGo Design System v4 — Dark Premium
  Visual layer only. Functional calendar colours remain unchanged.
*/

:root {
  color-scheme: dark;

  /* TurnusGo brand foundation — functional calendar colours stay separate below */
  --brand-primary: #ffc400;
  --brand-primary-hover: #e9ad00;
  --brand-graphite: #17191a;
  --brand-dark-surface: #202325;
  --brand-background: #151718;
  --brand-surface: #1e2123;
  --brand-white: #f7f6f1;
  --brand-text: #f7f6f1;
  --brand-text-secondary: #b3b7b9;
  --brand-border: rgba(255, 255, 255, 0.085);

  /* Brand surfaces */
  --tt-bg: var(--brand-background);
  --tt-bg-grid: rgba(255, 255, 255, 0.018);
  --tt-surface: #1e2123;
  --tt-surface-elevated: #232629;
  --tt-surface-sunken: #191b1d;
  --tt-surface-inverse: #111314;
  --tt-surface-inverse-raised: #17191a;

  /* Borders */
  --tt-border: var(--brand-border);
  --tt-border-soft: rgba(255, 255, 255, 0.055);
  --tt-border-strong: rgba(255, 255, 255, 0.145);
  --tt-border-inverse: rgba(255, 255, 255, 0.2);
  --tt-border-width: 1px;
  --tt-border-width-strong: 2px;

  /* Typography colours */
  --tt-text-primary: var(--brand-text);
  --tt-text-secondary: #b3b7b9;
  --tt-text-muted: #858b8e;
  --tt-text-inverse: var(--brand-white);
  --tt-text-inverse-muted: #a8adaf;
  --tt-text-on-action: #17191a;

  /* Brand actions and semantic feedback */
  --tt-action: var(--brand-primary);
  --tt-action-hover: var(--brand-primary-hover);
  --tt-action-muted: #d4a800;
  --tt-action-soft: rgba(255, 196, 0, 0.12);
  --tt-success: #58c987;
  --tt-success-soft: rgba(49, 169, 101, 0.13);
  --tt-info: #71b7d5;
  --tt-info-soft: rgba(44, 132, 216, 0.12);
  --tt-warning: #efb45d;
  --tt-warning-soft: rgba(239, 148, 31, 0.13);
  --tt-error: #ff727a;
  --tt-error-soft: rgba(222, 77, 88, 0.13);

  /* Functional calendar states — deliberately unchanged */
  --tt-state-work: #31a965;
  --tt-state-road: #8058c7;
  --tt-state-home: #eabf36;
  --tt-state-holiday: #ef941f;
  --tt-state-free: #de4d58;
  --tt-state-work-sk: #2c84d8;

  /* Spacing */
  --tt-space-1: 4px;
  --tt-space-2: 8px;
  --tt-space-3: 12px;
  --tt-space-4: 16px;
  --tt-space-5: 20px;
  --tt-space-6: 24px;
  --tt-space-7: 32px;
  --tt-space-8: 40px;

  /* Shape */
  --tt-radius-xs: 5px;
  --tt-radius-sm: 8px;
  --tt-radius-md: 12px;
  --tt-radius-lg: 16px;
  --tt-radius-xl: 20px;
  --tt-radius-pill: 999px;

  /* Elevation */
  --tt-shadow-0: none;
  --tt-shadow-1: 0 1px 0 rgba(255, 255, 255, 0.025), 0 8px 22px rgba(0, 0, 0, 0.16);
  --tt-shadow-2: 0 18px 44px rgba(0, 0, 0, 0.3);
  --tt-shadow-overlay: 0 -20px 60px rgba(0, 0, 0, 0.48);

  /* Type scale */
  --tt-type-micro: 0.625rem;
  --tt-type-caption: 0.75rem;
  --tt-type-body: 0.875rem;
  --tt-type-subtitle: 1rem;
  --tt-type-title: 1.375rem;
  --tt-type-display: clamp(2.8rem, 13vw, 4.25rem);
  --tt-type-metric: clamp(1.65rem, 8vw, 2.35rem);
  --tt-leading-tight: 1.05;
  --tt-leading-body: 1.45;
  --tt-tracking-label: 0.085em;

  /* Icons */
  --tt-icon-xs: 14px;
  --tt-icon-sm: 18px;
  --tt-icon-md: 22px;
  --tt-icon-lg: 28px;

  /* Motion */
  --tt-duration-fast: 120ms;
  --tt-duration-base: 180ms;
  --tt-duration-slow: 220ms;
  --tt-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --tt-ease-enter: cubic-bezier(0, 0, 0.2, 1);

  /* Legacy aliases keep component logic untouched */
  --bg: var(--tt-bg);
  --surface: var(--tt-surface-elevated);
  --surface-soft: var(--tt-surface);
  --text: var(--tt-text-primary);
  --muted: var(--tt-text-muted);
  --line: var(--tt-border-soft);
  --blue: var(--tt-action);
  --blue-soft: var(--tt-action-soft);
  --green: var(--tt-state-work);
  --orange: var(--tt-state-holiday);
  --purple: var(--tt-state-road);
  --yellow: var(--tt-state-home);
  --sk-blue: var(--tt-state-work-sk);
  --red: var(--tt-state-free);
  --shadow: var(--tt-shadow-1);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html {
  min-width: 320px;
  background: var(--tt-bg);
}

body {
  min-width: 320px;
  min-height: 100vh;
  background: var(--tt-bg);
  color: var(--tt-text-primary);
  font-feature-settings: "tnum" 1, "ss01" 1;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled),
[role="button"] {
  transition:
    color var(--tt-duration-fast) var(--tt-ease-standard),
    background-color var(--tt-duration-fast) var(--tt-ease-standard),
    border-color var(--tt-duration-fast) var(--tt-ease-standard),
    opacity var(--tt-duration-fast) var(--tt-ease-standard),
    transform var(--tt-duration-fast) var(--tt-ease-standard);
}

button:not(:disabled):active,
[role="button"]:active {
  transform: scale(0.98);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--tt-action) 48%, transparent);
  outline-offset: 2px;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.ui-icon {
  display: inline-block;
  width: var(--tt-icon-sm);
  height: var(--tt-icon-sm);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  vertical-align: middle;
}

.ui-icon.icon-xs {
  width: var(--tt-icon-xs);
  height: var(--tt-icon-xs);
}

.ui-icon.icon-md {
  width: var(--tt-icon-md);
  height: var(--tt-icon-md);
}

.ui-icon.icon-lg {
  width: var(--tt-icon-lg);
  height: var(--tt-icon-lg);
}

/* Shell and recurring TurnusGo route motif */

.app-shell {
  width: min(100%, 820px);
  min-height: 100vh;
  padding-bottom: calc(78px + env(safe-area-inset-bottom));
  background: var(--tt-bg);
}

.topbar {
  position: relative;
  z-index: 12;
  min-height: 66px;
  padding: calc(10px + env(safe-area-inset-top)) var(--tt-space-4) 9px;
  border-bottom: var(--tt-border-width) solid var(--tt-border);
  background: color-mix(in srgb, var(--tt-bg) 91%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.topbar::after {
  display: none;
}

.topbar-title {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--tt-space-2);
  align-items: center;
}

.topbar-title::before {
  display: none;
}

.topbar-brand-mark {
  width: 34px;
  height: 29px;
  grid-row: 1 / -1;
  object-fit: cover;
}

.topbar-product-name {
  display: flex;
  grid-column: 2;
  grid-row: 1;
  align-items: baseline;
  color: var(--tt-text-primary);
  font-size: 1.12rem;
  font-weight: 850;
  letter-spacing: -0.045em;
  line-height: 1;
}

.topbar-product-name b {
  font: inherit;
}

.topbar-product-name b:last-child {
  color: var(--tt-action-hover);
}

.eyebrow {
  grid-column: 2;
  grid-row: 2;
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-micro);
  font-weight: 760;
  letter-spacing: 0.03em;
}

.avatar-button {
  width: 44px;
  height: 44px;
  border: var(--tt-border-width) solid var(--tt-border);
  border-radius: var(--tt-radius-sm);
  background: var(--tt-surface);
  color: var(--tt-text-primary);
  box-shadow: none;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

.topbar-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--tt-space-2);
}

.privacy-button {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  border: var(--tt-border-width) solid var(--tt-border);
  border-radius: var(--tt-radius-sm);
  place-items: center;
  background: var(--tt-surface);
  color: var(--tt-text-secondary);
}

.privacy-button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--tt-action) 52%, var(--tt-border));
  background: var(--tt-action-soft);
  color: var(--tt-action);
}

.privacy-button .ui-icon {
  width: 20px;
  height: 20px;
}

.page {
  padding: var(--tt-space-2) var(--tt-space-3) var(--tt-space-6);
  animation: tt-page-enter var(--tt-duration-base) var(--tt-ease-enter) both;
}

.section-title {
  position: relative;
  margin: var(--tt-space-5) 2px var(--tt-space-3);
  padding-left: 0;
  font-size: var(--tt-type-title);
  font-weight: 780;
  letter-spacing: -0.035em;
}

.section-title::before {
  display: none;
}

/* Three shared surface primitives */

.card {
  border: var(--tt-border-width) solid var(--tt-border);
  border-radius: var(--tt-radius-lg);
  background: var(--tt-surface-elevated);
  box-shadow: var(--tt-shadow-1);
}

.panel-hero,
.overview-hero,
.stats-hero,
.turnus-hero {
  position: relative;
  overflow: hidden;
  border-color: var(--tt-border);
  border-radius: var(--tt-radius-lg);
  background: var(--tt-surface-elevated);
  color: var(--tt-text-primary);
}

.panel-standard,
.overview-card,
.calendar-card,
.turnus-card,
.settings-group,
.stats-chart {
  border-radius: var(--tt-radius-lg);
  background: var(--tt-surface-elevated);
}

.panel-compact,
.overview-plan-card,
.overview-metric,
.stat-card,
.quarter-card,
.detail-block,
.form-section {
  border-radius: var(--tt-radius-md);
  background: var(--tt-surface);
}

.panel-hero::before,
.overview-hero::before,
.stats-hero::before,
.turnus-hero::before {
  display: none;
}

/* Buttons */

.primary-button,
.secondary-button,
.danger-button,
.ghost-button,
.invoice-payment-button {
  min-height: 44px;
  padding: 0 var(--tt-space-4);
  border-radius: var(--tt-radius-sm);
  box-shadow: none;
  font-size: var(--tt-type-caption);
  font-weight: 780;
  letter-spacing: 0.01em;
}

.button-with-icon,
.turnus-finance-actions button,
.finance-modal-title,
.turnus-detail-title,
.turnus-mini-calendar h3,
.finance-history h3,
.stats-kicker,
.stats-chart h3,
.turnus-countdown,
.turnus-hero-route,
.overview-kicker,
.overview-card-head > span,
.setting-inline-label,
.account-label {
  display: flex;
  align-items: center;
  gap: var(--tt-space-2);
}

.primary-button {
  border: var(--tt-border-width) solid var(--tt-action);
  background: var(--tt-action);
  color: var(--tt-text-on-action);
}

.primary-button:hover {
  border-color: var(--tt-action-hover);
  background: var(--tt-action-hover);
}

.secondary-button {
  border: var(--tt-border-width) solid var(--tt-border-strong);
  background: var(--tt-surface);
  color: var(--tt-text-primary);
}

.secondary-button:hover {
  border-color: var(--tt-action);
  color: var(--tt-text-primary);
}

.danger-button {
  border: var(--tt-border-width) solid color-mix(in srgb, var(--tt-error) 42%, transparent);
  background: var(--tt-error-soft);
  color: var(--tt-error);
}

.mini-link {
  min-height: 34px;
  padding: 0 var(--tt-space-2);
  border: var(--tt-border-width) solid var(--tt-border);
  border-radius: var(--tt-radius-sm);
  background: var(--tt-surface);
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-micro);
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

/* Bottom navigation */

.bottom-nav {
  grid-template-columns: repeat(5, 1fr);
  width: min(100%, 820px);
  min-height: calc(72px + env(safe-area-inset-bottom));
  padding: 5px 7px env(safe-area-inset-bottom);
  border-top: var(--tt-border-width) solid var(--tt-border);
  background: color-mix(in srgb, var(--tt-surface-inverse-raised) 94%, transparent);
  box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.nav-item {
  position: relative;
  min-width: 0;
  min-height: 59px;
  gap: 4px;
  color: var(--tt-text-muted);
  font-size: 0.56rem;
  font-weight: 720;
  letter-spacing: 0.01em;
}

.nav-item::before {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 34px;
  height: 28px;
  border-radius: var(--tt-radius-sm);
  background: transparent;
  content: "";
  transform: translateX(-50%);
}

.nav-item.active {
  color: var(--tt-action);
}

.nav-item.active::before {
  background: var(--tt-action);
}

.nav-item.active .nav-icon {
  color: var(--tt-text-on-action);
}

.nav-icon {
  position: relative;
  z-index: 1;
  width: 21px;
  height: 21px;
  stroke-width: 1.75;
}

input,
select,
textarea {
  color-scheme: dark;
  accent-color: var(--tt-action);
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--tt-text-muted) 72%, transparent);
}