/* simplecredit — design tokens: colour. Decided 2026-09-26, see 00doc/app_info/design/colors.md.
   Layer 1: palette (--c-*). Layer 2: component roles. Components read layer 2 only,
   so the palette can be re-tuned in one place. */

:root {
  /* paper and ink */
  --c-bg:      #FFFFFF;
  --c-bg-2:    #F7F7F4;
  --c-line:    #E6E6E1;
  --c-line-2:  #CFCFC8;
  --c-text:    #151515;
  --c-text-2:  #5F5F59;
  --c-text-3:  #8B8B85;

  /* brand — azure: action, links, selection, "yours" */
  --c-brand:        #1F6FEB;
  --c-brand-hover:  #1A5FD0;
  --c-brand-active: #164FAE;
  --c-on-brand:     #FFFFFF;
  --c-brand-text:   #1A5BC4;
  --c-brand-soft:   #E8F0FE;
  --c-brand-deep:   #0F3C8A;

  /* promo — amber: deals and savings (акція, 0 % на перший) */
  --c-promo:      #F7B928;
  --c-on-promo:   #3D2800;
  --c-promo-text: #8A5300;
  --c-promo-soft: #FEF3D6;
  --c-promo-deep: #5C3A00;

  /* extra — coral: "worth a look" marks only. Never a button, never white text on it. */
  --c-extra:      #FF6B5B;
  --c-extra-text: #C8412F;
  --c-extra-soft: #FFECE9;
  --c-extra-deep: #7F2418;

  /* system states — not brand colours */
  --c-ok:          #1B7A3E;
  --c-ok-soft:     #E7F3EA;
  --c-danger:      #B3261E;
  --c-danger-soft: #FBE9E7;
}

:root {
  /* surfaces and text */
  --page-bg:    var(--c-bg);
  --panel-bg:   var(--c-bg-2);
  --card-bg:    var(--c-bg);
  --card-line:  var(--c-line);
  --field-line: var(--c-line-2);
  --fg:   var(--c-text);
  --fg-2: var(--c-text-2);
  --fg-3: var(--c-text-3);

  /* the one button */
  --btn-bg:        var(--c-brand);
  --btn-bg-hover:  var(--c-brand-hover);
  --btn-bg-active: var(--c-brand-active);
  --btn-fg:        var(--c-on-brand);

  /* links and focus */
  --link:       var(--c-brand-text);
  --link-hover: var(--c-brand-deep);
  --focus-ring: rgba(31, 111, 235, 0.35);

  /* amount chips, selected state */
  --chip-on-bg:   var(--c-brand-soft);
  --chip-on-fg:   var(--c-brand-deep);
  --chip-on-line: var(--c-brand);

  /* marks on offer cards */
  --mark-promo-bg:   var(--c-promo);       /* «Акція до 30.09» — the only filled mark */
  --mark-promo-fg:   var(--c-on-promo);
  --mark-benefit-bg: var(--c-promo-soft);  /* «0 % на перший» */
  --mark-benefit-fg: var(--c-promo-deep);
  --mark-mine-bg:    var(--c-brand-soft);  /* «Ваша МФО» */
  --mark-mine-fg:    var(--c-brand-deep);
  --mark-extra-bg:   var(--c-extra-soft);  /* «Популярне», «за 15 хвилин» */
  --mark-extra-fg:   var(--c-extra-deep);

  /* icon in a tinted circle (feature tiles) */
  --tile-brand-bg: var(--c-brand-soft);  --tile-brand-fg: var(--c-brand-text);
  --tile-promo-bg: var(--c-promo-soft);  --tile-promo-fg: var(--c-promo-deep);
  --tile-extra-bg: var(--c-extra-soft);  --tile-extra-fg: var(--c-extra-deep);

  /* band — full-width tinted section, used «по ситуації» (27.09) */
  --band-bg:      var(--c-brand-soft);
  --band-warm-bg: var(--c-promo-soft);
  --band-grey-bg: var(--c-bg-2);
  --header-line:  var(--c-brand);

  /* NBU blocks: ink only, no colour */
  --nbu-fg:   var(--c-text-2);
  --nbu-line: var(--c-text);
}

/* ---- type. Same system stack as the apanel (public/apanel/css/ap_base.css), see 00doc/app_info/design/typography.md ---- */
:root {
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, Consolas, monospace;

  /* two weights only: Segoe UI has no 500, it silently renders as 400 */
  --w-regular: 400;
  --w-bold:    600;

  /* scale: size / line-height, mobile first */
  --fs-display: 28px; --lh-display: 34px;  /* hero H1 */
  --fs-h2:      22px; --lh-h2:      28px;  /* section title */
  --fs-h3:      18px; --lh-h3:      24px;  /* card title, key amount */
  --fs-body:    16px; --lh-body:    24px;
  --fs-small:   14px; --lh-small:   20px;  /* labels, NBU conditions, link rows, warning */
  --fs-caption: 13px; --lh-caption: 18px;  /* marks, disclaimer, meta — nothing smaller */

  /* controls */
  --fs-btn:  16px; --lh-btn:  24px;
  --fs-chip: 15px; --lh-chip: 20px;

  --tracking-display: -0.01em;             /* display and wordmark only */
  --nums: tabular-nums;                    /* every amount, rate and date column */
}
@media (min-width: 768px) {
  :root {
    --fs-display: 36px; --lh-display: 44px;
    --fs-h2:      26px; --lh-h2:      32px;
  }
}