/* Токены дизайна — «небо»: синий градиент с облаками и мелким шумом, полупрозрачные стеклянные плитки
   с тонкой светлой каймой, белый текст, белые кнопки с мягким свечением и рукописные подписи. */

/* основной шрифт — SF Pro Text Semibold: системный на iPhone/Mac, иначе файл из assets/fonts.
   Один начертание на все веса, чтобы браузер не дорисовывал «жирный» сам. */
@font-face {
  font-family: 'SF Pro Text';
  src: local('SF Pro Text Semibold'), local('SFProText-Semibold'),
    url('../assets/fonts/SFProText-Semibold.woff2') format('woff2'),
    url('../assets/fonts/SFProText-Semibold.ttf') format('truetype'),
    url('../assets/fonts/SFProText-Semibold.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* рукописные подписи */
@font-face {
  font-family: 'Caveat';
  src: url('../assets/fonts/caveat.ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* небо: сверху глубже, книзу светлее */
  --sky-top: #0b4a93;
  --sky-mid: #1a5fac;
  --sky-bottom: #2c6db8;
  --bg: #1a5fac;
  --bg-deep: #083d7c;
  --sky-gradient: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 46%, var(--sky-bottom) 100%);
  /* облака и шум — для слоёв, которые перекрывают фон приложения целиком */
  --sky:
    url('../assets/sky/noise.png') 0 0 / 160px repeat,
    linear-gradient(180deg, rgba(11, 74, 147, 0.6) 0%, rgba(26, 95, 172, 0.6) 46%, rgba(44, 109, 184, 0.6) 100%),
    url('../assets/sky/cloud.png') -150px 62% / 420px no-repeat,
    url('../assets/sky/cloud.png') calc(100% + 170px) 18% / 460px no-repeat,
    var(--sky-gradient);

  /* поверхности: стекло поверх неба */
  --surface: rgba(255, 255, 255, 0.08);
  --surface-hi: rgba(255, 255, 255, 0.12);
  --surface-2: rgba(255, 255, 255, 0.11);
  --surface-3: rgba(255, 255, 255, 0.18);
  --tile: linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.06) 100%);
  --glass: rgba(28, 92, 168, 0.62);          /* плавающие панели с размытием под ними */
  --glass-blur: blur(22px) saturate(150%);
  /* шторки и окна — плотные, без просвета */
  --sheet-bg: url('../assets/sky/noise.png') 0 0 / 160px repeat, linear-gradient(180deg, #2a70bd 0%, #1c5ea9 100%);
  --line: rgba(255, 255, 255, 0.13);
  --line-strong: rgba(255, 255, 255, 0.24);
  --scrim: rgba(5, 28, 64, 0.55);
  --shadow: 0 14px 36px rgba(4, 30, 72, 0.32);
  --shadow-sm: 0 4px 14px rgba(4, 30, 72, 0.26);

  /* текст */
  --text: #ffffff;
  --text-2: rgba(255, 255, 255, 0.74);
  --text-3: rgba(255, 255, 255, 0.54);
  --text-on-accent: #0b2a55;
  --hand-color: rgba(255, 255, 255, 0.62);

  /* акцент: белый, со свечением */
  --accent: #ffffff;
  --accent-hover: #eef4ff;
  --accent-glow: 0 6px 26px rgba(255, 255, 255, 0.32);
  --btn-disabled: rgba(255, 255, 255, 0.1);
  --gold: #ffd877;
  --success: #8ef0b4;
  --success-bg: rgba(110, 240, 160, 0.18);
  --warn: #ffd877;
  --danger: #ffaaa6;

  /* подсветка плиток (r, g, b) */
  --glow-steel: 170, 210, 255;
  --glow-gold: 255, 214, 110;
  --glow-green: 120, 240, 170;
  --glow-rust: 255, 150, 110;
  --glow-olive: 220, 230, 120;
  --glow-amber: 255, 190, 90;
  --glow-rose: 255, 140, 180;
  --glow-violet: 190, 170, 255;

  /* радиусы */
  --r-xs: 10px;
  --r-sm: 12px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* отступы */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --page-x: clamp(18px, 6vw, 28px);
  --gutter: 16px;

  --font: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-hand: 'Caveat', 'Segoe Script', 'Comic Sans MS', cursive;
  --font-wide: var(--font); /* жетоны PRO / OWNER */
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.32, 0.5, 1);
  --t-fast: 140ms;
  --t-med: 260ms;
  --t-slow: 420ms;

  --z-dock: 20;
  --z-overlay: 40;
  --z-toast: 90;

  --top: 0px;
  --devframe-h: 52px;
  --safe-top: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --nav-h: 76px; /* капсула ~66px + отступ снизу 10px */
  --dock-h: calc(var(--nav-h) + var(--safe-bottom));
}

body.has-devframe { --top: var(--devframe-h); }