/* ================================================================
   NEO OSTEO BRAND KIT
   Shared color, typography, shape, and elevation foundations.
   Page layout and section composition live in styles.css.
   ================================================================ */

:root {
  /* Brand palette */
  --brand-orange-500: #d86a1f;
  --brand-orange-700: #a84719;
  --brand-orange-rgb: 216, 106, 31;
  --brand-orange-contrast-dark: #ffb45e;
  --brand-red-500: #c62a2f;
  --brand-burgundy-600: #6f1f2b;
  --brand-burgundy-800: #4a1620;
  --brand-green-500: #3f8c63;
  --brand-green-300: #6fbd8b;

  /* Neutral palette */
  --neutral-0: #ffffff;
  --neutral-50: #f5f5f6;
  --neutral-100: #e9eaec;
  --neutral-700: #54565f;
  --neutral-800: #33343a;
  --neutral-900: #211f22;
  --neutral-950: #171719;

  /* Typography families */
  --font-heading: "Lora", Georgia, serif;
  --font-body: "Inter", Arial, sans-serif;

  /* Typography scale */
  --type-display-size: clamp(2.6rem, 5.2vw, 4.4rem);
  --type-display-line: 1.08;
  --type-section-size: clamp(1.9rem, 3.4vw, 2.7rem);
  --type-section-line: 1.15;
  --type-card-size: 1.16rem;
  --type-card-line: 1.3;
  --type-supporting-size: 1.45rem;
  --type-supporting-line: 1.3;
  --type-lead-size: 1.06rem;
  --type-lead-line: 1.7;
  --type-body-size: 1rem;
  --type-body-line: 1.75;
  --type-small-size: 0.9rem;
  --type-small-line: 1.6;
  --type-caption-size: 0.78rem;
  --type-caption-line: 1.5;
  --type-label-size: 0.78rem;
  --type-label-line: 1.3;
  --type-quote-size: 1.05rem;
  --type-quote-line: 1.7;

  /* Shape system */
  --radius-control: 12px;
  --radius-icon-tile: 14px;
  --radius-card: 18px;
  --radius-card-large: 24px;
  --radius-media: 28px;
  --radius-section: 32px;
  --radius-pill: 999px;
  --size-icon-tile: 46px;

  /* Spacing scale */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;

  /* Responsive layout rhythm */
  --layout-content-max: 73.75rem;
  --layout-gutter: clamp(1.25rem, 3vw, 2rem);
  --layout-section-block: clamp(5rem, 8vw, 8.125rem);
  --layout-page-start: clamp(8rem, 12vw, 10rem);
  --layout-page-end: clamp(5rem, 9vw, 7.5rem);
  --layout-grid-gap: clamp(2rem, 5vw, 4.5rem);
  --layout-cluster-gap: clamp(1.5rem, 3vw, 2.5rem);
  --layout-heading-gap: clamp(2.5rem, 5vw, 4rem);
  --layout-card-padding: clamp(1.5rem, 3vw, 2.25rem);
  --layout-panel-padding: clamp(1.75rem, 5vw, 4.375rem);

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --section-transition-size: clamp(48px, 5vw, 64px);

  /* Light-mode semantic colors */
  --color-text: var(--neutral-900);
  --color-text-strong: var(--neutral-800);
  --color-text-muted: var(--neutral-700);
  --color-bg-page: var(--neutral-50);
  --color-bg-section: var(--neutral-100);
  --color-bg-surface: var(--neutral-0);
  --section-hero-bg: #ffffff;
  --section-about-bg: #e7e8ea;
  --section-indications-bg: #ffffff;
  --section-process-bg: #e7e8ea;
  --section-faq-bg: #ffffff;
  --section-contact-bg: #e7e8ea;
  --section-footer-bg: #ffffff;
  --color-accent: var(--brand-orange-500);
  --color-accent-text: var(--brand-orange-700);
  --color-accent-soft: rgba(216, 106, 31, .09);
  --color-accent-border: rgba(216, 106, 31, .22);
  --color-location-dot: var(--brand-green-500);
  --color-location-dot-ring: rgba(63, 140, 99, .16);
  --color-line: rgba(51, 52, 58, .12);
  --color-header: rgba(245, 245, 246, .9);
  --shadow-card: 0 20px 60px -20px rgba(74, 22, 32, .25);
  --shadow-icon-tile: 0 10px 24px -10px rgba(198, 42, 47, .55);
  --gradient-brand: linear-gradient(135deg, var(--brand-orange-500), var(--brand-red-500));
  --gradient-action: linear-gradient(120deg, var(--brand-orange-700), var(--brand-red-500) 60%, var(--brand-burgundy-600));

  /* Contact panel */
  --contact-bg-start: var(--neutral-800);
  --contact-bg-end: var(--brand-burgundy-800);
  --contact-border: transparent;
  --contact-shadow: none;
  --contact-form-bg: rgba(255, 255, 255, .06);
  --contact-form-border: rgba(255, 255, 255, .14);
  --contact-field-bg: rgba(255, 255, 255, .06);
  --contact-field-border: rgba(255, 255, 255, .18);
  --contact-field-focus-bg: rgba(255, 255, 255, .1);

  /* Compatibility aliases used by page composition */
  --charcoal: var(--color-text-strong);
  --charcoal-soft: var(--color-text-muted);
  --orange: var(--color-accent);
  --red: var(--brand-red-500);
  --maroon: var(--brand-burgundy-600);
  --cream: var(--color-bg-page);
  --cream-2: var(--color-bg-section);
  --white: var(--color-bg-surface);
  --ink: var(--color-text);
  --accent-text: var(--color-accent-text);
  --line: var(--color-line);
  --header-bg: var(--color-header);
  --shadow: var(--shadow-card);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --color-text: #f7f3ef;
  --color-text-strong: #f4f0ec;
  --color-text-muted: #c8c2bd;
  --color-bg-page: var(--neutral-950);
  --color-bg-section: #202024;
  --color-bg-surface: #29292f;
  --section-hero-bg: #171719;
  --section-about-bg: #25262b;
  --section-indications-bg: #171719;
  --section-process-bg: #25262b;
  --section-faq-bg: #171719;
  --section-contact-bg: #25262b;
  --section-footer-bg: #171719;
  --color-accent-text: var(--brand-orange-contrast-dark);
  --color-accent-soft: rgba(255, 180, 94, .1);
  --color-accent-border: rgba(255, 180, 94, .24);
  --color-location-dot: var(--brand-green-300);
  --color-location-dot-ring: rgba(111, 189, 139, .18);
  --color-line: rgba(255, 255, 255, .14);
  --color-header: rgba(23, 23, 25, .9);
  --shadow-card: 0 20px 60px -20px rgba(0, 0, 0, .6);
  --contact-bg-start: #211f22;
  --contact-bg-end: var(--brand-burgundy-800);
  --contact-border: rgba(255, 180, 94, .24);
  --contact-shadow: 0 30px 80px -42px rgba(0, 0, 0, .9);
  --contact-form-bg: rgba(10, 10, 12, .28);
  --contact-form-border: rgba(255, 180, 94, .24);
  --contact-field-bg: rgba(255, 255, 255, .07);
  --contact-field-border: rgba(255, 180, 94, .24);
  --contact-field-focus-bg: rgba(255, 255, 255, .11);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-text: #f7f3ef;
    --color-text-strong: #f4f0ec;
    --color-text-muted: #c8c2bd;
    --color-bg-page: var(--neutral-950);
    --color-bg-section: #202024;
    --color-bg-surface: #29292f;
    --section-hero-bg: #171719;
    --section-about-bg: #25262b;
    --section-indications-bg: #171719;
    --section-process-bg: #25262b;
    --section-faq-bg: #171719;
    --section-contact-bg: #25262b;
    --section-footer-bg: #171719;
    --color-accent-text: var(--brand-orange-contrast-dark);
    --color-accent-soft: rgba(255, 180, 94, .1);
    --color-accent-border: rgba(255, 180, 94, .24);
    --color-location-dot: var(--brand-green-300);
    --color-location-dot-ring: rgba(111, 189, 139, .18);
    --color-line: rgba(255, 255, 255, .14);
    --color-header: rgba(23, 23, 25, .9);
    --shadow-card: 0 20px 60px -20px rgba(0, 0, 0, .6);
    --contact-bg-start: #211f22;
    --contact-bg-end: var(--brand-burgundy-800);
    --contact-border: rgba(255, 180, 94, .24);
    --contact-shadow: 0 30px 80px -42px rgba(0, 0, 0, .9);
    --contact-form-bg: rgba(10, 10, 12, .28);
    --contact-form-border: rgba(255, 180, 94, .24);
    --contact-field-bg: rgba(255, 255, 255, .07);
    --contact-field-border: rgba(255, 180, 94, .24);
    --contact-field-focus-bg: rgba(255, 255, 255, .11);
    color-scheme: dark;
  }
}

/* Base text behavior */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg-page);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-style: normal;
}
p { margin: 0; }
a {
  color: inherit;
  text-decoration: none;
  transition: color .25s var(--ease), opacity .25s var(--ease);
}
@media (hover: hover) {
  :where(a:not(.btn):not(.brand):not(.social-icon):hover) { opacity: .7; }
}
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { color: #fff; background: var(--color-accent); }
:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* Named type roles: use these in markup instead of inventing local text styles. */
.heading-display {
  font-size: var(--type-display-size);
  font-weight: 600;
  line-height: var(--type-display-line);
  letter-spacing: -.025em;
}
.heading-section {
  font-size: var(--type-section-size);
  font-weight: 600;
  line-height: var(--type-section-line);
  letter-spacing: -.018em;
}
.heading-card {
  font-size: var(--type-card-size);
  font-weight: 600;
  line-height: var(--type-card-line);
  letter-spacing: -.01em;
}
.heading-supporting {
  font-size: var(--type-supporting-size);
  font-weight: 600;
  line-height: var(--type-supporting-line);
}
.text-lead {
  font-family: var(--font-body);
  font-size: var(--type-lead-size);
  font-weight: 400;
  line-height: var(--type-lead-line);
}
.text-body {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  font-weight: 400;
  line-height: var(--type-body-line);
}
.text-small {
  font-family: var(--font-body);
  font-size: var(--type-small-size);
  font-weight: 400;
  line-height: var(--type-small-line);
}
.text-caption {
  font-family: var(--font-body);
  font-size: var(--type-caption-size);
  font-weight: 400;
  line-height: var(--type-caption-line);
}
.text-label {
  font-family: var(--font-body);
  font-size: var(--type-label-size);
  font-weight: 800;
  line-height: var(--type-label-line);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.text-quote {
  font-family: var(--font-heading);
  font-size: var(--type-quote-size);
  font-weight: 500;
  line-height: var(--type-quote-line);
}

/* Shared rounded-square component for complaint and process icons. */
.brand-icon-tile {
  display: flex;
  flex: 0 0 var(--size-icon-tile);
  align-items: center;
  justify-content: center;
  width: var(--size-icon-tile);
  height: var(--size-icon-tile);
  border: 0;
  border-radius: var(--radius-icon-tile);
  color: #fff;
  background: var(--gradient-brand);
  box-shadow: var(--shadow-icon-tile);
}