/* ============================================================
   РОДИТЕЛИ 2.0 — Design Tokens
   КОНЦЕПЦИЯ 08: «Earthy Organic — Земля и море»
   Природная палитра: шалфей, морская волна, глина, песок.
   Органичные blob-формы, рукотворное тепло, humanist типографика.
   ============================================================ */

/* --- Google Fonts: Inter (humanist sans) + Caveat (рукописный акцент) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Caveat:wght@500;600;700&display=swap');

:root {
  /* === Базовые цвета (системные, мало меняются) === */
  --color-primary:        #60755F;   /* primary → шалфей */
  --color-primary-light:  rgba(96, 117, 95, .18);
  --color-black:          #2D2A24;
  --color-dark:           #2D2A24;   /* тёплый землистый текст */
  --color-white:          #FFFFFF;
  --color-grey:           #DDD6C9;   /* песочно-серый разделитель */
  --color-blue:           #A3C6C4;
  --color-primary-red:    #BA7E6E;   /* primaryRed → глина */
  --color-pink:           #BA7E6E;
  --color-green-dark:     #4A5C49;   /* тёмный шалфей для активного таба */
  --color-dark-grey:      #6B655A;   /* тёплый вторичный текст */
  --color-lite-grey:      #EAE5DA;   /* песочный светлый */
  --color-yellow:         #D4A847;   /* охра */
  --color-orange:         #BA7E6E;
  --color-grey-icons:     #B0A89B;   /* песочно-серые иконки */
  --color-secondary-text: #6B655A;
  --color-light-grey:     #C5BCAB;   /* песочный */
  --color-checkbox:       #EAE5DA;

  /* Короткие семантические алиасы для прототипных экранов */
  --sage:      #60755F;
  --sage-dark: #4A5C49;
  --sea:       #A3C6C4;
  --sea-tint:  #DCEDEB;
  --sand:      #D4C6A6;
  --clay:      #BA7E6E;

  /* === ColorUtils кнопки === */
  --btn-green:   #60755F;   /* шалфей */
  --btn-green-d: #4A5C49;   /* тёмный шалфей */
  --btn-red:     #BA7E6E;   /* глина */
  --btn-gray:    #EAE5DA;
  --btn-white:   #FFFFFF;
  --btn-disabled:#DDD6C9;

  /* === Текст кнопок === */
  --btn-disabled-text: #B0A89B;

  /* === Поля ввода === */
  --field-bg:          #FFFFFF;
  --field-disabled-bg: #EAE5DA;
  --field-border:      #60755F;  /* enabledBorder — шалфей */
  --field-focus:       #BA7E6E;  /* focusedBorder — глина */
  --field-disabled-bd: #DDD6C9;

  /* === Типографика === */
  --font-base: 'Inter', 'Lato', system-ui, sans-serif;
  --font-hand: 'Caveat', 'Lato', cursive;   /* рукописный акцент */
  --fs-appbar:    27px;
  --fs-title:     18px;
  --fs-subtitle:  10px;
  --fs-medium:    16px;
  --fs-paragraph: 14px;
  --fs-body:      13px;
  --fs-button:    16px;

  /* === Геометрия: органичные, «живые» радиусы === */
  --radius-pill: 1000px;
  --radius-field: 100px;
  --radius-card: 32px;          /* крупный, но базовый — screen может переопределять асимметрией */
  --button-height: 64px;
  --safe-h: env(safe-area-inset-top, 0px);

  /* фон-замена: песочный градиент сверху вниз */
  --bg-common: linear-gradient(180deg, #F2EFE8 0%, #EFE9DF 50%, #EAE5DA 100%);
  --shadow-btn: 0 6px 20px rgba(96, 117, 95, .18);  /* тёплая зелёная тень кнопки */

  /* ============================================================
     СЕМАНТИЧЕСКИЕ ПЕРЕМЕННЫЕ — Earthy Organic
     ============================================================ */

  /* --- Header panel (home, child_detail): шалфей → тёмный шалфей --- */
  --hdr-grad-1: #60755F;
  --hdr-grad-2: #4A5C49;
  --hdr-text: #F2EFE8;
  --hdr-back-bg: rgba(242, 239, 232, .22);
  --hdr-row-bg: rgba(242, 239, 232, .14);

  /* --- Кольцо прогресса юзера: морская волна / песок --- */
  --ring-user-selected: #A3C6C4;
  --ring-user-unselected: #D4C6A6;

  /* --- Level-бейдж: глина / песок --- */
  --badge-bg: #BA7E6E;
  --badge-border: #F2EFE8;

  /* --- Бейдж уровня (большой круг справа): морская волна --- */
  --xp-grad-1: #A3C6C4;
  --xp-grad-2: #7FA9A7;
  --xp-text: #4A5C49;

  /* --- Feature-карточки --- */
  --feat-bg: #EAE5DA;
  --feat-border: #D4C6A6;
  --feat-title: #2D2A24;
  --feat-emergency-bg: #BA7E6E;          /* глина для экстренной */
  --feat-emergency-title: #F2EFE8;
  --feat-btn-bg: #F2EFE8;
  --feat-btn-text: #4A5C49;

  /* --- Карточки детей --- */
  --boy-grad-1: #60755F;   /* мальчик — шалфей */
  --boy-grad-2: #4A5C49;
  --girl-grad-1: #BA7E6E;  /* девочка — глина/розовая волна */
  --girl-grad-2: #A36A5C;
  --child-card-text: #F2EFE8;

  /* --- Кольцо прогресса ребёнка (birthday) --- */
  --ring-child-selected: #A3C6C4;
  --ring-child-unselected: rgba(242, 239, 232, .35);

  /* --- Тени: тёплые, мягкие --- */
  --shadow-card: 0 6px 20px rgba(45, 42, 36, .08);
  --shadow-task: 0 3px 10px rgba(45, 42, 36, .06);

  /* --- Экран входа: bubble-логотип — песочный/мятный --- */
  --bubble-grad-1: #E5DED0;
  --bubble-grad-2: #F2EFE8;

  /* --- Child detail: avatar-эмодзи + прогресс-бар --- */
  --avatar-emoji-bg: #E5C9B8;   /* тёплый песочно-глиняный */
  --progress-bar-fill: #BA7E6E; /* глина */

  /* --- Кнопка «Войти с Apple»: тёмная земля --- */
  --btn-apple-bg: #2D2A24;
  --btn-apple-text: #F2EFE8;

  /* --- Фон экрана (body wrapper): песочный --- */
  --screen-bg: #F2EFE8;
}

/* ============================================================
   Phone-frame shell
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }

html, body {
  font-family: var(--font-base);
  color: var(--color-dark-grey);
  background: #2a2823;            /* фон страницы вокруг телефона — тёплый тёмный */
  font-size: var(--fs-body);
  line-height: 1.4;
}

/* Страница-обёртка центрирует телефон */
.stage {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 0;
  gap: 32px;
  flex-wrap: wrap;
}

/* Телефон-фрейм */
.phone {
  position: relative;
  width: 390px;
  height: 844px;
  background: #1c1a16;
  border-radius: 48px;
  padding: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
  overflow: hidden;
  flex: 0 0 auto;
}
.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
  background: var(--bg-common);
  display: flex;
  flex-direction: column;
}
/* Чёлка / dynamic island */
.phone__island {
  position: absolute;
  top: 22px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 32px;
  background: #000; border-radius: 20px;
  z-index: 50;
}

/* Хедер прототипа */
.proto-head {
  width: 100%;
  text-align: center;
  color: #b8ad9c;
  font-family: var(--font-base);
  padding: 8px 0 20px;
}
.proto-head h1 { font-size: 22px; font-weight: 700; color: #e8e0d2; }
.proto-head p { font-size: 13px; margin-top: 4px; }
.proto-head .src { font-size: 11px; color: #8a7f6e; margin-top: 6px; font-family: monospace; }

/* На настоящем телефоне (узкий экран) и в установленном PWA — убираем имитацию
   рамки телефона, контент занимает весь экран под настоящим статус-баром ОС.
   Мокап телефона с чёлкой остаётся только при просмотре на десктопе. */
@media (max-width: 520px), (display-mode: standalone) {
  .stage { min-height: 100vh; padding: 0; gap: 0; }
  .proto-head { display: none; }
  .phone {
    width: 100%;
    max-width: none;
    height: 100vh;
    min-height: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    background: none;
  }
  .phone__screen { border-radius: 0; }
  .phone__island { display: none; }
  .statusbar { display: none; }
}

/* ============================================================
   Компоненты
   ============================================================ */

/* --- Кнопки (CommonButton) --- */
.btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  height: var(--button-height);
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-base);
  font-size: var(--fs-button);
  font-weight: 700;
  color: var(--color-white);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform .08s ease;
}
.btn:active { transform: scale(.985); }
.btn--red    { background: var(--btn-red); }
.btn--green  { background: var(--btn-green); }
.btn--gray   { background: var(--btn-gray); color: var(--btn-disabled-text); box-shadow: none; }
.btn--white  { background: var(--btn-white); color: var(--color-dark); }
.btn[disabled] { background: var(--btn-disabled); color: var(--btn-disabled-text); box-shadow: none; cursor: default; }

/* --- Текстовые поля --- */
.field {
  display: flex; align-items: center;
  width: 100%;
  background: var(--field-bg);
  border: 2px solid var(--field-border);
  border-radius: var(--radius-field);
  padding: 20px 14px;
  gap: 8px;
  font-family: var(--font-base);
}
.field:focus-within { border-color: var(--field-focus); }
.field__icon { width: 22px; height: 22px; flex: 0 0 auto; opacity: .85; }
.field input {
  border: none; outline: none; background: transparent;
  flex: 1; font-family: var(--font-base); font-size: var(--fs-medium);
  color: var(--color-dark); min-width: 0;
}
.field input::placeholder { color: #B0A89B; font-size: var(--fs-medium); }

/* --- Разделитель "Или" --- */
.and-divider { display: flex; align-items: center; gap: 10px; color: var(--color-green-dark); font-size: 14px; font-weight: 600; }
.and-divider__line { flex: 1; height: 1px; background: var(--color-green-dark); }

/* --- Пузырь-хедер с логотипом --- */
.bubble-header {
  width: 100%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 0%, var(--bubble-grad-1) 0%, var(--bubble-grad-2) 55%, transparent 100%);
  padding: 0 20px;
}
.bubble-header__logo {
  font-family: var(--font-base);
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--color-green-dark);
  text-align: center;
  line-height: 1.1;
}
.bubble-header__logo small { display: block; font-size: 11px; font-weight: 600; color: var(--color-dark-grey); letter-spacing: 1px; }

/* --- Текстовые стили --- */
.t-appbar    { font-size: var(--fs-appbar); font-weight: 600; color: var(--color-white); }
.t-title     { font-size: var(--fs-title); font-weight: 500; color: var(--color-dark-grey); }
.t-subtitle  { font-size: var(--fs-subtitle); font-weight: 600; color: var(--color-dark-grey); }
.t-medium    { font-size: var(--fs-medium); font-weight: 400; color: var(--color-dark-grey); }
.t-paragraph { font-size: var(--fs-paragraph); font-weight: 400; color: var(--color-dark-grey); }
.t-body      { font-size: var(--fs-body); font-weight: 500; color: var(--color-dark-grey); }
.t-body-bold { font-size: var(--fs-body); font-weight: 600; color: var(--color-dark); }

/* --- Рукописный акцент (Earthy Organic signature) --- */
.handwritten {
  font-family: var(--font-hand);
  color: var(--color-primary);
}

/* --- Link-style text button --- */
.text-link { background: none; border: none; font-family: var(--font-base); font-size: 13px; color: var(--color-dark); cursor: pointer; padding: 4px; }
.text-link--right { align-self: flex-end; }

/* --- Утилиты --- */
.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.scroll::-webkit-scrollbar { width: 0; }
.spacer { flex: 1; }
.center { display: flex; align-items: center; justify-content: center; }