/* ============================================================
   Ирлем-практик (IP APP) — токены цвета и типографики.
   Источник: Flutter-приложение ip-app, lib/core/theme/presentation/themes/.
   Шрифт — только Manrope, без исключений (цифры, цены, коды тоже).
   ============================================================ */

/* --- Fonts ------------------------------------------------- */
/* Brand Manrope ships as a single variable woff2 at fonts/Manrope1.woff2. */
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope1.woff2") format("woff2-variations"),
       url("fonts/Manrope1.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
    /* =========================================================
       COLOR — Brand
       ========================================================= */
    --ip-brand-green:        #19BE8D; /* primary CTA / links */
    --ip-brand-green-hover:  #14A97C;
    --ip-brand-green-active: #0F986F;
    --ip-brand-green-50:     #CCFFF0; /* lightest tint */
    --ip-brand-green-100:    #CAF7E9; /* soft chip/tag background */
    --ip-brand-green-200:    #D1ECE4; /* subtle divider */

    --ip-brand-violet:       #6C5BEC; /* logo diamond, accent gradient */
    --ip-brand-violet-50:    #E5E2F8;

    --ip-brand-pink:         #EA3B8B; /* logo diamond highlight */

    /* Brand gradient used on small accent chips / icons */
    --ip-brand-accent-gradient:
        linear-gradient(180deg, #6C5BEC 12%, #19BE8D 84%); /* @kind color */

    /* =========================================================
       COLOR — Neutral (from Figma usage counts)
       ========================================================= */
    --ip-ink:                #222126; /* primary text   (9883×) */
    --ip-ink-2:              #45454C; /* secondary text ( 619×) */
    --ip-ink-3:              #73707D; /* tertiary text  ( 100×) */
    --ip-ink-4:              #82828D; /* quaternary     ( 129×) */
    --ip-ink-5:              #8D8C90; /* subtle labels  (1005×) */

    --ip-muted:              #7A7A8B; /* body‑muted / links rest */
    --ip-muted-2:            #A1A0A7; /* borders, subtle stroke */
    --ip-muted-3:            #BCBCC9; /* field border, divider  */
    --ip-muted-4:            #B9B6C2; /* meta / tag text         */

    --ip-surface:            #FFFFFF; /* card / page background */
    --ip-surface-2:          #F6F6FA; /* app background         */
    --ip-surface-3:          #EEEEF4; /* card on app bg         */
    --ip-surface-4:          #EBECEE; /* hairline fills         */
    --ip-surface-5:          #E0E0E9; /* stronger fill          */

    /* =========================================================
       COLOR — Semantic
       ========================================================= */
    --ip-success:            var(--ip-brand-green);
    --ip-success-bg:         var(--ip-brand-green-100);
    --ip-warning:            #FF6E58; /* consultationOverdue */
    --ip-danger:             #FF3B30; /* dangerActionBg, ошибки полей */
    --ip-danger-text:        #C72A20; /* errorBannerText */
    --ip-danger-bg:          rgba(255,59,48,0.08); /* errorBannerBg */
    --ip-badge:              #E74C3C; /* badgeRed — счётчики */
    --ip-disabled:           #BCBCC9; /* submitDisabledBg */

    /* =========================================================
       COLOR — Semantic ROLES (use these in components)
       ========================================================= */
    --fg-1: var(--ip-ink);
    --fg-2: var(--ip-ink-2);
    --fg-3: var(--ip-muted);
    --fg-muted: var(--ip-ink-5);
    --fg-on-accent: #FFFFFF;

    --bg-page: var(--ip-surface);
    --bg-app:  var(--ip-surface-2);
    --bg-card: var(--ip-surface);
    --bg-soft: var(--ip-surface-3);

    --border-soft:   var(--ip-surface-4);
    --border-strong: var(--ip-muted-3);

    --accent:         var(--ip-brand-green);
    --accent-hover:   var(--ip-brand-green-hover);
    --accent-pressed: var(--ip-brand-green-active);

    /* =========================================================
       TYPOGRAPHY — Families
       ========================================================= */
    --font-sans:    "Manrope", sans-serif;
    --font-display: "Manrope", sans-serif; /* цифры и цены — тот же Manrope */

    /* =========================================================
       TYPOGRAPHY — Weights (Manrope)
       ========================================================= */
    --fw-light:      300; /* @kind font */
    --fw-regular:    400; /* @kind font */
    --fw-medium:     500; /* @kind font */
    --fw-semibold:   600; /* @kind font */
    --fw-bold:       700; /* @kind font */

    /* =========================================================
       TYPOGRAPHY — Sizes (theme_text_styles.dart: s10…s36)
       ========================================================= */
    --fs-display:    36px; /* s36w400 */
    --fs-h1:         24px; /* s24w700 */
    --fs-h2:         20px; /* s20w700 */
    --fs-body:       16px; /* s16w400/500/600/700 */
    --fs-body-sm:    14px; /* s14w400/500/700 */
    --fs-caption:    12px; /* s12w400/500/700 */
    --fs-micro:      10px; /* s10w400 */

    /* =========================================================
       RADII, SHADOWS, SPACING
       ========================================================= */
    --radius-xs:  4px;
    --radius-sm:  8px;
    --radius-md:  12px;  /* карточки, кнопки, поля — как в приложении */
    --radius-lg:  12px;
    --radius-xl:  20px;
    --radius-pill: 999px;

    --shadow-card:    0px 1px 16px -4px rgba(0,0,0,0.14); /* карточка профиля */
    --shadow-cta:     0px 6px 16px 0px rgba(25,190,141,0.25); /* ctaButtonShadow */
    --shadow-popover: 0px 8px 32px 0px rgba(0,0,0,0.12);
    --shadow-header:  0px 4px 24px 0px rgba(0,0,0,0.06);

    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Теги новостей (tag*Bg / tag*Fg) */
    --tag-health-bg:    #BDF7DC; --tag-health-fg:    #00472A;
    --tag-practice-bg:  #DFDFFF; --tag-practice-fg:  #392D7D;
    --tag-event-bg:     #FFD1CA; --tag-event-fg:     #8A0314;
    --tag-interview-bg: #F4E8BB; --tag-interview-fg: #573F00;
    --tag-report-bg:    #FFDFC0; --tag-report-fg:    #6E2D00;
}

/* Тёмная тема — dark/theme_colors.dart */
[data-theme="dark"] {
    --ip-ink: #FAF4EC; --ip-ink-2: #B7B7BD; --ip-muted: #B7B7BD; --ip-ink-5: #8D8C90;
    --ip-muted-3: #6E6E7A; --ip-muted-4: #6E6E7A;
    --ip-surface: #2C3042; --ip-surface-2: #22222A; --ip-surface-3: #3A3F55; --ip-surface-4: rgba(255,255,255,0.08);
    --ip-danger: #D63F36; --ip-danger-text: #FF6B61; --ip-danger-bg: rgba(255,59,48,0.16);
}

/* ============================================================
   SEMANTIC TYPE STYLES — apply directly to elements
   ============================================================ */
.ip-display { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-display); line-height: 1.1; color: var(--fg-1); }
.ip-h1 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: 1.2; color: var(--fg-1); }
.ip-h2 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: 1.3; color: var(--fg-1); }

.ip-p { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-body); line-height: 1.4; color: var(--fg-1); }

.ip-p-muted { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: 1.4; color: var(--fg-3); }

.ip-meta {
    font-family: var(--font-sans);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body-sm);
    line-height: 1.4;
    color: var(--ip-muted);
}

.ip-caption { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: var(--fs-caption); line-height: 1.3; color: var(--fg-muted); }

.ip-price { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: 1.2; color: var(--fg-1); font-variant-numeric: tabular-nums; }

.ip-price-prefix {
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: var(--fs-body-sm);
    color: var(--ip-muted-4);
}

.ip-link {
    color: var(--accent);
    text-decoration: none;
    transition: color .15s ease;
    cursor: pointer;
}
.ip-link:hover   { color: var(--accent-hover); }
.ip-link:active  { color: var(--accent-pressed); }

/* ============================================================
   Base reset-lite — include this on any design that opts in
   ============================================================ */
.ip-root {
    font-family: var(--font-sans);
    color: var(--fg-1);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================================
   Анимации и утилиты кита (из styles/app.css приложения)
   ============================================================ */
@keyframes ip-spin { to { transform: rotate(360deg); } }
@keyframes ip-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ip-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes ip-slide-up { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }

.ip-tappable { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, background .15s ease; }
.ip-tappable:active { transform: scale(0.98); }

/* Единственная гарнитура приложения — Manrope. */
html, body { font-family: "Manrope", system-ui, -apple-system, sans-serif; }

/* Оформление карточек дизайн-системы */
body.ds { margin: 0; padding: 24px; background: var(--bg-app); color: var(--fg-1); }
.ds-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.ds-col { display: flex; flex-direction: column; gap: 10px; }
.ds-lbl { width: 100%; margin-bottom: -6px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
          text-transform: uppercase; color: var(--fg-muted); }
.ds-note { font-size: 12.5px; color: var(--fg-muted); }