/* Main root */

:root {
  /* Layout */
  --app-max-width: 420px;

  /* Typography – family */
  --font-family-base: "Figtree", sans-serif;

  /* Typography – size scale */
  --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;

  /* Typography – weight */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Typography – line height */
  --line-height-base: 1.5;
  --line-height-tight: 1.2;

  /* Text colors */
  --color-text-primary: #000000;
  --color-text-secondary: #8e8e93;
  --color-text-disabled: #c7c7cc;
  --color-text-inverse: #ffffff;

  /* Surface colors */
  --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;

  /* State colors */
  --color-success: #4fb935;
  --color-warning: #f08a00;
  --color-warning-hover: #ff9f1a;
  --color-error: #d93025;

  /* Accent */
  --color-accent-primary: #ff2bff;
  --color-accent-primary-hover: #f000f0;

  /* Icon */
  --icon-color-default: #9b9b9b;
  --icon-color-hover: #5f5f5f;

  --icon-color-active: #8fd06a;
  --icon-color-active-hover: #4fb935;

  /* Shape */
  --radius-lg: 32px;
  --radius-pill: 999px;

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