:root {
  /* --------------------------------------
     Layout
     -------------------------------------- */
  --layout-page-max: 1120px;              /* max width for content */
  --layout-page-padding-x: 1.5rem;        /* side padding on mobile/desktop */

  /* --------------------------------------
     Spacing (8px-based, semantic)
     -------------------------------------- */
  /* All built on an 8px grid: 8,16,24,32,48,64 */
  --space-none: 0;
  --space-tight: 0.5rem;                  /* 8px  - small gaps, labels */
  --space-cozy: 1rem;                     /* 16px - default inner padding */
  --space-comfy: 1.5rem;                  /* 24px - card padding, between blocks */
  --space-roomy: 2rem;                    /* 32px - gaps between big elements */
  --space-section: 3rem;                  /* 48px - section padding on mobile */
  --space-section-lg: 4rem;               /* 64px - section padding on desktop */

  /* --------------------------------------
     Gaps (for flex & grid)
     -------------------------------------- */
  --gap-tight: var(--space-cozy);         /* 16px - compact grids */
  --gap-comfy: var(--space-comfy);        /* 24px - default */
  --gap-roomy: var(--space-roomy);        /* 32px - hero / large sections */

  /* --------------------------------------
     Radius (soft, friendly)
     -------------------------------------- */
  --radius-subtle: 0.25rem;               /* 4px  - inputs, tiny chips */
  --radius-soft: 0.5rem;                  /* 8px  - buttons */
  --radius-card: 1rem;                    /* 16px - cards, panels */
  --radius-pill: 999px;                   /* full pill / circles */

  /* --------------------------------------
     Typography scale (semantic + 8px-ish)
     -------------------------------------- */
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;

  --text-xs: 0.875rem;                    /* 14px - helper text, labels */
  --text-sm: 1rem;                        /* 16px - body text */
  --text-md: 1.125rem;                    /* 18px - emphasized body / big buttons */
  --text-lg: 1.5rem;                      /* 24px - section headings mobile */
  --text-xl: 2rem;                        /* 32px - hero headline mobile */
  --text-hero: 2.5rem;                    /* 40px - hero headline desktop */

  --line-tight: 1.2;
  --line-normal: 1.5;
  --line-relaxed: 1.7;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* --------------------------------------
     Interactive sizes (thumb-friendly)
     -------------------------------------- */
  --tap-target-min: 3rem;                 /* 48px - recommended min tap height */

  --button-padding-y: 0.75rem;            /* ~12px top/bottom */
  --button-padding-x: 1.25rem;            /* ~20px sides */
  --button-radius: var(--radius-soft);
  --button-font-size: var(--text-md);

  --field-padding-y: 0.75rem;
  --field-padding-x: 0.75rem;
  --field-radius: var(--radius-soft);
  --field-font-size: var(--text-sm);

  /* --------------------------------------
     Color tokens (semantic, theme-able)
     These are what you'll override per niche.
     -------------------------------------- */
  --color-page-bg: #f7fafb;               /* airy white */               /* overall page background */
  --color-section-bg: #ffffff;            /* clean white */            /* default section bg */
  --color-surface: #ffffff;               /* cards, panels */
  --color-surface-muted: #f1f5f7;         /* subtle cool tint */         /* subtle blocks/stripes */

  --color-border-subtle: #d7e0e3;       /* cool gray border */
  --color-border-strong: #b9c7cd;       /* stronger cool border */

  --color-text-main: #2e3a42;          /* charcoal slate */
  --color-text-muted: #64707a;         /* muted slate */
  --color-text-on-accent: #f9fafb;

  --color-accent-main: #62a8aa;           /* Real Clean teal */           /* primary brand color */
  --color-accent-soft: #dff1f1;           /* light teal tint */           /* light background tint */
  --color-accent-strong: #3e8f92;         /* deeper teal */         /* darker hover/contrast */

  --color-danger: #b91c1c;
  --color-success: #15803d;

  /* Hero / highlight backgrounds (subtle) */
  --hero-bg-soft: radial-gradient(
    circle at 15% 10%,
    rgba(98, 168, 170, 0.18),
    transparent 60%
  );
  --section-accent-bg: #2e3a42;           /* charcoal CTA strip */           /* e.g. CTA strip background */

  /* --------------------------------------
     Shadows (subtle)
     -------------------------------------- */
  --shadow-soft: 0 10px 30px rgba(46, 58, 66, 0.10);
  --shadow-card: 0 6px 18px rgba(46, 58, 66, 0.08);
  --shadow-focus: 0 0 0 3px rgba(98, 168, 170, 0.35);
}