/* ═══════════════════════════════════════════
   OCLINIC — Reset & Design Tokens
   ═══════════════════════════════════════════ */

:root {
  /* Palette */
  --bg-primary: #FAFAFA;
  --bg-dark: #0A1128;
  --text-primary: #1A1D24;
  --text-secondary: #4A5568;
  --text-on-dark: #F0F4F8;
  --accent: #D4AF37;
  --accent-dark: #AA8C2C;
  --green-clinic: #006466;
  --cream: #F5F5F5;

  /* Surfaces */
  --glass-light: rgba(255, 255, 255, 0.9);
  --glass-cream: rgba(250, 250, 250, 0.92);
  --glass-dark: rgba(10, 17, 40, 0.85);

  /* Borders & Shadows */
  --border-accent: rgba(184, 155, 114, 0.28);
  --border-light: rgba(184, 155, 114, 0.14);
  --shadow-sm: 0 2px 8px rgba(29, 26, 23, 0.04);
  --shadow-md: 0 4px 24px rgba(29, 26, 23, 0.07);
  --shadow-lg: 0 8px 48px rgba(29, 26, 23, 0.10);
  --shadow-card: 0 2px 16px rgba(29, 26, 23, 0.06);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', monospace;

  /* Sizes */
  --h1: clamp(2.4rem, 5vw, 4.2rem);
  --h2: clamp(1.8rem, 3.5vw, 3rem);
  --h3: clamp(1.3rem, 2.5vw, 1.8rem);
  --h4: clamp(1.1rem, 2vw, 1.35rem);
  --body: clamp(0.95rem, 1.2vw, 1.1rem);
  --small: clamp(0.78rem, 1vw, 0.88rem);
  --micro: clamp(0.68rem, 0.8vw, 0.76rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 8rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Transitions */
  --ease-out: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.35s;
  --duration-slow: 0.6s;

  /* Z-index layers */
  --z-bg: -1;
  --z-content: 1;
  --z-nav: 100;
  --z-toast: 200;
  --z-modal: 300;

  /* Scroll progress */
  --scroll-progress: 0;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.7;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

input, textarea, select {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
  outline: none;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }

em {
  font-style: italic;
  color: var(--accent);
}

::selection {
  background: rgba(184, 155, 114, 0.25);
  color: var(--text-primary);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}