/* ==========================================================================
   ICMED Design System — colors_and_type.css
   Source of truth: design-tokens.json (extracted from production CSS)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Web fonts — Fraunces (headings) + Inter (body/UI)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Variable.woff2') format('woff2-variations'),
       url('fonts/Fraunces-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens — Colors (brand, neutrals, semantic), Type, Shadow, Radius, Space
   -------------------------------------------------------------------------- */

:root {
  /* Brand — Verde IC (primary) */
  --green:        #45B58B;   /* Verde IC                                    */
  --green-light:  #5BC9A0;   /* Hover                                       */
  --green-dark:   #3A9B78;   /* Pressed/active                              */

  /* Brand — Azul MED (secondary) */
  --blue:         #2D5AA0;   /* Azul MED                                    */
  --blue-light:   #4A7BC8;   /* Hover                                       */
  --blue-dark:    #1e3a8a;   /* Footer / max emphasis                       */

  /* The signature gradient — green → blue, 135° */
  --gradient-primary:        linear-gradient(135deg, #45B58B 0%, #3A9B78 25%, #2D5AA0 75%, #1e3a8a 100%);
  --gradient-primary-hover:  linear-gradient(135deg, #5BC9A0 0%, #45B58B 25%, #4A7BC8 75%, #2D5AA0 100%);
  --gradient-subtle:         linear-gradient(135deg, rgba(69,181,139,0.05) 0%, rgba(45,90,160,0.03) 100%);

  /* Backgrounds & surfaces */
  --bg:            #ffffff;
  --bg-alt:        #f8f9fa;
  --bg-tertiary:   #f1f3f5;
  --surface:       #ffffff;
  --surface-hover: #f8f9fa;

  /* Glass — only for header/overlays */
  --glass-bg:      rgba(255, 255, 255, 0.85);
  --glass-border:  rgba(0, 0, 0, 0.08);
  --glass-blur:    blur(12px) saturate(180%);

  /* Text */
  --fg:            #212529;  /* primary — soft black, never #000           */
  --fg-secondary:  #495057;  /* body                                       */
  --fg-muted:      #6c757d;  /* captions, metadata                         */
  --fg-disabled:   #adb5bd;
  --fg-inverse:    #ffffff;

  /* Borders */
  --border:        rgba(0, 0, 0, 0.08);
  --border-hover:  rgba(69, 181, 139, 0.4);
  --border-focus:  rgba(69, 181, 139, 0.6);

  /* Status — saturated, for confirmations only — DO NOT confuse with --green */
  --success: #10b981;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --info:    #3b82f6;

  /* Type — families */
  --font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type — scale */
  --text-xs:      0.75rem;    /* 12 */
  --text-sm:      0.875rem;   /* 14 */
  --text-base:    0.9375rem;  /* 15 — body default per production CSS     */
  --text-md:      1rem;       /* 16 */
  --text-lg:      1.125rem;   /* 18 */
  --text-xl:      1.25rem;    /* 20 */
  --text-2xl:     1.5rem;     /* 24 — h4                                  */
  --text-3xl:     1.875rem;   /* 30 — h3                                  */
  --text-4xl:     2.5rem;     /* 40 — h2                                  */
  --text-5xl:     3.5rem;     /* 56 — h1                                  */
  --text-display: 5rem;       /* 80 — hero                                */

  /* Type — weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Type — line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  /* Type — tracking */
  --track-tight:  -0.02em;
  --track-normal: 0;
  --track-wide:   0.05em;

  /* Spacing */
  --space-xs:  0.25rem;  /* 4   */
  --space-sm:  0.5rem;   /* 8   */
  --space-md:  1rem;     /* 16  */
  --space-lg:  1.5rem;   /* 24  */
  --space-xl:  2rem;     /* 32  */
  --space-2xl: 3rem;     /* 48  */
  --space-3xl: 4rem;     /* 64  */
  --space-4xl: 6rem;     /* 96  */

  /* Radius */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* Shadow — soft, layered */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 10px 40px rgba(0, 0, 0, 0.10);
  --shadow-xl:   0 20px 60px rgba(0, 0, 0, 0.12);
  --shadow-glow-green: 0 0 30px rgba(69, 181, 139, 0.15);
  --shadow-glow-blue:  0 0 30px rgba(45, 90, 160, 0.15);

  /* Motion — restrained */
  --t-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  --topbar-h:        80px;
  --sidebar-w:       360px;
  --container-max:   1200px;
  --reading-max:     720px;
}

/* --------------------------------------------------------------------------
   Semantic typography utilities
   Usage: combine class with element, or copy these declarations onto your own.
   -------------------------------------------------------------------------- */

.icmed-base {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icmed-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--green-dark);
}

.icmed-display {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: clamp(2.75rem, 6vw, var(--text-display));
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg);
}

.icmed-h1 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  color: var(--fg);
}

.icmed-h2 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-4xl);
  line-height: 1.2;
  letter-spacing: var(--track-tight);
  color: var(--fg);
}

.icmed-h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.icmed-h4 {
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.icmed-body-lg {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}

.icmed-body {
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}

.icmed-caption {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.icmed-quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: 1.4;
  color: var(--fg);
}

.icmed-stat {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: var(--track-tight);
  color: var(--blue-dark);
}

/* Gradient text — apply to headlines for accent */
.icmed-gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}