/* ============================================================
   enesay.ru — shared/css/tokens.css
   iOS-style dark. Акцент — system blue. Точные токены.
   ============================================================ */

:root {
    /* ============================================================
       ФОН
       ============================================================ */
    --bg:          #0b0b0d;   /* base */
    --bg-soft:     #131316;   /* secondary layer */
    --bg-card:     #1c1c1e;   /* iOS secondarySystemBackground */
    --bg-elev:     #2c2c2e;   /* iOS tertiarySystemBackground */
    --bg-code:     #08080a;   /* log/code background */
    --bg-overlay:  rgba(20,20,22,.72);

    /* ============================================================
       ГРАНИЦЫ (iOS separator: тонкие, полупрозрачные)
       ============================================================ */
    --border:      rgba(255,255,255,.06);
    --border-2:    rgba(255,255,255,.10);
    --border-hi:   rgba(255,255,255,.16);

    /* ============================================================
       ТЕКСТ (iOS label hierarchy, dark)
       ============================================================ */
    --fg:          #ffffff;               /* label */
    --fg-dim:      rgba(235,235,245,.60); /* secondaryLabel */
    --fg-mute:     rgba(235,235,245,.40); /* tertiaryLabel */
    --fg-faint:    rgba(235,235,245,.24); /* quaternaryLabel */

    /* ============================================================
       АКЦЕНТ: iOS system blue (dark)
       ============================================================ */
    --accent:      #0a84ff;
    --accent-hi:   #3395ff;
    --accent-lo:   #0066cc;
    --accent-soft: rgba(10,132,255,.16);

    /* ============================================================
       СЕМАНТИКА (iOS system colors, dark)
       ============================================================ */
    --green:       #30d158;   /* systemGreen */
    --green-soft:  rgba(48,209,88,.16);

    --yellow:      #ffd60a;   /* systemYellow */
    --yellow-soft: rgba(255,214,10,.16);

    --orange:      #ff9f0a;   /* systemOrange */
    --orange-soft: rgba(255,159,10,.16);

    --red:         #ff453a;   /* systemRed */
    --red-soft:    rgba(255,69,58,.16);

    --danger:      #ff453a;
    --danger-soft: rgba(255,69,58,.16);

    --blue:        #0a84ff;   /* systemBlue */
    --blue-soft:   rgba(10,132,255,.16);

    --purple:      #bf5af2;   /* systemPurple */
    --purple-soft: rgba(191,90,242,.16);

    --pink:        #ff375f;   /* systemPink */
    --pink-soft:   rgba(255,55,95,.16);

    --teal:        #64d2ff;   /* systemTeal */
    --teal-soft:   rgba(100,210,255,.16);

    /* ============================================================
       СТЕКЛО
       ============================================================ */
    --glass-bg:        rgba(28,28,30,.72);
    --glass-bg-strong: rgba(28,28,30,.86);
    --glass-border:    rgba(255,255,255,.08);
    --glass-blur:      30px;
    --glass-saturate:  180%;

    /* ============================================================
       ГРАДИЕНТНЫЕ ПЯТНА (мягкие)
       ============================================================ */
    --grad-blue:   rgba(10,132,255,.22);
    --grad-purple: rgba(191,90,242,.18);
    --grad-pink:   rgba(255,55,95,.14);

    /* ============================================================
       ОТСТУПЫ (шаг 4px)
       ============================================================ */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  24px;
    --s-7:  28px;
    --s-8:  32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;

    /* ============================================================
       РАДИУСЫ (iOS-style, крупные)
       ============================================================ */
    --r-1:  10px;   /* иконочная кнопка, badge */
    --r-2:  12px;   /* кнопка, input */
    --r-3:  14px;   /* средняя карточка */
    --r-4:  16px;   /* основная карточка */
    --r-5:  22px;   /* большая секция */
    --r-6:  28px;   /* hero-блок */
    --r-pill: 999px;

    /* ============================================================
       ТЕНИ (многослойные, мягкие)
       ============================================================ */
    --sh-1: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.20);
    --sh-2: 0 2px 6px rgba(0,0,0,.40), 0 8px 24px rgba(0,0,0,.30);
    --sh-3: 0 8px 20px rgba(0,0,0,.45), 0 24px 60px rgba(0,0,0,.35);
    --sh-glow-accent: 0 0 0 4px var(--accent-soft);

    /* ============================================================
       LAYOUT
       ============================================================ */
    --topbar-h:    56px;
    --statusbar-h: 32px;
    --content-max: 1080px;

    /* ============================================================
       ТИПОГРАФИКА — iOS type scale (адаптивный)
       ============================================================ */

    /* шрифты */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial,
                 sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono",
                 Menlo, Consolas, "Liberation Mono", monospace;

    /* размеры — по умолчанию desktop, мобильный переопределит */
    --fs-2xs:  10px;   /* самый мелкий (метки) */
    --fs-xs:   11px;   /* caption2 */
    --fs-sm:   12px;   /* caption1 */
    --fs-base: 13px;   /* footnote */
    --fs-md:   15px;   /* subhead */
    --fs-lg:   17px;   /* body / headline */
    --fs-xl:   20px;   /* title3 */
    --fs-2xl:  22px;   /* title2 */
    --fs-3xl:  28px;   /* title1 */
    --fs-4xl:  34px;   /* largeTitle */

    /* line-height */
    --lh-tight:  1.15;   /* крупные заголовки */
    --lh-snug:   1.25;   /* title2/title3 */
    --lh-base:   1.45;   /* body / основной */
    --lh-loose:  1.6;    /* длинные тексты, лог */

    /* веса */
    --fw-regular: 400;
    --fw-med:     500;
    --fw-semi:    600;
    --fw-bold:    700;

    /* letter-spacing (iOS трекинг) */
    --ls-tight:   -.02em;    /* 28–34px */
    --ls-snug:    -.015em;   /* 20–22px */
    --ls-base:    -.01em;    /* 15–17px */
    --ls-loose:    .02em;    /* caption */
    --ls-caps:     .08em;    /* uppercase section */

    /* ============================================================
       ТАЙМИНГИ (iOS-кривая)
       ============================================================ */
    --t-fast: 150ms;
    --t-base: 220ms;
    --t-slow: 320ms;
    --ease:      cubic-bezier(.32, .72, 0, 1);
    --ease-out:  cubic-bezier(.16, 1, .3, 1);
}

/* ============================================================
   АДАПТИВНАЯ ТИПОГРАФИКА
   На мобильных — как в iOS (body 17px),
   на desktop — на 2px меньше (15px), чтобы не «кричало».
   ============================================================ */
@media (min-width: 900px) {
    :root {
        --fs-md:   14px;   /* subhead → 14 */
        --fs-lg:   15px;   /* body → 15 */
        --fs-xl:   18px;   /* title3 → 18 */
        --fs-2xl:  20px;   /* title2 → 20 */
        --fs-3xl:  26px;   /* title1 → 26 */
        --fs-4xl:  32px;   /* largeTitle → 32 */
    }
}