:root {
  color-scheme: dark;
}

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  background-color: #121212;
  color: #E3D3C2;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

#root {
  background-color: #121212 !important;
}

h1,
h2,
h3,
.hero-title,
.hero-motto,
.font-outfit,
.font-serif {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

p,
span,
li,
a,
button,
input,
textarea,
label,
nav,
.font-inter,
.font-sans {
  font-family: 'Inter', sans-serif !important;
}

nav,
a,
button,
label {
  font-weight: 500 !important;
}

/* Neutral first: default all readable UI text/icons to Marble Beige */
#root,
#root * {
  color: #E3D3C2;
}

#root svg,
#root i,
#root [class*='icon'],
#root span,
#root p,
#root li,
#root small,
#root strong,
#root em {
  color: #E3D3C2 !important;
}

/* Remove decorative red artifacts from compiled classes */
#root [class*='text-red'],
#root [class*='text-rose'],
#root [class*='text-praksis-brick'],
#root [class*='text-brickRed'],
#root [style*='color:#B13A2C'],
#root [style*='color: #B13A2C'],
#root [style*='color:rgb(177,58,44)'],
#root [style*='color: rgb(177, 58, 44)'] {
  color: #E3D3C2 !important;
}

/* Remove decorative red backgrounds from non-primary elements */
#root [class*='bg-red'],
#root [class*='bg-rose'],
#root [class*='bg-praksis-brick'],
#root [class*='bg-brickRed'],
#root [class*='border-red'],
#root [class*='border-rose'],
#root [class*='border-praksis-brick'],
#root [class*='border-brickRed'] {
  background-color: transparent !important;
  border-color: #E3D3C2 !important;
}

/* Strict accent allowlist: only primary CTA + active nav/critical interactive states */
#root nav a[aria-current='page'],
#root nav a.active,
#root nav [aria-selected='true'],
#root a[aria-current='page'],
#root button[class*='primary'],
#root a[class*='primary'],
#root button[class*='cta'],
#root a[class*='cta'],
#root .btn-primary,
#root .cta-primary,
#root .primary-cta,
#root .bg-praksis-brick,
#root .bg-brickRed {
  color: #E3D3C2 !important;
  background-color: #B13A2C !important;
  border-color: #B13A2C !important;
}

#root nav a[aria-current='page'],
#root nav a.active,
#root nav [aria-selected='true'],
#root a[aria-current='page'] {
  background-color: transparent !important;
  color: #B13A2C !important;
  border-color: #B13A2C !important;
}

#root button[type='submit'] svg,
#root button[class*='primary'] svg,
#root a[class*='primary'] svg,
#root button[class*='cta'] svg,
#root a[class*='cta'] svg,
#root .btn-primary svg,
#root .cta-primary svg,
#root .primary-cta svg {
  color: #E3D3C2 !important;
}

/* Contact submit button should match metric-button palette behavior */
#root button[type='submit'],
#root input[type='submit'] {
  background-color: #121212 !important;
  color: #E3D3C2 !important;
  border-color: #121212 !important;
}

#root button[type='submit']:hover,
#root button[type='submit']:focus-visible,
#root input[type='submit']:hover,
#root input[type='submit']:focus-visible {
  background-color: #121212 !important;
  color: #B13A2C !important;
  border-color: #E3D3C2 !important;
}

/* Runtime-tagged metric controls: keep active state anthracite + beige text */
#root .metric-action {
  background-color: #121212 !important;
  color: #E3D3C2 !important;
  border-color: #121212 !important;
  opacity: 1 !important;
}

#root .metric-action.metric-action-active {
  background-color: #121212 !important;
  color: #E3D3C2 !important;
  border-color: #121212 !important;
}

/* Requested active state for Imaj and Karlilik: anthracite bg + anthracite border */
#root .metric-imaj.metric-action-active,
#root .metric-satis.metric-action-active,
#root .metric-karlilik.metric-action-active {
  background-color: #121212 !important;
  border-color: #121212 !important;
  opacity: 1 !important;
}

/* Force Sales + Karlilik default and active visuals to match Imaj (anthracite) */
#root .metric-satis,
#root .metric-karlilik,
#root .metric-satis.metric-action-active,
#root .metric-karlilik.metric-action-active {
  background-color: #121212 !important;
  border-color: #121212 !important;
  color: #E3D3C2 !important;
}

/* Requested: when Karlilik is selected, its label should be brick red */
#root .metric-karlilik.metric-action-active,
#root .metric-karlilik.metric-action-active *,
#root .metric-karlilik[aria-selected='true'],
#root .metric-karlilik[aria-selected='true'] * {
  color: #B13A2C !important;
}

#root .metric-action.metric-action-active *,
#root .metric-action.metric-action-active svg {
  color: #E3D3C2 !important;
}

/* Keep metric button labels beige even on hover/focus/active states */
#root .metric-action:hover,
#root .metric-action:focus-visible,
#root .metric-action.metric-action-active:hover,
#root .metric-action.metric-action-active:focus-visible,
#root .metric-satis,
#root .metric-satis *,
#root .metric-satis.metric-action-active,
#root .metric-satis.metric-action-active * {
  color: #E3D3C2 !important;
  border-color: #121212 !important;
  background-color: #121212 !important;
  text-shadow: none !important;
}

/* Sales and profitability cards should match the same palette as image card */
#root .metric-card,
#root .metric-card * {
  color: #E3D3C2 !important;
}

#root .metric-card {
  background-color: rgba(18, 18, 18, 0.1) !important;
  border: 1px solid #E3D3C2 !important;
}

#root .metric-card [class*='bg-praksis-brick'],
#root .metric-card [class*='bg-praksis-tech'],
#root .metric-card [class*='bg-red'],
#root .metric-card [class*='bg-rose'],
#root .metric-card [class*='bg-blue'] {
  background-color: rgba(18, 18, 18, 0.1) !important;
}

#root .metric-card [class*='border-praksis-brick'],
#root .metric-card [class*='border-praksis-tech'],
#root .metric-card [class*='border-red'],
#root .metric-card [class*='border-rose'],
#root .metric-card [class*='border-blue'] {
  border-color: #E3D3C2 !important;
}

/* Hero brand word style for lowercase "praksis" */
#root .hero-brand-text {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  text-transform: lowercase;
}

/* About section background lock (Hakkımızda) */
#root .bg-praksis-parchment,
#root [class*='bg-praksis-parchment'],
#root section[class*='parchment'],
#root div[class*='parchment'] {
  background-color: #121212 !important;
  background-image: none !important;
}

#root [class*='bg-praksis-marble'],
#root [class*='bg-marbleBeige'],
#root [class*='bg-beige'],
#root [style*='background-color:#DCD2BE'],
#root [style*='background-color: #DCD2BE'],
#root [style*='background-color:#E3D3C2'],
#root [style*='background-color: #E3D3C2'],
#root [style*='background-color: rgb(220, 210, 190)'],
#root [style*='background-color:rgb(220,210,190)'],
#root [style*='background-color: rgb(227, 211, 194)'],
#root [style*='background-color:rgb(227,211,194)'] {
  background-color: #121212 !important;
}

/* Bauhaus cleanup: aggressively remove decorative effects from compiled UI */
[class*='shadow'],
[style*='box-shadow'] {
  box-shadow: none !important;
}

[class*='bg-gradient'],
[class*='from-'],
[class*='via-'],
[class*='to-'] {
  background-image: none !important;
}

#root [class*='blur'],
#root [class*='backdrop-blur'],
#root [class*='glow'],
#root [style*='filter: blur'],
#root [style*='backdrop-filter'] {
  filter: none !important;
  backdrop-filter: none !important;
}

[class*='rounded-'],
.rounded {
  border-radius: 0.125rem !important;
}

#root [class*='rounded-full'],
#root [class*='rounded-2xl'],
#root [class*='rounded-3xl'],
#root [class*='rounded-xl'],
#root [class*='rounded-lg'] {
  border-radius: 0.125rem !important;
}

/* Subtle scrollbar aligned to the palette */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #121212;
}

::-webkit-scrollbar-thumb {
  background: #E3D3C2;
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
  background: #B13A2C;
}

/* 3D background cubes: shift blue palette to brand brick red */
#root canvas {
  opacity: 0.5 !important;
  filter: hue-rotate(130deg) saturate(185%) brightness(72%) contrast(112%);
}

#powered-by-praksis {
  position: fixed;
  right: 16px;
  bottom: 10px;
  text-align: right;
  font-family: 'Outfit', sans-serif !important;
  font-size: 12pt;
  font-weight: 400;
  color: #E3D3C2 !important;
  letter-spacing: 0.02em;
  z-index: 9999;
  pointer-events: none;
}

body.is-about-page #powered-by-praksis {
  display: none !important;
}

/* About title should clear fixed header area */
#root .about-section-patched {
  padding-top: 88px !important;
}

#root .about-title-patched {
  margin-top: 104px !important;
  padding-top: 0 !important;
  line-height: 1.05 !important;
  text-transform: lowercase !important;
  scroll-margin-top: 84px;
}

/* About section vision/mission blocks should stay anthracite */
#root .about-info-block-patched {
  background-color: #121212 !important;
  border-left-color: #121212 !important;
}

/* About intro text area should not sit on beige panel */
#root .about-intro-patched,
#root .about-intro-parent-patched {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* About section: force large beige visual panel to full transparent */
#root .about-section-patched [class*='parchment'],
#root .about-section-patched [class*='marble'],
#root .about-section-patched [class*='beige'],
#root .about-section-patched [style*='background-color:#DCD2BE'],
#root .about-section-patched [style*='background-color: #DCD2BE'],
#root .about-section-patched [style*='background-color:#E3D3C2'],
#root .about-section-patched [style*='background-color: #E3D3C2'],
#root .about-section-patched [style*='background-color: rgb(220, 210, 190)'],
#root .about-section-patched [style*='background-color:rgb(220,210,190)'],
#root .about-section-patched [style*='background-color: rgb(227, 211, 194)'],
#root .about-section-patched [style*='background-color:rgb(227,211,194)'] {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Menu override: About link should remain unhighlighted */
#root .menu-link-flat,
#root .menu-link-flat:hover,
#root .menu-link-flat:focus-visible,
#root .menu-link-flat[aria-current='page'],
#root .menu-link-flat.active {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Subtle brick-red neon hover for all clickable elements */
#root a,
#root button,
#root [role='button'],
#root [role='tab'],
#root input[type='submit'],
#root input[type='button'] {
  transition: color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, text-shadow 0.22s ease;
}

#root a:hover,
#root button:hover,
#root [role='button']:hover,
#root [role='tab']:hover,
#root input[type='submit']:hover,
#root input[type='button']:hover,
#root a:focus-visible,
#root button:focus-visible,
#root [role='button']:focus-visible,
#root [role='tab']:focus-visible,
#root input[type='submit']:focus-visible,
#root input[type='button']:focus-visible {
  color: #B13A2C !important;
  border-color: #B13A2C !important;
  box-shadow: 0 0 6px rgba(177, 58, 44, 0.22), 0 0 12px rgba(177, 58, 44, 0.12) !important;
  text-shadow: 0 0 6px rgba(177, 58, 44, 0.2);
}