/* =========================================================================
   SaludAware Design System — Colors & Type
   ========================================================================= */

/* ----- Webfonts ------------------------------------------------------------ */
/* Display: Megidana — provided as .otf for personal/internal use.
   Commercial license required for production: https://brandsemut.com/product/megidana/
   If unavailable, the cascade falls back to the Google-Font substitute "Italiana".
   Body: Nohemi is a commercial font (Pangram Pangram). For OSS/web use we
   substitute "Manrope" from Google Fonts — closest available match in
   geometric grotesque proportions. Swap to Nohemi when license is acquired. */

@font-face {
  font-family: "Megidana";
  src: url("./fonts/Megidana.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Italiana&family=Manrope:wght@200..800&display=swap");

:root {
  /* ===== BASE COLOR TOKENS — pulled verbatim from brand guidelines ======== */
  /* Primary brand color — used for headlines, primary buttons, the SA mark */
  --sa-green:        #29605B;  /* GREEN SA      rgb(41, 96, 91)   */
  --sa-green-light:  #CDDEBE;  /* LIGHT GREEN SA  rgb(205, 222, 190) */
  --sa-ink:          #162023;  /* OSCURO SA     rgb(22, 32, 35)   */
  --sa-cream:        #F4F9F9;  /* LIGHT SA      rgb(244, 249, 249) */

  /* Tonal extensions — derived from the brand color in oklch space.
     Use sparingly. The system is intentionally a 4-color palette. */
  --sa-green-900:    oklch(28% 0.04 175);
  --sa-green-700:    oklch(38% 0.04 175);   /* hover state of --sa-green */
  --sa-green-600:    #29605B;               /* primary */
  --sa-green-500:    oklch(55% 0.05 165);
  --sa-green-300:    oklch(78% 0.05 140);
  --sa-green-200:    oklch(88% 0.04 140);   /* near --sa-green-light */
  --sa-green-100:    oklch(94% 0.025 140);  /* tint wash */
  --sa-green-50:     oklch(97% 0.012 145);

  --sa-ink-900:      #162023;
  --sa-ink-700:      oklch(28% 0.015 220);
  --sa-ink-500:      oklch(45% 0.012 220);  /* secondary text */
  --sa-ink-300:      oklch(70% 0.008 220);  /* tertiary / hints */
  --sa-ink-200:      oklch(85% 0.005 220);  /* hairline borders */
  --sa-ink-100:      oklch(92% 0.004 220);  /* subtle dividers */

  /* ===== SEMANTIC SURFACES ============================================== */
  --bg:              #F4F9F9;     /* page background */
  --bg-elevated:     #FFFFFF;     /* cards, sheets */
  --bg-sunken:       #EAF1F1;     /* inputs, recessed panels */
  --bg-tint:         #E8F0E5;     /* soft green wash */
  --bg-inverse:      var(--sa-green);
  --bg-ink:          var(--sa-ink);

  --fg:              var(--sa-ink-900);
  --fg-muted:        var(--sa-ink-500);
  --fg-subtle:       var(--sa-ink-300);
  --fg-on-green:     var(--sa-cream);
  --fg-on-ink:       var(--sa-cream);

  --border:          oklch(88% 0.008 200);
  --border-strong:   oklch(75% 0.012 200);
  --border-on-dark:  oklch(40% 0.03 175);

  /* ===== TYPE FAMILIES =================================================== */
  --font-display:    "Megidana", "Italiana", "Cormorant Garamond", serif;
  --font-sans:       "Manrope", "Nohemi", -apple-system, system-ui, sans-serif;
  --font-mono:       ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ===== TYPE SCALE — soft, generous, editorial ========================= */
  --fs-display-xl:   clamp(60px, 9vw, 132px);   /* hero "Tu salud" */
  --fs-display-lg:   clamp(48px, 6vw, 88px);    /* section openers */
  --fs-display-md:   clamp(36px, 4vw, 60px);
  --fs-h1:           clamp(36px, 3.5vw, 56px);
  --fs-h2:           clamp(28px, 2.6vw, 40px);
  --fs-h3:           22px;
  --fs-h4:           18px;
  --fs-body-lg:      18px;
  --fs-body:         16px;
  --fs-body-sm:      14px;
  --fs-caption:      12px;
  --fs-eyebrow:      11px;

  --lh-display:      1.02;
  --lh-tight:        1.12;
  --lh-snug:         1.28;
  --lh-body:         1.55;
  --lh-loose:        1.72;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.06em;        /* eyebrow / MEDICAL CLINIC label */
  --tracking-wider:   0.18em;        /* sello / micro caps */

  --fw-thin:    200;
  --fw-light:   300;
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ===== SPACING & RHYTHM ================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ===== RADII =========================================================== */
  --r-xs:    4px;
  --r-sm:    8px;
  --r-md:    14px;
  --r-lg:    20px;
  --r-xl:    28px;
  --r-2xl:   40px;
  --r-pill:  999px;
  --r-blob:  62% 38% 58% 42% / 48% 60% 40% 52%;  /* sello-2 organic shape */

  /* ===== ELEVATION — soft, low-contrast, no harsh shadows =============== */
  --shadow-xs:  0 1px 2px rgba(22, 32, 35, 0.04);
  --shadow-sm:  0 2px 8px rgba(22, 32, 35, 0.04), 0 1px 2px rgba(22, 32, 35, 0.03);
  --shadow-md:  0 8px 24px rgba(22, 32, 35, 0.06), 0 2px 4px rgba(22, 32, 35, 0.03);
  --shadow-lg:  0 24px 48px -8px rgba(22, 32, 35, 0.10), 0 4px 8px rgba(22, 32, 35, 0.04);
  --shadow-green:  0 16px 40px -12px rgba(41, 96, 91, 0.32);

  /* ===== MOTION ========================================================== */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);     /* expo-out, calm */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    160ms;
  --dur-base:    260ms;
  --dur-slow:    520ms;

  /* ===== LAYOUT ========================================================== */
  --container:        1200px;
  --container-wide:   1440px;
  --gutter:           clamp(20px, 4vw, 56px);
}

/* ========================================================================
   SEMANTIC ELEMENT DEFAULTS
   Set globally so any prototype that imports this file gets brand-correct
   defaults for free.
   ======================================================================== */

html {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-normal);
  color: var(--fg);
  background: var(--bg);
}

/* Display — Megidana, mixed case (NEVER all caps) */
.display, h1.display, .display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-normal);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-display);
  color: var(--sa-ink);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-normal);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--sa-ink);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-normal);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--sa-ink);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--sa-ink);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--sa-ink);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  text-wrap: pretty;
}

.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-loose); }
.body-sm { font-size: var(--fs-body-sm); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--sa-green);
}

.caption {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  letter-spacing: var(--tracking-normal);
}

/* Micro-caps as in "MEDICAL CLINIC" under the logo */
.micro-caps {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-size: var(--fs-caption);
}

a {
  color: var(--sa-green);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { opacity: 0.7; }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}