/* Ridgeline Pools brand fonts — identical import to the main site (Ridgeline global.css line 7) */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,400&family=Lora:ital,wght@0,400;0,500;1,400&family=Barlow:wght@300;400;500;600&display=swap');

:root {
  /* Colors */
  --color-bg:           #ffffff;
  --color-surface:      #f7f5f5;
  --color-surface-2:    #ede9e9;
  --color-border:       #ddd5d5;
  --color-border-light: #c9bcbc;

  --color-accent:       #8B0000;   /* Ridgeline --maroon */
  --color-accent-dim:   #6B0000;   /* Ridgeline --maroon-dk */
  --color-accent-glow:  rgba(139, 0, 0, 0.10);

  --color-text-primary:   #111111;
  --color-text-secondary: #444444;
  --color-text-muted:     #888888;

  --color-success:      #2e7d52;
  --color-success-bg:   rgba(46, 125, 82, 0.08);
  --color-warning:      #b35c00;
  --color-warning-bg:   rgba(179, 92, 0, 0.08);
  --color-error:        #c0392b;
  --color-error-bg:     rgba(192, 57, 43, 0.08);

  /* Typography — Ridgeline brand stack */
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;
  --font-serif:   'Lora', serif;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
  --shadow-accent: 0 0 24px rgba(128, 0, 0, 0.18);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Make the `hidden` attribute always win.
   Without this, rules like `.login-alert { display: flex }` override the
   browser default and force-show elements that should be hidden. */
[hidden] { display: none !important; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

a:hover {
  opacity: 0.8;
}

button {
  cursor: pointer;
  font-family: var(--font-body);
  border: none;
  outline: none;
}

input, textarea, select {
  font-family: var(--font-body);
  outline: none;
}

/* Utility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}