@import "./theme-dark.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root,
  [data-theme="dark"] {
    color-scheme: dark;

    /* Ana zemin #181f2e — kartlar bir ton açık */
    --site-bg: #181f2e;
    --site-bg-frost: rgba(24, 31, 46, 0.94);
    --site-surface-top: #1e2739;
    --site-surface-bottom: #181f2e;
    --site-surface: #1e2739;
    --site-surface-gradient: linear-gradient(
      180deg,
      rgba(30, 39, 57, 0.98) 0%,
      rgba(24, 31, 46, 0.98) 100%
    );
    --site-raised: #252f44;
    --site-raised-gradient: linear-gradient(
      180deg,
      rgba(37, 47, 68, 0.98) 0%,
      rgba(30, 39, 57, 0.98) 100%
    );
    --site-elevated: #2c374f;
    --site-elevated-gradient: linear-gradient(
      180deg,
      rgba(44, 55, 79, 0.98) 0%,
      rgba(30, 39, 57, 0.98) 100%
    );
    --site-deep: #141a28;
    --site-panel-gradient: linear-gradient(
      165deg,
      rgba(37, 47, 68, 0.98) 0%,
      rgba(30, 39, 57, 0.98) 55%,
      rgba(24, 31, 46, 0.98) 100%
    );
    --site-shell-gradient: linear-gradient(180deg, #1c2436 0%, #181f2e 100%);

    --site-border: rgba(255, 255, 255, 0.08);
    --site-border-soft: rgba(255, 255, 255, 0.06);
    --site-text: #f3f4f6;
    --site-text-muted: #9ca3af;
    --site-text-soft: #6b7280;

    /* Marka: #1677ff mavi · #ff1e1e kırmızı */
    --site-accent: #1677ff;
    --site-accent-hover: #4096ff;
    --site-accent-active: #0958d8;
    --site-accent-bright: #69b1ff;
    --site-accent-muted: #0958d8;
    --site-accent-deep: #003eb3;
    --site-accent-red: #ff1e1e;
    --site-accent-red-hover: #ff4545;
    --site-accent-red-active: #e01a1a;
    --site-accent-red-bright: #ff6b6b;
    --site-accent-red-deep: #cc1818;
  }

  html {
    background-color: var(--site-bg);
    background-image: var(--site-shell-gradient);
    background-attachment: fixed;
  }

  body.site-body {
    background-color: transparent;
  }

  .site-layout {
    background-color: transparent;
  }

  .site-footer-root {
    background-color: var(--site-bg);
  }

  .site-footer {
    background: var(--site-surface-gradient);
  }
}

@layer components {
  .bg-site-surface {
    background: var(--site-surface-gradient);
  }

  .bg-site-raised {
    background: var(--site-raised-gradient);
  }

  .bg-site-panel {
    background: var(--site-panel-gradient);
  }

  .site-brand-logo--header,
  .site-brand-logo--sidebar {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: center center;
  }

  @media (max-width: 1023px) {
    #header-root .site-header__mobile-logo .site-brand-logo--header {
      height: 2.5rem;
      max-height: 2.5rem;
      width: auto;
      max-width: min(17.5rem, 72vw);
      transform: scale(1.34);
      transform-origin: center center;
    }
  }

  .site-brand-logo--footer {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 3.25rem;
    object-fit: contain;
    object-position: center;
  }
}

@layer utilities {
  .text-site {
    color: var(--site-text);
  }
  .text-site-muted {
    color: var(--site-text-muted);
  }
}
