/* -------------------------------------------------------- */
/* 🔹 App Theme                                             */
/* -------------------------------------------------------- */
/* Spacing, radius, shadows, dividers and layout             */
/* Mirrors app_theme.dart                                    */


/* -------------------------------------------------------- */
/* 🔹 Radius                                                */
/* -------------------------------------------------------- */

:root {
  --radius: 12px;
  --radius-small: 6px;
  --radius-medium: 8px;
}


/* -------------------------------------------------------- */
/* 🔹 Disabled / faded state opacity                        */
/* -------------------------------------------------------- */

:root {
  --opacity-disabled: 0.5;
  --opacity-disabled-strong: 0.4;
  --opacity-disabled-light: 0.7;
  --opacity-processing: 0.6;
}


/* -------------------------------------------------------- */
/* 🔹 Shadows                                               */
/* -------------------------------------------------------- */

:root {
  --shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}


/* -------------------------------------------------------- */
/* 🔹 Spacing                                               */
/* -------------------------------------------------------- */

:root {
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 12px;
  --space-l: 16px;
  --space-llxl: 18px;
  --space-lxl: 20px;
  --space-xl: 24px;
  --space-xxl: 28px;
  --space-xxxl: 32px;
  --space-xxxxl: 36px;
}


/* -------------------------------------------------------- */
/* 🔹 Semantic Spacing                                      */
/* -------------------------------------------------------- */

:root {
  /* Between components */
  --spacing-between-cards: var(--space-l);
  --spacing-between-sections: var(--space-xl);
  --spacing-between-faq-sections: var(--space-xxxxl);

  /* After/before specific components */
  --spacing-after-divider: var(--space-l);
  --spacing-after-section-header: var(--space-l);
  --spacing-before-section-header: var(--space-xxxl);

  /* Settings screens — title (8) → inputs (12) → items (16) → sections (28) */
  --spacing-between-setting-sections: var(--space-xxl);
  --spacing-between-setting-items: var(--space-l);
  --spacing-between-setting-inputs: var(--space-m);
  --spacing-after-settings-title: var(--space-s);
}


/* -------------------------------------------------------- */
/* 🔹 Padding                                               */
/* -------------------------------------------------------- */

:root {
  --card-padding: var(--space-l);
  --content-padding: var(--space-l);
  --input-padding: var(--space-xs) var(--space-s);
  --settings-row-padding: 0 var(--space-m);
}


/* -------------------------------------------------------- */
/* 🔹 Divider                                               */
/* -------------------------------------------------------- */

.divider {
  border: none;
  height: 0.5px;
  background-color: var(--color-divider);
}


/* -------------------------------------------------------- */
/* 🔹 Content Constraints                                   */
/* -------------------------------------------------------- */

:root {
  --max-content-width: 1280px;
  --max-content-width-narrow: 720px;
}

@media (min-width: 768px) {
  :root {
    --max-content-width: min(1280px, calc(100vw - 80px));
  }
}


/* -------------------------------------------------------- */
/* 🔹 Website Spacing                                       */
/* -------------------------------------------------------- */
/* Website-specific — not in app_theme.dart                 */

:root {
  --website-section-spacing: 64px;
}


/* -------------------------------------------------------- */
/* 🔹 Website Colors                                        */
/* -------------------------------------------------------- */
/* Website-specific — not in app_theme.dart                 */
/* Dark hero — deep navy, matches the marketing images       */

:root {
  --color-hero-bg: #0C4A6E;
  --color-on-hero: #FCFCFB;
  --color-on-hero-variant: rgba(252, 252, 251, 0.72);
}