/* variables.css — design tokens. All colors, fonts, spacing and shadows live here. */

:root {
  /* Surfaces */
  --color-bg: #050705;
  --color-bg-alt: #080B07;
  --color-surface: #0B100A;           /* cards, form card */
  --color-surface-2: #121A0C;         /* ghost buttons */
  --color-surface-highlight: #0E150A; /* the "Popular" plan card */

  /* Borders (1px unless noted) */
  --color-border: #1E2A16;            /* cards, rows inside cards */
  --color-border-input: #2C3A1E;      /* form fields */
  --color-border-strong: #3A4D22;     /* ghost buttons, round icons, form card */
  --color-border-accent: #5C7A1E;     /* "After" photo, card hover */
  --color-border-photo: #4E6A1C;      /* hero photo */
  --color-divider: #1A2412;           /* header, between sections, footer */

  /* Accent and text */
  --color-accent: #C8FF2E;
  --color-accent-hover: #E2FF8A;
  --color-on-accent: #0A0F03;
  --color-text: #EEF3E8;
  --color-text-soft: #C9D2BF;         /* menu links, labels, list items */
  --color-text-muted: #B4C0A8;        /* paragraphs */
  --color-text-dim: #9AA88E;          /* secondary labels */
  --color-white: #FFFFFF;
  --color-overlay: rgba(5, 7, 5, 0.9);

  /* Slider dots */
  --color-dot: #33452A;
  --color-dot-hover: #56742A;

  /* Glow and smoke */
  --glow: rgba(200, 255, 46, 0.55);
  --glow-soft: rgba(200, 255, 46, 0.18);
  --glow-card: rgba(200, 255, 46, 0.12);   /* card hover */
  --glow-flash: rgba(200, 255, 46, 0.38);  /* neon band sweeping over the slider photos */
  --smoke-1: rgba(120, 180, 20, 0.16);
  --smoke-2: rgba(90, 140, 10, 0.12);
  --smoke-3: rgba(120, 180, 20, 0.10);

  /* Fonts */
  --font-display: 'Exo 2', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Borders, radii and shadows */
  --border-width: 1px;
  --border-width-strong: 2px;         /* "Popular" plan card, focus rings */

  --radius-sm: 8px;                   /* form fields */
  --radius-md: 12px;                  /* photos, figure cards, gallery */
  --radius-card: 14px;                /* slider card, step cards */
  --radius-lg: 16px;                  /* plan cards, form card, hero and About photo */
  --radius-round: 50%;                /* social icons, arrows, contact icons */
  --radius-dot: 4px;                  /* slider dots: a pill (half of the 8px height) that stretches when active */

  --shadow-card-hover: 0 0 28px var(--glow-card);

  /* Layout */
  --container: 1200px;
  --gutter: 20px;
  --section-pad: 80px;
  --header-h: 64px;
  --z-header: 100;

  /* Motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}