/*
  DESIGN TOKENS — this is the file to edit to change the whole look of the site.
  Everything else (base.css, components.css) reads from these variables.
  Look: Luzen-inspired typography/spacing/shape, with the ORIGINAL CCVP brand colors (slate #53676C, coral #DB7F67).
*/

:root {
  /* --- Color --- */
  --color-bg: #ffffff;
  --color-bg-alt: #f7f7f7;
  --color-bg-dark: #21292B;

  --color-text: #666666;
  --color-text-muted: #666666;
  --color-text-on-dark: #D1E3DD;
  --color-text-on-dark-muted: #B2C0C4;

  --color-heading: #53676C;
  --color-text-strong: #333333;
  --color-primary: #53676C;
  --color-primary-dark: #53676C;
  --color-primary-light: #D1E3DD;

  --color-accent: #DB7F67;
  --color-accent-dark: #C46A52;

  --color-border: #E2E7E9;

  /* --- Type --- */
  --font-heading: "Nimbus Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Nimbus Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 2rem;
  --fs-3xl: 3rem;
  --fs-4xl: 4rem;
  --fs-5xl: 5.5rem;

  --lh-tight: 1.05;
  --lh-normal: 1.5;
  --lh-loose: 1.65;

  --tracking-wide: 0.14em;
  --tracking-heading: 0;
  --tracking-body: 0;

  --weight-heading: 400;

  /* --- Spacing (4px scale) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 7rem;
  --space-10: 10rem;

  /* --- Layout --- */
  --container-max: 1320px;
  --container-pad: var(--space-6);

  /* --- Shape --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 0px;

  /* --- Shadow --- */
  --shadow-sm: none;
  --shadow-md: 0 24px 60px rgba(14, 14, 14, 0.18);

  /* --- Motion --- */
  --transition-fast: 150ms ease;
  --transition-normal: 320ms ease;

  /* --- Overlay (for hero/background images) --- */
  --overlay-dark: rgba(33, 41, 43, 0.40);
  --overlay-dark-strong: rgba(33, 41, 43, 0.68);

  /* --- Floating nav (frosted glass) --- */
  --nav-glass-bg: rgba(33, 41, 43, 0.74);
  --nav-glass-blur: 20px;
}