/* Root */

:root {
  --app-max-width: 420px;

  --font-family-base: "Figtree", sans-serif;

  --font-size-xs: 0.85rem;
  --font-size-sm: 0.95rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: 1.4rem;
  --font-size-xxl: 2.4rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-base: 1.5;
  --line-height-tight: 1.2;

  --color-text-primary: #000000;
  --color-text-secondary: #8e8e93;
  --color-text-disabled: #c7c7cc;
  --color-text-inverse: #ffffff;

  --color-surface-base: #ffffff;
  --color-surface-neutral: #f2f2f5;
  --color-surface-pressed: rgba(0, 0, 0, 0.04);
  --color-brand-surface: #a1e47d;
  --color-brand-surface-hover: #8fd06a;

  --color-divider-soft: #c7c7cc80;

  --color-success: #4fb935;
  --color-warning: #f08a00;
  --color-warning-hover: #ff9f1a;
  --color-error: #d93025;

  --color-accent-primary: #ff2bff;
  --color-accent-primary-hover: #f000f0;

  --icon-color-default: #9b9b9b;
  --icon-color-hover: #5f5f5f;
  --icon-color-active: #8fd06a;
  --icon-color-active-hover: #4fb935;

  --radius-lg: 32px;
  --radius-pill: 999px;

  --shadow-soft: 0 4px 18px rgba(0, 0, 0, 0.18);
  --shadow-strong: 0 10px 40px rgba(0, 0, 0, 0.25);
}