/* ==========================================================================
DRA. / DR. MEDICAL BRAND DESIGN SYSTEM
Version: 1.0.0
Architecture: Tokens (Atoms) -> Components (Molecules) -> Layout (Organisms)
========================================================================== */

/* --------------------------------------------------------------------------

DESIGN TOKENS (Variables Base)
-------------------------------------------------------------------------- */
:root {
/* --- Brand Colors --- */
--ds-color-primary-rgb: 0, 82, 147;
--ds-color-primary: rgb(var(--ds-color-primary-rgb));
--ds-color-primary-hover: #003e70;
--ds-color-primary-active: #002c50;

--ds-color-navy: #06375c;
--ds-color-navy-card: #07375b;
--ds-color-hero-overlay: rgba(23, 62, 99, 0.5);

/* --- Neutral & Text Colors --- */
--ds-color-heading: #17313d;
--ds-color-body: #5c6f76;
--ds-color-muted: #637276;
--ds-color-placeholder: #757575;
--ds-color-border-input: rgba(99, 114, 118, 0.35);

/* --- Surface Colors --- */
--ds-color-white: #ffffff;
--ds-color-surface: #f5f5f5;

/* --- Brand Alpha Variants --- */
--ds-color-primary-alpha-8: rgba(var(--ds-color-primary-rgb), 0.08);
--ds-color-primary-alpha-10: rgba(var(--ds-color-primary-rgb), 0.10);
--ds-color-primary-alpha-14: rgba(var(--ds-color-primary-rgb), 0.14);

/* --- White Alpha Variants (Dark Surface Context) --- */
--ds-color-white-alpha-6: rgba(255, 255, 255, 0.06);
--ds-color-white-alpha-8: rgba(255, 255, 255, 0.08);
--ds-color-white-alpha-9: rgba(255, 255, 255, 0.09);
--ds-color-white-alpha-10: rgba(255, 255, 255, 0.10);
--ds-color-white-alpha-14: rgba(255, 255, 255, 0.14);
--ds-color-white-alpha-18: rgba(255, 255, 255, 0.18);
--ds-color-white-alpha-62: rgba(255, 255, 255, 0.62);
--ds-color-white-alpha-72: rgba(255, 255, 255, 0.72);
--ds-color-white-alpha-78: rgba(255, 255, 255, 0.78);
--ds-color-white-alpha-86: rgba(255, 255, 255, 0.86);
--ds-color-white-alpha-90: rgba(255, 255, 255, 0.90);

/* --- Typography Families & Weights --- */
--ds-font-heading: "Montserrat", system-ui, -apple-system, sans-serif;
--ds-font-body: "Open Sans", system-ui, -apple-system, sans-serif;
--ds-fw-regular: 400;
--ds-fw-semibold: 600;
--ds-fw-bold: 700;

/* --- Fluid Typography Scale --- /
--ds-fs-h1: clamp(2.25rem, 5vw, 3.92rem);      / 36px to 62.7px */
--ds-lh-h1: 1.05;

--ds-fs-h2: clamp(1.85rem, 4vw, 3.25rem);      /* 29px to 52px */
--ds-lh-h2: 1.1;

--ds-fs-h3: clamp(1.25rem, 2.5vw, 1.42rem);    /* 20px to 22.7px */
--ds-lh-h3: 1.25;

--ds-fs-lead: clamp(1rem, 1.5vw, 1.25rem);      /* 16px to 20px */
--ds-lh-lead: 1.6;

--ds-fs-body: 1rem;                             /* 16px base */
--ds-lh-body: 1.7;

--ds-fs-sm: 0.875rem;                           /* 14px /
--ds-fs-xs: 0.775rem;                           / 12.4px */

/* --- Spacing Scale --- /
--ds-space-xs: 0.5rem;    / 8px /
--ds-space-sm: 0.75rem;   / 12px /
--ds-space-md: 1rem;      / 16px /
--ds-space-lg: 1.5rem;    / 24px /
--ds-space-xl: 2rem;      / 32px /
--ds-space-2xl: 3.5rem;   / 56px */

/* --- Border Radius Tokens --- /
--ds-radius-sm: 0.6875rem; / 11px /
--ds-radius-md: 0.875rem;  / 14px /
--ds-radius-lg: 1.5rem;    / 24px /
--ds-radius-xl: 1.75rem;   / 28px */
--ds-radius-pill: 9999px;

/* --- Elevation & Shadows --- */
--ds-shadow-sm: 0 4px 12px rgba(20, 51, 68, 0.05);
--ds-shadow-md: 0 10px 30px rgba(20, 51, 68, 0.07);
--ds-shadow-lg: 0 18px 48px rgba(14, 49, 70, 0.08);
--ds-shadow-xl: 0 24px 70px rgba(20, 51, 68, 0.12);
--ds-shadow-focus: 0 0 0 3px rgba(var(--ds-color-primary-rgb), 0.35);

/* --- Animation & Transitions --- */
--ds-transition-fast: 0.15s ease;
--ds-transition-base: 0.25s ease;
}

/* --------------------------------------------------------------------------
2. BASE & RESET
-------------------------------------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
}

body {
margin: 0;
background-color: var(--ds-color-white);
color: var(--ds-color-body);
font-family: var(--ds-font-body);
font-weight: var(--ds-fw-regular);
font-size: var(--ds-fs-body);
line-height: var(--ds-lh-body);
-webkit-font-smoothing: antialiased;
}

h1, h2, h3, .ds-heading {
font-family: var(--ds-font-heading);
font-weight: var(--ds-fw-semibold);
color: var(--ds-color-heading);
margin: 0;
}

h1 { font-size: var(--ds-fs-h1); line-height: var(--ds-lh-h1); letter-spacing: -0.05em; }
h2 { font-size: var(--ds-fs-h2); line-height: var(--ds-lh-h2); letter-spacing: -0.03em; }
h3 { font-size: var(--ds-fs-h3); line-height: var(--ds-lh-h3); letter-spacing: -0.02em; }

p { margin: 0 0 var(--ds-space-md) 0; }
p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
3. ATOMIC COMPONENTS
-------------------------------------------------------------------------- */

/* --- Buttons --- */
.ds-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ds-space-xs);
min-height: 3.125rem;
padding: 0.75rem 1.375rem;
border: 1px solid transparent;
border-radius: var(--ds-radius-pill);
font-family: var(--ds-font-heading);
font-weight: var(--ds-fw-semibold);
font-size: var(--ds-fs-body);
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: background-color var(--ds-transition-fast),
box-shadow var(--ds-transition-fast),
transform var(--ds-transition-fast);
}

.ds-btn:focus-visible {
outline: none;
box-shadow: var(--ds-shadow-focus);
}

.ds-btn:active {
transform: translateY(1px);
}

.ds-btn--primary {
background-color: var(--ds-color-primary);
color: var(--ds-color-white);
box-shadow: 0 12px 25px rgba(var(--ds-color-primary-rgb), 0.2);
}

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

.ds-btn--ghost {
background-color: var(--ds-color-white-alpha-8);
border-color: var(--ds-color-white-alpha-62);
color: var(--ds-color-white);
}

.ds-btn--ghost:hover {
background-color: var(--ds-color-white-alpha-18);
}

.ds-btn--sm {
min-height: 2.75rem;
padding: 0.5rem 1rem;
font-size: var(--ds-fs-sm);
}

/* --- Form Controls --- */
.ds-field {
display: flex;
flex-direction: column;
gap: 0.375rem;
margin-bottom: var(--ds-space-sm);
}

.ds-label {
font-family: var(--ds-font-body);
font-weight: var(--ds-fw-semibold);
font-size: var(--ds-fs-sm);
color: var(--ds-color-heading);
}

.ds-input, .ds-select, .ds-textarea {
width: 100%;
min-height: 3rem;
padding: 0.625rem 0.875rem;
background-color: var(--ds-color-white);
border: 1px solid var(--ds-color-border-input);
border-radius: var(--ds-radius-sm);
font-family: var(--ds-font-body);
font-size: var(--ds-fs-body);
color: var(--ds-color-heading);
transition: border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast);
}

.ds-input::placeholder, .ds-textarea::placeholder {
color: var(--ds-color-placeholder);
}

.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
outline: none;
border-color: var(--ds-color-primary);
box-shadow: var(--ds-shadow-focus);
}

/* --- Badges & Chips --- */
.ds-chip {
display: inline-flex;
align-items: center;
gap: var(--ds-space-xs);
padding: 0.5rem 0.75rem;
border: 1px solid var(--ds-color-white-alpha-18);
border-radius: var(--ds-radius-pill);
background-color: var(--ds-color-white-alpha-9);
color: var(--ds-color-white-alpha-90);
font-size: var(--ds-fs-xs);
font-weight: var(--ds-fw-semibold);
}

.ds-eyebrow {
font-family: var(--ds-font-heading);
font-size: var(--ds-fs-xs);
font-weight: var(--ds-fw-semibold);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ds-color-primary);
}

/* --------------------------------------------------------------------------
4. MOLECULES & CARDS
-------------------------------------------------------------------------- */
.ds-card {
display: flex;
flex-direction: column;
padding: var(--ds-space-xl);
background-color: var(--ds-color-white);
border: 1px solid var(--ds-color-primary-alpha-10);
border-radius: var(--ds-radius-xl);
box-shadow: var(--ds-shadow-lg);
transition: transform var(--ds-transition-base), box-shadow var(--ds-transition-base);
}

.ds-card:hover {
transform: translateY(-4px);
box-shadow: var(--ds-shadow-xl);
}

.ds-card--dark {
background-color: var(--ds-color-navy-card);
color: var(--ds-color-white);
border-color: var(--ds-color-white-alpha-10);
}

.ds-card--dark h3 {
color: var(--ds-color-white);
}

/* --------------------------------------------------------------------------
5. LAYOUT & UTILITIES
-------------------------------------------------------------------------- */
.ds-container {
width: 100%;
max-width: 68rem; /* ~1088px safe content area */
margin-inline: auto;
padding-inline: var(--ds-space-md);
}

.ds-section {
padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.ds-section--surface {
background-color: var(--ds-color-surface);
}

.ds-section--navy {
background-color: var(--ds-color-navy);
color: var(--ds-color-white);
}

.ds-section--navy h2, .ds-section--navy h3 {
color: var(--ds-color-white);
}

.ds-grid-2 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--ds-space-lg);
}

.ds-grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--ds-space-md);
}