/* Design tokens shared by every page. See docs/10-ui-design-system.md.
   Palette: premium SaaS look — dark navy/purple sidebar, white/soft-gray content,
   blue-purple primary accents, rounded cards, soft shadows. Only visual values changed here;
   every custom property name below is unchanged so no CSS file or JS class binding breaks.

   The app intentionally always renders the light content theme (matching the approved design
   reference) regardless of the OS/browser's prefers-color-scheme setting — the previous
   automatic dark-mode override made card/topbar backgrounds nearly indistinguishable from the
   dark sidebar and page background, which read as a broken/overlapping layout. `color-scheme:
   light` also stops the browser from auto-darkening native form controls (checkboxes, date
   pickers, scrollbars) against this light design. */
:root {
  color-scheme: light;
  --color-bg: #F7F8FC;
  --color-surface: #FFFFFF;
  --color-surface-alt: #FAFBFE;
  --color-border: #E8EAF2;
  --color-border-strong: #D9DDEA;

  --color-text-primary: #151A2D;
  --color-text-secondary: #626A7F;
  --color-text-muted: #959BB0;
  --color-text-inverse: #FFFFFF;

  --color-primary: #0D9488;
  --color-primary-hover: #0B7F74;
  --color-primary-active: #0A6C63;
  --color-primary-soft: #E6F7F5;
  --color-primary-rgb: 13, 148, 136;
  --color-secondary: #D97706;

  --color-success: #17A673;
  --color-success-soft: #E4F7EF;
  --color-warning: #F0930B;
  --color-warning-soft: #FEF2E0;
  --color-danger: #EF4444;
  --color-danger-soft: #FDEAEA;
  --color-waiting: #F97316;
  --color-waiting-soft: #FEECDD;
  --color-info: #3B82F6;
  --color-info-soft: #E8F1FE;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 8px rgba(16, 24, 40, 0.035);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.075), 0 2px 6px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 20px 44px rgba(12, 18, 42, 0.16);

  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 13px;
  --font-size-lg: 15px;
  --font-size-xl: 18px;
  --font-size-2xl: 23px;
  --font-size-3xl: 28px;

  --topbar-height: 56px;
  --sidebar-width: 208px;
  --sidebar-width-collapsed: 64px;
  --content-max-width: 1780px;
  --focus-ring: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);

  --transition-fast: 150ms ease-out;
  --transition-normal: 200ms ease-in-out;

  /* Product-facing aliases make the token system easier to consume without breaking the
     existing --color-* contract used by JavaScript-linked styles. */
  --primary: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --primary-active: var(--color-primary-active);
  --primary-soft: var(--color-primary-soft);
  --secondary: var(--color-secondary);
  --sidebar-background: #0A1230;
  --sidebar-background-secondary: #111B43;
  --sidebar-text: #F8FAFF;
  --sidebar-muted: #8E98B7;
  --sidebar-active: var(--color-primary);
  --sidebar-hover: rgba(255, 255, 255, 0.07);
  --page-background: var(--color-bg);
  --surface: var(--color-surface);
  --surface-secondary: var(--color-surface-alt);
  --card-background: var(--color-surface);
  --border: var(--color-border);
  --border-strong: var(--color-border-strong);
  --heading: var(--color-text-primary);
  --body-text: var(--color-text-secondary);
  --muted-text: var(--color-text-muted);
  --disabled-text: #B1B6C6;
  --success: var(--color-success);
  --success-soft: var(--color-success-soft);
  --warning: var(--color-warning);
  --warning-soft: var(--color-warning-soft);
  --danger: var(--color-danger);
  --danger-soft: var(--color-danger-soft);
  --information: var(--color-info);
  --information-soft: var(--color-info-soft);
  --shadow-small: var(--shadow-sm);
  --shadow-medium: var(--shadow-md);
  --shadow-large: var(--shadow-lg);
  --radius-small: var(--radius-sm);
  --radius-medium: var(--radius-md);
  --radius-large: var(--radius-lg);
  --spacing-xs: var(--space-1);
  --spacing-sm: var(--space-2);
  --spacing-md: var(--space-3);
  --spacing-lg: var(--space-4);
  --spacing-xl: var(--space-5);
}

/* Automatic OS-driven dark mode intentionally disabled — see the note above the :root block.
   Dark mode is instead an explicit in-app toggle: Settings → Görünüm sets `data-theme="dark"`
   on <html> (see frontend/js/utils/theme-utils.js) and persists the choice in localStorage, so
   users are never surprised by a different-looking app depending on their system settings.
   The sidebar is unaffected — it uses its own always-dark --sidebar-* variables (themes.css). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #12141C;
  --color-surface: #1A1D29;
  --color-surface-alt: #20232F;
  --color-border: #2C303F;
  --color-border-strong: #3A3F52;

  --color-text-primary: #F1F2F6;
  --color-text-secondary: #ABB0C4;
  --color-text-muted: #767C93;
  --color-text-inverse: #12141C;

  --color-primary: #14B8A6;
  --color-primary-hover: #2DD4C4;
  --color-primary-active: #0D9488;
  --color-primary-soft: rgba(20, 184, 166, 0.16);
  --color-primary-rgb: 20, 184, 166;
  --color-secondary: #F59E0B;

  --color-success: #34D399;
  --color-success-soft: rgba(52, 211, 153, 0.14);
  --color-warning: #FBBF24;
  --color-warning-soft: rgba(251, 191, 36, 0.14);
  --color-danger: #F87171;
  --color-danger-soft: rgba(248, 113, 113, 0.14);
  --color-waiting: #FB923C;
  --color-waiting-soft: rgba(251, 146, 60, 0.14);
  --color-info: #60A5FA;
  --color-info-soft: rgba(96, 165, 250, 0.14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24), 0 2px 8px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 20px 44px rgba(0, 0, 0, 0.44);

  --disabled-text: #565B70;
}