/* ==========================================================================
   RESARV Design System Tokens & Base Styles
   Derived from company/brand.txt
   ========================================================================== */

:root {
  /* Color Tokens */
  --color-primary: #00AEEF;
  --color-primary-hover: #0098D4;
  --color-accent: #FF6B6B;
  --color-accent-hover: #E05555;
  --color-bg-base: #F7FCFC;
  --color-surface-base: #FFFFFF;
  --color-section-gradient: #E8F6F6;
  --color-contrast-base: #121A2C;
  --color-text-main: #212121;
  --color-text-muted: #5A6B7C;
  --color-border: #D6E8E8;
  --color-shadow: rgba(18, 26, 44, 0.08);

  /* Typography Tokens */
  --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-h1: 600 1.85rem/1.25 var(--font-family);
  --font-h2: 600 1.15rem/1.35 var(--font-family);
  --font-body: 400 1rem/1.6 var(--font-family);
  --font-caption: 500 0.875rem/1.4 var(--font-family);

  /* Layout & Spacing Tokens */
  --container-max-width: 1200px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  --touch-target-min: 44px;
}

/* Dark Theme Override */
[data-theme="dark"] {
  --color-bg-base: #121A2C;
  --color-surface-base: #1C273D;
  --color-section-gradient: #1A2B38;
  --color-contrast-base: #F7FCFC;
  --color-text-main: #F0F4F8;
  --color-text-muted: #94A3B8;
  --color-border: #2D3D54;
  --color-shadow: rgba(0, 0, 0, 0.3);
}

/* System Preference (Standard 3-State Theme System) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-base: #121A2C;
    --color-surface-base: #1C273D;
    --color-section-gradient: #1A2B38;
    --color-contrast-base: #F7FCFC;
    --color-text-main: #F0F4F8;
    --color-text-muted: #94A3B8;
    --color-border: #2D3D54;
    --color-shadow: rgba(0, 0, 0, 0.3);
  }
}

/* Global Reset & Base Setup */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family);
  background-color: var(--color-bg-base);
  color: var(--color-text-main);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Typography Base Styles */
h1 { font: var(--font-h1); letter-spacing: -0.02em; margin: 0 0 1rem 0; }
h2 { font: var(--font-h2); letter-spacing: -0.01em; margin: 0 0 1rem 0; }
p  { font: var(--font-body); margin: 0 0 1.25rem 0; }
small, .caption { font: var(--font-caption); color: var(--color-text-muted); }
sup {
  font-size: 0.7em;
  line-height: 0;
  vertical-align: baseline;
  position: relative;
  top: -0.45em;
  font-weight: 700;
}

/* Touch & Button Accessibility */
button, input, select, textarea, .btn {
  font-family: inherit;
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
}

.btn-primary {
  background-color: var(--color-primary);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-md);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 174, 239, 0.25);
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
}

.btn-accent {
  background-color: var(--color-accent);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-md);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.btn-accent:hover {
  background-color: var(--color-accent-hover);
}

/* Responsive Grid & Containers */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Section Gradient Card */
.section-accent {
  background: linear-gradient(180deg, var(--color-section-gradient) 0%, var(--color-bg-base) 100%);
  padding: 3rem 1.5rem;
  border-radius: var(--radius-lg);
}

/* Mobile Fluid Adjustments */
@media (max-width: 768px) {
  :root {
    --font-h1: 600 2.25rem/1.2 var(--font-family);
    --font-h2: 600 1.75rem/1.25 var(--font-family);
    --font-body: 400 0.9375rem/1.65 var(--font-family);
  }

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ==========================================================================
   Standardized Markdown Content Typography (All Markdown Generated Pages)
   ========================================================================== */
.markdown-body {
  line-height: 1.7;
  font-size: 1.025rem;
  color: var(--color-text-main);
}

.markdown-body h1 {
  font-size: 1.3rem !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
  margin-bottom: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--color-text-main) !important;
}

.markdown-body h2 {
  font-size: 1.15rem !important;
  line-height: 1.35 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.75rem !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding-bottom: 0.35rem !important;
  color: var(--color-text-main) !important;
}

.markdown-body h3 {
  font-size: 1.025rem !important;
  line-height: 1.4 !important;
  margin-top: 1.25rem !important;
  margin-bottom: 0.5rem !important;
  font-weight: 600 !important;
  color: var(--color-text-main) !important;
}

.markdown-body h4 {
  font-size: 0.95rem !important;
  margin-top: 1rem !important;
  margin-bottom: 0.5rem !important;
  font-weight: 600 !important;
  color: var(--color-text-muted) !important;
}