/* =============================================================================
   Data4Cure Design System — colors & type
   Source: Brand-Update-April-30th (Figma) + Logo-Proposals-Final
   ============================================================================= */

/* --------------------------------------------------------------------------- */
/* Webfonts — IBM Plex Sans + IBM Plex Mono, self-hosted (no Google CDN).      */
/* Generated by deploy/build-fonts.py → assets/fonts/ + assets/fonts.css.      */
/* --------------------------------------------------------------------------- */
@import url('assets/fonts.css');

:root {
  /* =========================================================================
     COLORS — Brand
     ========================================================================= */
  --d4c-blue: #0460FF;          /* Primary — Bright Blue */
  --d4c-blue-hover: #0353D9;
  --d4c-blue-press: #03469B;
  --d4c-blue-tint: #2474FF;     /* highlight inside saturated blue panels */

  --d4c-navy: #13132F;          /* Primary text + dark background */
  --d4c-navy-2: #1A1A3E;        /* slightly lifted navy for layered surfaces */
  --d4c-navy-hover: #21214A;
  --d4c-navy-press: #0E0E22;

  --d4c-off-white: #F5F5F6;     /* Off White — light canvas */
  --d4c-white: #FFFFFF;
  --d4c-fafafa: #FAFAFA;        /* alternate canvas */

  --d4c-beige: #FDDFC0;         /* Accent — Beige */
  --d4c-beige-2: #FFBFA3;       /* warm peach support */

  /* Light-blue support tint family */
  --d4c-blue-100: #D3E3FF;
  --d4c-blue-200: #A7C7FF;
  --d4c-blue-300: #679EFF;

  /* Curie Graph palette — categorical encoding for knowledge-graph viz */
  --d4c-curie-yellow:    #FFBF02;
  --d4c-curie-green:     #00DC71;
  --d4c-curie-raspberry: #FF6464;
  --d4c-curie-sky:       #1D9EF0;
  --d4c-curie-blue:      var(--d4c-blue);
  --d4c-curie-beige:     var(--d4c-beige);

  /* Neutrals */
  --d4c-grey-100: #EFEFEF;
  --d4c-grey-200: #D2D2D2;
  --d4c-grey-300: #B5B5BC;
  --d4c-grey-400: #9E9E9E;
  --d4c-grey-500: #7C7C86;
  --d4c-grey-600: #3E3E3E;
  --d4c-grey-700: #212121;
  --d4c-black:    #000000;

  /* =========================================================================
     COLORS — Semantic (foreground / background / border)
     ========================================================================= */
  --color-bg:           var(--d4c-off-white);
  --color-bg-elevated:  var(--d4c-white);
  --color-bg-inverse:   var(--d4c-navy);
  --color-bg-brand:     var(--d4c-blue);
  --color-bg-accent:    var(--d4c-beige);

  --color-fg:           var(--d4c-navy);
  --color-fg-muted:     var(--d4c-grey-500);
  --color-fg-subtle:    var(--d4c-grey-400);
  --color-fg-inverse:   var(--d4c-off-white);
  --color-fg-on-brand:  var(--d4c-white);
  --color-fg-on-accent: var(--d4c-navy);
  --color-fg-link:      var(--d4c-blue);

  --color-border:        rgba(19, 19, 47, 0.10);
  --color-border-strong: rgba(19, 19, 47, 0.20);
  --color-border-inverse: rgba(255, 255, 255, 0.14);

  /* =========================================================================
     SPACING — discrete scale (px)
     ========================================================================= */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  56px;
  --space-9:  80px;
  --space-10: 120px;

  /* =========================================================================
     RADII
     ========================================================================= */
  --radius-none: 0;
  --radius-sm:    8px;
  --radius-md:   12px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  /* =========================================================================
     SHADOWS
     ========================================================================= */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(19, 19, 47, 0.06),
               0 4px 12px rgba(19, 19, 47, 0.06);
  --shadow-md: 0 8px 24px rgba(19, 19, 47, 0.10);
  --shadow-lg: 0 16px 48px rgba(19, 19, 47, 0.14);

  /* =========================================================================
     MOTION
     ========================================================================= */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --duration-press: 80ms;
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 480ms;

  /* =========================================================================
     TYPE — base
     ========================================================================= */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-display: var(--font-sans); /* the brand uses Plex Sans even in display */

  /* Type weights actually used in the brand frames */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* Type tokens — base size + scale */
  --text-base-size: 16px;
  --text-base-line: 1.5;

  /* Display scale (negative letter-spacing) */
  --text-display-1: 180px;     /* hero title */
  --text-display-2: 120px;
  --text-display-3:  80px;
  --text-display-4:  60px;

  /* Heading scale */
  --text-h1: 48px;
  --text-h2: 37px;             /* matches "Bright Blue / Navy / Off White / Beige" tile titles */
  --text-h3: 30px;
  --text-h4: 24px;
  --text-h5: 20px;

  /* Body */
  --text-body-lg: 20px;
  --text-body:    16px;
  --text-body-sm: 14px;
  --text-caption: 13px;

  /* Mono */
  --text-mono-lg:  30px;
  --text-mono:     24px;        /* canonical mono eyebrow size */
  --text-mono-sm:  20px;
  --text-mono-xs:  18px;

  /* Tracking */
  --tracking-display: -0.030em;
  --tracking-tight:   -0.020em;
  --tracking-snug:    -0.010em;
  --tracking-normal:   0em;
  --tracking-mono:    -0.020em; /* mono eyebrows in the brand have this */
}

/* =============================================================================
   Semantic typography — class‑based, drop into any element
   ============================================================================= */

.d4c-display-1,
.d4c-display-2,
.d4c-display-3,
.d4c-display-4 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  color: var(--color-fg);
  text-wrap: balance;
}
.d4c-display-1 { font-size: var(--text-display-1); }
.d4c-display-2 { font-size: var(--text-display-2); }
.d4c-display-3 { font-size: var(--text-display-3); }
.d4c-display-4 { font-size: var(--text-display-4); letter-spacing: var(--tracking-tight); line-height: 1.05; }

.d4c-h1, .d4c-h2, .d4c-h3, .d4c-h4, .d4c-h5 {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  color: var(--color-fg);
  text-wrap: pretty;
}
.d4c-h1 { font-size: var(--text-h1); line-height: 1.1; letter-spacing: var(--tracking-tight); }
.d4c-h2 { font-size: var(--text-h2); line-height: 1.1; letter-spacing: var(--tracking-snug); }
.d4c-h3 { font-size: var(--text-h3); line-height: 1.1; letter-spacing: var(--tracking-snug); }
.d4c-h4 { font-size: var(--text-h4); line-height: 1.2; }
.d4c-h5 { font-size: var(--text-h5); line-height: 1.3; font-weight: var(--weight-medium); }

.d4c-body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-fg);
}
.d4c-body-lg { font-family: var(--font-sans); font-size: var(--text-body-lg); line-height: 1.45; color: var(--color-fg); }
.d4c-body-sm { font-family: var(--font-sans); font-size: var(--text-body-sm); line-height: 1.5; color: var(--color-fg); }
.d4c-caption { font-family: var(--font-sans); font-size: var(--text-caption); line-height: 1.4; color: var(--color-fg-muted); }

/* The signature mono eyebrow / label */
.d4c-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: 1.1;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-fg);
}
.d4c-eyebrow-sm {
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  line-height: 1.4;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-fg);
}
.d4c-mono { font-family: var(--font-mono); }

/* =============================================================================
   Base reset + body defaults — opt-in by adding `.d4c` to <body>
   ============================================================================= */
.d4c, .d4c * { box-sizing: border-box; }
.d4c {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--text-base-size);
  line-height: var(--text-base-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}