/* =============================================================
   Medelios Design System — Colors & Typography
   ============================================================= */

/* -------------------------------------------------------------
   Fonts — loaded from Google Fonts as a substitution for the
   wordmark's condensed bold sans (see README for original-font ask)
   ------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* =========================================================
     COLOR — BRAND PRIMARY
     The signature Medelios blue used in logo + primary actions.
     ========================================================= */
  --medelios-blue-50:  #EAF2FA;
  --medelios-blue-100: #CFE0F1;
  --medelios-blue-200: #9CC0E3;
  --medelios-blue-300: #5E9CCF;
  --medelios-blue-400: #2E7EBE;
  --medelios-blue-500: #0D63AD;  /* ← brand primary, matches logo */
  --medelios-blue-600: #0A5495;
  --medelios-blue-700: #08447A;
  --medelios-blue-800: #06365F;
  --medelios-blue-900: #042340;

  /* =========================================================
     COLOR — SECONDARY ACCENTS (from multicolor logo variant)
     Each acts as a category / status accent. Warm + clinical.
     ========================================================= */
  --medelios-red-500:    #A8232C;   /* alert, urgent, critical stock */
  --medelios-red-600:    #8C1922;
  --medelios-red-50:     #FBECEE;

  --medelios-plum-500:   #7A1F4A;   /* specialty / advanced therapeutic */
  --medelios-plum-600:   #5F1639;
  --medelios-plum-50:    #F4E7EE;

  --medelios-orange-500: #E89438;   /* warning, attention, in-progress */
  --medelios-orange-600: #C8771E;
  --medelios-orange-50:  #FCEFDD;

  --medelios-green-500:  #1F8A5B;   /* success, validated, dispensed */
  --medelios-green-600:  #166B45;
  --medelios-green-50:   #E4F3EC;

  /* =========================================================
     COLOR — NEUTRALS (warm cool-gray, slight blue undertone)
     ========================================================= */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FAFBFC;
  --neutral-50:  #F4F6F9;
  --neutral-100: #E7EBF0;
  --neutral-200: #D2D8E0;
  --neutral-300: #B3BCC8;
  --neutral-400: #8B95A4;
  --neutral-500: #667084;
  --neutral-600: #4A5365;
  --neutral-700: #333B4C;
  --neutral-800: #1F2533;
  --neutral-900: #10141F;

  /* =========================================================
     SEMANTIC TOKENS — use these in components, not raw scale
     ========================================================= */
  /* Background layers */
  --bg-app:        var(--neutral-25);      /* page background */
  --bg-surface:    var(--neutral-0);       /* card / sheet */
  --bg-sunken:     var(--neutral-50);      /* inset / list rail */
  --bg-tint:       var(--medelios-blue-50); /* tinted surface for primary callouts */
  --bg-inverse:    var(--medelios-blue-900);

  /* Foreground / text */
  --fg-1: var(--neutral-900);  /* primary text, headings */
  --fg-2: var(--neutral-700);  /* body text */
  --fg-3: var(--neutral-500);  /* secondary text, meta, labels */
  --fg-4: var(--neutral-400);  /* placeholders, disabled */
  --fg-on-primary: var(--neutral-0);
  --fg-on-tint:    var(--medelios-blue-700);
  --fg-link:       var(--medelios-blue-500);

  /* Border / divider */
  --border-subtle: var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-focus:   var(--medelios-blue-500);

  /* Action — primary brand */
  --action-primary:        var(--medelios-blue-500);
  --action-primary-hover:  var(--medelios-blue-600);
  --action-primary-press:  var(--medelios-blue-700);

  /* Action — secondary / ghost */
  --action-secondary-bg:   var(--neutral-0);
  --action-secondary-hover-bg: var(--medelios-blue-50);

  /* Status / feedback */
  --status-success:  var(--medelios-green-500);
  --status-success-bg: var(--medelios-green-50);
  --status-warning:  var(--medelios-orange-500);
  --status-warning-bg: var(--medelios-orange-50);
  --status-danger:   var(--medelios-red-500);
  --status-danger-bg: var(--medelios-red-50);
  --status-info:     var(--medelios-blue-500);
  --status-info-bg:  var(--medelios-blue-50);
  --status-specialty: var(--medelios-plum-500);
  --status-specialty-bg: var(--medelios-plum-50);

  /* =========================================================
     TYPOGRAPHY — Font stacks
     - Display: Barlow Condensed (condensed bold, mirrors wordmark)
     - Body:    Plus Jakarta Sans (warm humanist, modern, friendly)
     - Mono:    JetBrains Mono (data, IDs, posology codes)
     ========================================================= */
  --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-sans:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — px values */
  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  88px;

  /* Line heights */
  --leading-tight:  1.1;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;     /* eyebrow / label caps */

  /* =========================================================
     SPACING — 4 px base scale
     ========================================================= */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* =========================================================
     RADII
     ========================================================= */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;   /* default for inputs, buttons */
  --radius-lg:  14px;   /* cards */
  --radius-xl:  20px;   /* large surfaces, modals */
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* =========================================================
     SHADOWS — soft, layered, never harsh (warm + secure vibe)
     ========================================================= */
  --shadow-xs: 0 1px 2px rgba(16, 36, 64, 0.04);
  --shadow-sm: 0 1px 2px rgba(16, 36, 64, 0.05), 0 1px 3px rgba(16, 36, 64, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 36, 64, 0.06), 0 2px 4px rgba(16, 36, 64, 0.04);
  --shadow-lg: 0 12px 28px rgba(16, 36, 64, 0.10), 0 4px 10px rgba(16, 36, 64, 0.05);
  --shadow-xl: 0 24px 48px rgba(16, 36, 64, 0.14), 0 8px 16px rgba(16, 36, 64, 0.06);
  --shadow-focus: 0 0 0 3px rgba(13, 99, 173, 0.22);
  --shadow-focus-danger: 0 0 0 3px rgba(168, 35, 44, 0.22);

  /* Inner highlight used on tinted cards */
  --shadow-inset-hairline: inset 0 0 0 1px rgba(13, 99, 173, 0.08);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

/* =============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ============================================================= */
.t-display-xl,
.t-display-lg,
.t-display-md,
.t-display-sm {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--fg-1);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-tight);
  text-transform: none;
}
.t-display-xl { font-size: var(--text-6xl); font-weight: 800; }
.t-display-lg { font-size: var(--text-5xl); }
.t-display-md { font-size: var(--text-4xl); }
.t-display-sm { font-size: var(--text-3xl); }

.t-h1, .t-h2, .t-h3, .t-h4 {
  font-family: var(--font-sans);
  color: var(--fg-1);
  letter-spacing: var(--tracking-snug);
  line-height: var(--leading-snug);
  font-weight: 700;
}
.t-h1 { font-size: var(--text-3xl); }
.t-h2 { font-size: var(--text-2xl); }
.t-h3 { font-size: var(--text-xl); }
.t-h4 { font-size: var(--text-lg); }

.t-body-lg, .t-body, .t-body-sm {
  font-family: var(--font-sans);
  color: var(--fg-2);
  line-height: var(--leading-normal);
  font-weight: 400;
}
.t-body-lg { font-size: var(--text-lg); }
.t-body    { font-size: var(--text-base); }
.t-body-sm { font-size: var(--text-sm); }

.t-meta {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--fg-3);
  letter-spacing: var(--tracking-wide);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--fg-link);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg-2);
}

/* =============================================================
   BASE — applied when this file is the page stylesheet
   ============================================================= */
html, body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--fg-2);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font-family: var(--font-sans); font-size: var(--text-3xl); color: var(--fg-1); font-weight: 700; letter-spacing: var(--tracking-snug); line-height: var(--leading-tight); margin: 0; }
h2 { font-family: var(--font-sans); font-size: var(--text-2xl); color: var(--fg-1); font-weight: 700; letter-spacing: var(--tracking-snug); line-height: var(--leading-snug); margin: 0; }
h3 { font-family: var(--font-sans); font-size: var(--text-xl); color: var(--fg-1); font-weight: 600; line-height: var(--leading-snug); margin: 0; }
h4 { font-family: var(--font-sans); font-size: var(--text-lg); color: var(--fg-1); font-weight: 600; line-height: var(--leading-snug); margin: 0; }
p  { margin: 0; line-height: var(--leading-normal); text-wrap: pretty; }
a  { color: var(--fg-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code { font-family: var(--font-mono); font-size: 0.92em; background: var(--neutral-50); padding: 1px 5px; border-radius: var(--radius-xs); border: 1px solid var(--border-subtle); }