:root {
  /* ============================================================
     COLOR SYSTEM
     ============================================================ */

  /* Brand */
  --color-brand-950: #071f31;
  --color-brand-900: #0b2d46;
  --color-brand-800: #123b5d;
  --color-brand-700: #165577;
  --color-brand-600: #1976a8;
  --color-brand-500: #218fb8;

  /* Healthcare / digital accent */
  --color-accent-700: #0f7779;
  --color-accent-600: #168f91;
  --color-accent-500: #27a9c9;
  --color-accent-400: #61c6d2;
  --color-accent-100: #eaf6f8;

  /* Neutrals */
  --color-ink: #18303d;
  --color-ink-soft: #405965;
  --color-muted: #637783;
  --color-line: #dce7eb;
  --color-line-strong: #c9dce3;
  --color-surface: #f4f8fa;
  --color-surface-soft: #f7fbfc;
  --color-white: #ffffff;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  --font-sans:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --font-size-xs: 0.72rem;
  --font-size-sm: 0.82rem;
  --font-size-md: 0.9rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.12rem;
  --font-size-xl: 1.35rem;
  --font-size-2xl: 1.7rem;
  --font-size-3xl: 2rem;
  --font-size-display-sm: 2.65rem;
  --font-size-display: clamp(2.6rem, 5vw, 4.55rem);

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --leading-tight: 1.02;
  --leading-heading: 1.08;
  --leading-normal: 1.55;

  --tracking-tight: -0.055em;
  --tracking-heading: -0.035em;
  --tracking-label: 0.12em;

  /* ============================================================
     SPACING
     ============================================================ */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-22: 88px;

  /* ============================================================
     SHAPE
     ============================================================ */

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 17px;
  --radius-xl: 18px;
  --radius-2xl: 25px;
  --radius-pill: 999px;

  /* ============================================================
     ELEVATION
     ============================================================ */

  --shadow-sm:
    0 10px 30px rgba(16, 55, 75, 0.07);

  --shadow-md:
    0 16px 38px rgba(16, 55, 75, 0.12);

  --shadow-lg:
    0 18px 50px rgba(15, 52, 72, 0.10);

  /* ============================================================
     GRADIENTS
     ============================================================ */

  /* Main institutional / healthcare background */
  --gradient-hero:
    radial-gradient(
      circle at 84% 18%,
      rgba(39, 169, 201, 0.20),
      transparent 27%
    ),
    radial-gradient(
      circle at 70% 90%,
      rgba(22, 143, 145, 0.12),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #f6fbfc 0%,
      #eef6f8 55%,
      #e9f3f6 100%
    );

  /* Lightweight card gradient */
  --gradient-surface:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.94),
      rgba(228, 242, 246, 0.84)
    );

  /* Feature/card variant */
  --gradient-feature:
    linear-gradient(
      145deg,
      #e8f5f7,
      #f7fbfc
    );

  /* ============================================================
     FILAMENT / ORBIT SYSTEM
     Decorative lines used independently from components.
     ============================================================ */

  --filament-color:
    rgba(25, 118, 168, 0.13);

  --filament-accent:
    rgba(39, 169, 201, 0.22);

  --filament-light:
    rgba(255, 255, 255, 0.13);

  --filament-width: 1px;

  --filament-orbit-sm:
    210px;

  --filament-orbit-md:
    260px;

  --filament-orbit-lg:
    310px;

  /* ============================================================
     COMPONENT-INDEPENDENT EFFECTS
     ============================================================ */

  --focus-ring:
    0 0 0 3px rgba(39, 169, 201, 0.28);

  --transition-fast:
    160ms ease;

  --transition-base:
    220ms ease;
}


/* ================================================================
   TYPOGRAPHY PRIMITIVES
   ================================================================ */

.ds-eyebrow {
  color: var(--color-accent-600);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-extrabold);
}

.ds-display {
  color: var(--color-brand-900);
  font-size: var(--font-size-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--font-weight-bold);
}

.ds-heading {
  color: var(--color-brand-900);
  font-size: var(--font-size-3xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--font-weight-bold);
}

.ds-body {
  color: var(--color-muted);
  font-size: var(--font-size-base);
  line-height: var(--leading-normal);
}


/* ================================================================
   FILAMENT PRIMITIVES
   ================================================================ */

/*
  Use on a decorative container.

  <div class="filament filament--hero">
    ...
  </div>
*/

.filament {
  position: relative;
  overflow: hidden;
}

.filament::before,
.filament::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: var(--filament-width) solid var(--filament-color);
  border-radius: 50%;
}

.filament--hero::before {
  width: 430px;
  height: 430px;
  right: -120px;
  top: -120px;
}

.filament--orbit::before {
  width: var(--filament-orbit-md);
  height: 150px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-28deg);
  border-color: var(--filament-accent);
}

.filament--orbit::after {
  width: var(--filament-orbit-lg);
  height: 200px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(31deg);
  border-color: var(--filament-accent);
}

.filament--dark::before,
.filament--dark::after {
  border-color: var(--filament-light);
}


/* Small accent point for the visual language */
.filament-dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-500);
}

.filament-dot--secondary {
  background: var(--color-accent-600);
}


/* ================================================================
   OPTIONAL THEME
   ================================================================ */

/*
  Override these values in another project rather than modifying
  the base tokens.

  Example:

  [data-theme="institutional-green"] {
    --color-brand-800: #174b43;
    --color-brand-600: #1b806e;
    --color-accent-500: #42b89d;
  }
*/