@import url("https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500&family=Hanken+Grotesk:wght@400;500;600&display=swap");

/* Oceanside Dental brand layer — overrides the Classical tokens.
   Type note: Gravesend Sans (display) and Brandon Grotesque (body) are the real
   brand faces; they need paid web licenses. Jost and Hanken Grotesk stand in
   until the woff2 files arrive. To swap: add @font-face blocks below and change
   --font-heading / --font-body. Nothing else needs to move. */

:root {
  /* Brand palette */
  --brand-deep:   #3d434f;  /* Deep Sea      */
  --brand-harbor: #6a7787;  /* Harbor Blue   */
  --brand-mist:   #bbc2c7;  /* Sea Mist      */
  --brand-shell:  #f0ede9;  /* Shell White   */
  --brand-sage:   #8a8b7b;  /* Driftwood Sage */
  --brand-gold:   #d1a361;  /* Coastal Gold  */

  --color-bg: var(--brand-shell);
  --color-surface: #fbfaf8;
  --color-text: #2b303a; /* Deep Sea, one step darker: the pages mute body copy with color-mix(--color-text N%), so the base has to sit above AA on Shell White */
  --color-accent: var(--brand-gold);
  --color-accent-2: var(--brand-gold);
  --color-divider: color-mix(in srgb, var(--brand-sage) 55%, transparent); /* Driftwood Sage hairlines: section rules, dividers, photo mat outlines */
  --brand-sage-text: #6b6c5f; /* sage for small secondary text; >= 4.5:1 on Shell White */

  --color-neutral-100: #f7f5f2;
  --color-neutral-200: #e9e6e1;
  --color-neutral-300: #d7dadd;
  --color-neutral-400: #bbc2c7;
  --color-neutral-500: #97a0a9;
  --color-neutral-600: #6a7787;
  --color-neutral-700: #525e6c;
  --color-neutral-800: #3d434f;
  --color-neutral-900: #2a2f38;

  --color-accent-100: #f8f0e5;
  --color-accent-200: #efdec4;
  --color-accent-300: #e4c79e;
  --color-accent-400: #dab47e;
  --color-accent-500: #d1a361;
  --color-accent-600: #b8873f;
  --color-accent-700: #7a5322; /* text-size gold on Shell White (>= 5:1); Coastal Gold itself is ~1.9:1 there */
  --color-accent-800: #5c3d17;
  --color-accent-900: #4a3215;

  --color-accent-2-100: #f8f0e5;
  --color-accent-2-200: #efdec4;
  --color-accent-2-300: #e4c79e;
  --color-accent-2-400: #dab47e;
  --color-accent-2-500: #d1a361;
  --color-accent-2-600: #b8873f;
  --color-accent-2-700: #7a5322;
  --color-accent-2-800: #5c3d17;
  --color-accent-2-900: #4a3215;

  --font-heading: "Jost", system-ui, sans-serif;
  --font-heading-weight: 300;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2a2f38 12%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2a2f38 14%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2a2f38 20%, transparent);
}

/* Display headings: all caps, letterspaced, light — per the brand book.
   H3 and smaller stay sentence case in the body face. */
h1, h2 {
  text-transform: uppercase;
  font-weight: 300;
  word-spacing: .04em;
}

/* Phones: collapse the utility bar to address + phone, stack the header
   (wordmark, links, full-width button) and ease hero type. !important is
   needed because the pages style layout inline. */
@media (max-width: 640px) {
  .util { gap: 10px 18px !important; justify-content: space-between; }
  .util .util-hours, .util .util-link { display: none !important; }
  .util > span:last-child { margin-left: 0 !important; }
  .mainnav { gap: 12px 22px !important; padding-top: 16px !important; padding-bottom: 14px !important; }
  .mainnav .brand { width: 100%; margin-right: 0 !important; margin-bottom: 2px; }
  .mainnav .brand > span:first-child { font-size: 16px !important; }
  .mainnav .btn { width: 100%; justify-content: center; margin-top: 2px; }
  h1 { letter-spacing: .04em !important; }
}
@media (max-width: 400px) {
  .mainnav .brand > span:last-child { display: none; }
}