/* Design tokens -- single source of truth for color, type, spacing, radius,
   shadow, breakpoints and z-index. Every other stylesheet in this app
   reads these variables instead of repeating raw values (plan section 3:
   "Aynı değeri sayfalar arasında rastgele tekrar etme"). */
:root {
  /* Color -- light surface, dark readable text, one controlled blue accent */
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --border: #e2e5ea;
  --border-strong: #cbd1db;
  --text: #16181d;
  --text-muted: #5b6270;
  --text-faint: #8a909c;

  --accent: #2f6fed;
  --accent-hover: #2558c4;
  --accent-contrast: #ffffff;
  --accent-tint: #e8f0fe;

  --success: #1a7f4e;
  --success-bg: #e6f6ee;
  --warning: #92600a;
  --warning-bg: #fdf1de;
  --danger: #c62f43;
  --danger-bg: #fbe9ec;
  --info: #2f6fed;
  --info-bg: #e8f0fe;

  /* Type scale */
  --fs-xs: 0.75rem;
  --fs-sm: 0.85rem;
  --fs-md: 0.95rem;
  --fs-lg: 1.1rem;
  --fs-xl: 1.35rem;
  --fs-2xl: 1.65rem;

  /* Spacing (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(20, 22, 30, 0.06), 0 1px 1px rgba(20, 22, 30, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 22, 30, 0.12), 0 2px 8px rgba(20, 22, 30, 0.08);

  /* Layout */
  --content-max: 960px;
  --sidebar-w: 220px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;
  --bottom-nav-h: 60px;

  /* Z-index scale */
  --z-sticky: 20;
  --z-drawer: 40;
  --z-modal: 50;
  --z-toast: 60;

  /* Touch targets */
  --tap-min: 44px;

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

  /* The Latin faces come first, then the system CJK faces each platform
     actually ships, so Chinese and Japanese text renders in a real UI font
     instead of falling through to a generic fallback with the wrong glyph
     shapes. No web font is downloaded: the whole chain is already installed
     on the device. "Hiragino Sans" precedes "PingFang SC" so Japanese pages
     on macOS get the Japanese forms of the characters the two scripts share. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP",
    "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC",
    sans-serif;
}

/* Chinese and Japanese have no spaces between words, so a long unbroken run of
   characters has no break opportunity a Latin-tuned layout would find. These
   two rules are what keep a card, a badge or a button from being pushed wider
   than the viewport by one long title. */
:root:lang(zh-CN),
:root:lang(ja) {
  line-height: 1.7;
}

:lang(zh-CN),
:lang(ja) {
  line-break: strict;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Dark surfaces are not part of this phase's scope, but keeping the token
   layer isolated here means a future dark theme only touches this file. */