/* ============================================================
   YOMI Profit — токены дизайн-системы.
   СКОПИРОВАНО 27.07.2026 из "design system/tokens/" (fonts, colors,
   typography, spacing) — правки вносить ТАМ и переносить сюда, не
   наоборот. Каталог "design system/" не попадает в docker-образ
   (Dockerfile копирует только app/, alembic/), поэтому статика веба
   обязана быть самодостаточной.
   Светлая тема (:root) — Mini App участника; [data-theme="dark"] —
   панель продюсера (Спринт 5).
   ============================================================ */

/* ============================================================
   YOMI — Webfonts
   Playfair Display (display/headings) + Manrope (body/UI/data).
   These are the real brand fonts; loaded from Google Fonts CDN.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,600&display=swap');

/* ============================================================
   YOMI — Color Tokens v1.0 (2026)
   Source of truth: YOMI_color_guide. Monochrome warm base + ONE
   loud accent (orange). Semantic colors kept muted on purpose.
   ============================================================ */

:root {
  /* ---- Primary: YOMI Orange ---- */
  --orange-50:  #FFF2EA;
  --orange-100: #FFE0CC;
  --orange-200: #FFC09A;
  --orange-300: #FF9D63;
  --orange-400: #FE7E2E;
  --orange-500: #FE6603; /* core accent / CTA / logo */
  --orange-600: #E25502;
  --orange-700: #BC4502;
  --orange-800: #933601;
  --orange-900: #6E2800;

  /* ---- Neutrals: Warm Gray (warm undertone under the orange) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAF9F7;
  --neutral-100: #F1F0EC;
  --neutral-200: #E5E3DD;
  --neutral-300: #CFCCC4;
  --neutral-400: #A6A29A;
  --neutral-500: #79756D;
  --neutral-600: #57534C;
  --neutral-700: #3C3934;
  --neutral-800: #292621;
  --neutral-900: #1A1815;
  --off-white:   #ECECEC; /* text on dark surfaces (never pure white) */

  /* ---- Semantic (muted — never out-shouts the orange) ---- */
  --success-bg: #E9F6EF; --success: #2F9E6B; --success-strong: #1C6B47;
  --warning-bg: #FCF3DF; --warning: #E0A411; --warning-strong: #9A6E08;
  --error-bg:   #FCE9E9; --error:   #E04848; --error-strong:   #9A2C2C;
  --info-bg:    #E8F1FB; --info:    #2F7DD0; --info-strong:    #1B548F;

  /* ---- Roles: LIGHT mode "Script / editorial" (default) ---- */
  --bg:             var(--neutral-50);
  --bg-elevated:    var(--neutral-0);
  --surface:        var(--neutral-100);
  --surface-sunken: var(--neutral-200);
  --text:           var(--neutral-900);
  --text-secondary: var(--neutral-600);
  /* приглушённый текст — мелкий кегль (10–12px): подписи полей, заголовки
     колонок, eyebrow. Затемнён относительно neutral-500 #79756D до контраста
     ≥4.5:1 даже на самой тёмной поверхности (--surface-sunken) — правка
     доступности 05.08.2026, R8_UX (иначе весь мелкий текст ниже нормы AA) */
  --text-muted:     #686459;
  --border:         var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --accent:         var(--orange-500);
  --accent-hover:   var(--orange-400); /* светлее, а не темнее: текст на заливке тёмный */
  --accent-press:   var(--orange-300);
  --accent-soft:    var(--orange-50);
  /* оранжевый КАК ТЕКСТ (ссылки, ghost-кнопки) берётся на два шага темнее
     заливки: orange-600 давал 3.6:1 на фоне страницы — ниже нормы для
     кегля 13–15px. Заливки и линии по-прежнему --accent */
  --link:           var(--orange-700);
  /* текст на оранжевой заливке — тёмные «чернила» бренда вместо orange-900:
     orange-900 давал 3.6:1 (норма 4.5:1), а белый запрещён брендбуком.
     ОТСТУПЛЕНИЕ от «design system/readme.md» § цвет — зафиксировано в DECISIONS */
  --on-accent:      var(--neutral-900);
  /* кольцо фокуса обязано читаться и на оранжевой кнопке, где оранжевое
     кольцо сливалось с заливкой (2.8:1) */
  --focus-ring:     var(--neutral-900);
}

/* ---- DARK mode: "Plan / studio" ---- */
[data-theme="dark"] {
  --bg:             var(--neutral-900);
  --bg-elevated:    var(--neutral-800);
  --surface:        var(--neutral-800);
  --surface-sunken: var(--neutral-900);
  --text:           var(--off-white);
  --text-secondary: var(--neutral-400);
  --text-muted:     var(--neutral-500);
  --border:         var(--neutral-700);
  --border-strong:  var(--neutral-700);
  --accent:         var(--orange-500);
  --accent-hover:   var(--orange-400);
  --accent-press:   var(--orange-300);
  --accent-soft:    rgba(254,102,3,0.12);
  --link:           var(--orange-400);
  --on-accent:      var(--orange-900);
  --focus-ring:     var(--orange-400);
}

/* ============================================================
   YOMI — Typography Tokens v1.0 (2026)
   Playfair Display = display accent ONLY (headings, in moderation).
   Manrope = everything else (body, UI, numbers).
   Labels = Manrope UPPERCASE with wide tracking.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;

  /* ---- Type scale (px) ---- */
  --text-display: 52px; /* Playfair, 40–56 hero */
  --text-h1:      32px;
  --text-h2:      24px;
  --text-h3:      20px;
  --text-body:    16px;
  --text-sm:      14px;
  --text-caption: 12px; /* uppercase, tracked */

  /* ---- Weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* ---- Line heights ---- */
  --leading-tight:   1.1;  /* display / headings */
  --leading-snug:    1.3;
  --leading-normal:  1.55; /* body copy */

  /* ---- Tracking ---- */
  --label-tracking:  0.16em;  /* uppercase labels / eyebrow */
  --tracking-tight: -0.01em;  /* large display / KPI numbers */
  --tracking-normal: 0;
}

/* ============================================================
   YOMI — Spacing, Radius, Border, Motion Tokens v1.0 (2026)
   4/8 scale. Moderate radii (Notion logic). Flat surfaces:
   depth from hairlines and block fills, almost never shadow.
   ============================================================ */

:root {
  /* ---- Spacing (4 / 8) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ---- Radii ---- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --hairline:        1px solid var(--border);
  --hairline-strong: 1px solid var(--border-strong);
  --border-width:    1px;

  /* ---- Shadow (used sparingly — flat by default) ---- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(26,24,21,0.05);
  --shadow-md:   0 4px 16px rgba(26,24,21,0.08);

  /* ---- Motion (restrained, responds to user action) ---- */
  --dur-fast: 150ms; /* @kind other */
  --dur:      200ms; /* @kind other */
  --dur-slow: 250ms; /* @kind other */
  --ease:     cubic-bezier(.2,.6,.2,1); /* @kind other */
}