/* =========================================================
   AEGIS HOSPITAL SYSTEM — DESIGN TOKENS
   Source: Aegis AST Brand Guideline PA2 (2026-05-31)
   Owner: Tony Nguyễn — CEO AE Medical
   ========================================================= */

:root {
  /* ---------- COLOR ---------- */
  /* Primary brand */
  --c-sage:        #5F8377;  /* Primary — heritage, healing */
  --c-sage-deep:   #2A4F44;  /* Sage 700 — for text on light, accents */
  --c-sage-dark:   #1A332C;  /* Sage 900 — deepest, premium accent */
  --c-sage-tint:   #C5DCD3;  /* Sage 100 — interior signage accent */

  /* Cream / Canvas (background warmth) */
  --c-cream:       #FFF3E6;  /* Cream — secondary brand */
  --c-cream-tint:  #FFEED4;  /* Cream 100 — lighter */
  --c-canvas:      #FBF7F0;  /* Canvas — main page background */
  --c-canvas-soft: #FDFAF6;  /* Canvas 50 — softest tint */

  /* Gold (premium accent, CTAs sparing) */
  --c-gold:        #C0913A;  /* Gold — premium accent */
  --c-gold-light:  #E3BE80;  /* Gold 300 — surface tint */
  --c-gold-deep:   #8C6F1F;  /* Gold 700 — text on cream */
  --c-gold-mid:    #B9922E;  /* Gold 500 — secondary */
  --c-gold-darker: #5C4710;  /* Gold 900 — darkest */

  /* Wood (interior material reference, optional decorative) */
  --c-wood:        #D6B88A;

  /* Neutrals */
  --c-anchor:      #1F1D1A;  /* Anchor — primary text, dark surfaces */
  --c-anchor-soft: #1F1C1A;  /* Anchor variant — material */
  --c-warm-gray:   #4D4D4F;  /* Warm gray — secondary text */
  --c-warm-gray-2: #9E998C;  /* Warm gray 400 — borders, mute */

  /* Semantic */
  --c-bg:          var(--c-canvas);
  --c-bg-alt:      var(--c-cream);
  --c-surface:     #FFFFFF;
  --c-text:        var(--c-anchor);
  --c-text-soft:   var(--c-warm-gray);
  --c-text-mute:   var(--c-warm-gray-2);
  --c-border:      rgba(31, 29, 26, 0.10);
  --c-border-soft: rgba(31, 29, 26, 0.06);

  /* Status (medical UI patterns from PDF section 08) */
  --c-success:     #4A7C59;
  --c-warning:     #C0913A;
  --c-error:       #C02D3A;
  --c-info:        #5F8377;

  /* ---------- TYPOGRAPHY ---------- */
  --ff-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono:    'JetBrains Mono', ui-monospace, 'Consolas', monospace;

  /* Type scale — modular 1.250 (major third), mobile-first */
  --fs-12: 0.75rem;     /* 12px — micro */
  --fs-14: 0.875rem;    /* 14px — caption */
  --fs-16: 1rem;        /* 16px — body */
  --fs-18: 1.125rem;    /* 18px — body lg */
  --fs-20: 1.25rem;     /* 20px — h6 */
  --fs-24: 1.5rem;      /* 24px — h5 */
  --fs-30: 1.875rem;    /* 30px — h4 */
  --fs-36: 2.25rem;     /* 36px — h3 */
  --fs-48: 3rem;        /* 48px — h2 */
  --fs-60: 3.75rem;     /* 60px — h1 desktop */
  --fs-72: 4.5rem;      /* 72px — hero */

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.75;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* Letter spacing */
  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-base:     0;
  --ls-wide:     0.04em;
  --ls-wider:    0.08em;

  /* ---------- SPACING (4px base) ---------- */
  --s-1:   0.25rem;   /* 4 */
  --s-2:   0.5rem;    /* 8 */
  --s-3:   0.75rem;   /* 12 */
  --s-4:   1rem;      /* 16 */
  --s-5:   1.25rem;   /* 20 */
  --s-6:   1.5rem;    /* 24 */
  --s-8:   2rem;      /* 32 */
  --s-10:  2.5rem;    /* 40 */
  --s-12:  3rem;      /* 48 */
  --s-16:  4rem;      /* 64 */
  --s-20:  5rem;      /* 80 */
  --s-24:  6rem;      /* 96 */
  --s-32:  8rem;      /* 128 */

  /* ---------- LAYOUT ---------- */
  --container:      1280px;
  --container-narrow: 1040px;
  --container-text:  720px;

  /* ---------- RADIUS ---------- */
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    12px;
  --r-xl:    20px;
  --r-2xl:   32px;
  --r-full:  9999px;

  /* ---------- SHADOWS (subtle, premium) ---------- */
  --shadow-xs: 0 1px 2px rgba(31, 29, 26, 0.04);
  --shadow-sm: 0 2px 8px rgba(31, 29, 26, 0.06);
  --shadow-md: 0 6px 20px rgba(31, 29, 26, 0.08);
  --shadow-lg: 0 12px 36px rgba(31, 29, 26, 0.10);
  --shadow-xl: 0 24px 60px rgba(31, 29, 26, 0.12);

  /* ---------- TRANSITION ---------- */
  --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Z-INDEX ---------- */
  --z-base:    1;
  --z-sticky:  100;
  --z-nav:     200;
  --z-modal:   500;
  --z-toast:   700;
}

/* =========================================================
   RESET + BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--c-sage); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  color: var(--c-anchor);
  margin: 0 0 var(--s-4);
}

h1 { font-size: clamp(var(--fs-36), 5vw + 1rem, var(--fs-72)); letter-spacing: var(--ls-tight); }
h2 { font-size: clamp(var(--fs-30), 3.5vw + 0.5rem, var(--fs-48)); }
h3 { font-size: clamp(var(--fs-24), 2.5vw, var(--fs-36)); }
h4 { font-size: var(--fs-24); }
h5 { font-size: var(--fs-20); }
h6 { font-size: var(--fs-18); }

p { margin: 0 0 var(--s-4); }

/* Display headline (hero) — for emphasized hero text */
.display {
  font-family: var(--ff-display);
  font-weight: var(--fw-extra);
  line-height: 0.95;
  letter-spacing: var(--ls-tight);
}

/* Eyebrow / overline */
.eyebrow {
  font-family: var(--ff-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-sage);
  margin-bottom: var(--s-4);
}

/* =========================================================
   LAYOUT UTILITIES
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

@media (min-width: 768px) {
  .container { padding-inline: var(--s-8); }
}

.container--narrow { max-width: var(--container-narrow); }
.container--text   { max-width: var(--container-text); }

.section {
  padding-block: var(--s-16);
}
@media (min-width: 1024px) {
  .section { padding-block: var(--s-24); }
}

.section--sm { padding-block: var(--s-10); }
.section--lg { padding-block: var(--s-32); }

.section--cream  { background: var(--c-cream); }
.section--canvas { background: var(--c-canvas); }
.section--sage   { background: var(--c-sage); color: var(--c-canvas); }
.section--anchor { background: var(--c-anchor); color: var(--c-canvas); }
.section--sage-dark { background: var(--c-sage-dark); color: var(--c-canvas); }

.section--sage h1, .section--sage h2, .section--sage h3,
.section--anchor h1, .section--anchor h2, .section--anchor h3,
.section--sage-dark h1, .section--sage-dark h2, .section--sage-dark h3 {
  color: var(--c-canvas);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-6);
  font-family: var(--ff-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  border-radius: var(--r-full);
  border: 1.5px solid transparent;
  transition: all var(--t-base);
  cursor: pointer;
  white-space: nowrap;
  min-height: 48px;
}

.btn--primary {
  background: var(--c-sage);
  color: var(--c-canvas);
}
.btn--primary:hover {
  background: var(--c-sage-deep);
  color: var(--c-canvas);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background: transparent;
  color: var(--c-sage-deep);
  border-color: var(--c-sage);
}
.btn--secondary:hover {
  background: var(--c-sage);
  color: var(--c-canvas);
}

.btn--gold {
  background: var(--c-gold);
  color: var(--c-anchor);
}
.btn--gold:hover {
  background: var(--c-gold-deep);
  color: var(--c-canvas);
}

.btn--ghost {
  background: transparent;
  color: var(--c-anchor);
}
.btn--ghost:hover {
  background: rgba(31, 29, 26, 0.06);
}

.btn--lg { padding: var(--s-4) var(--s-8); font-size: var(--fs-18); min-height: 56px; }
.btn--sm { padding: var(--s-2) var(--s-4); font-size: var(--fs-14); min-height: 36px; }

/* =========================================================
   CARDS
   ========================================================= */
.card {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  border: 1px solid var(--c-border-soft);
  transition: all var(--t-base);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-border);
}

.card--bordered { border: 1.5px solid var(--c-border); }
.card--flat { background: transparent; border: 1.5px solid var(--c-border); box-shadow: none; }
.card--sage { background: var(--c-sage); color: var(--c-canvas); }
.card--cream { background: var(--c-cream); }

/* =========================================================
   GRID
   ========================================================= */
.grid {
  display: grid;
  gap: var(--s-6);
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

@media (min-width: 1024px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================
   ICON (inline SVG)
   ========================================================= */
.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  flex-shrink: 0;
}
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 32px; height: 32px; }
.icon--xl { width: 48px; height: 48px; stroke-width: 1.25; }

/* =========================================================
   BADGE / PILL
   ========================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-3);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--r-full);
  background: var(--c-sage-tint);
  color: var(--c-sage-dark);
}
.badge--gold { background: var(--c-gold-light); color: var(--c-gold-darker); }
.badge--cream { background: var(--c-cream); color: var(--c-gold-deep); }
.badge--sage-solid { background: var(--c-sage); color: var(--c-canvas); }
.badge--anchor { background: var(--c-anchor); color: var(--c-canvas); }
.badge--soft { background: rgba(255, 255, 255, 0.15); color: var(--c-canvas); }

/* =========================================================
   FORMS
   ========================================================= */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.field__label {
  font-family: var(--ff-display);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--c-anchor);
}
.field__hint { font-size: var(--fs-12); color: var(--c-text-soft); }
.field__required { color: var(--c-error); }

.input, .select, .textarea {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  font: inherit;
  font-size: var(--fs-16);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  min-height: 48px;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--c-sage);
  box-shadow: 0 0 0 3px rgba(95, 131, 119, 0.15);
}
.textarea { min-height: 120px; resize: vertical; }

/* =========================================================
   DIVIDER / RULES
   ========================================================= */
.rule {
  height: 1px;
  background: var(--c-border);
  border: 0;
  margin-block: var(--s-8);
}

/* =========================================================
   UTILITIES
   ========================================================= */
.text-center { text-align: center; }
.text-sage   { color: var(--c-sage); }
.text-gold   { color: var(--c-gold-deep); }
.text-soft   { color: var(--c-text-soft); }
.text-mute   { color: var(--c-text-mute); }
.text-canvas { color: var(--c-canvas); }
.text-sm     { font-size: var(--fs-14); }
.text-lg     { font-size: var(--fs-18); }

.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--s-2); } .mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); } .mt-8 { margin-top: var(--s-8); } .mt-12 { margin-top: var(--s-12); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--s-2); } .mb-4 { margin-bottom: var(--s-4); }
.mb-6 { margin-bottom: var(--s-6); } .mb-8 { margin-bottom: var(--s-8); } .mb-12 { margin-bottom: var(--s-12); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--s-2); } .gap-4 { gap: var(--s-4); } .gap-6 { gap: var(--s-6); } .gap-8 { gap: var(--s-8); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */
*:focus-visible {
  outline: 2px solid var(--c-sage);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}