/* ============================================================
   MedCifra · Design System · Color & Type Tokens
   ------------------------------------------------------------
   Load this CSS file FIRST in any artifact. It declares every
   brand color, font face, and typographic role used across
   the system. Components reference these tokens directly
   (e.g. background: var(--mc-green); font: var(--mc-h1);).
   ============================================================ */


/* ---------- 1. Type faces --------------------------------- */

@font-face { font-family:"Poppins"; src:url("fonts/Poppins-Thin.ttf")        format("truetype"); font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("fonts/Poppins-ExtraLight.ttf")  format("truetype"); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("fonts/Poppins-Light.ttf")       format("truetype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("fonts/Poppins-Regular.ttf")     format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("fonts/Poppins-Italic.ttf")      format("truetype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("fonts/Poppins-Medium.ttf")      format("truetype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("fonts/Poppins-MediumItalic.ttf")format("truetype"); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("fonts/Poppins-SemiBold.ttf")    format("truetype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("fonts/Poppins-SemiBoldItalic.ttf") format("truetype"); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("fonts/Poppins-Bold.ttf")        format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("fonts/Poppins-BoldItalic.ttf")  format("truetype"); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("fonts/Poppins-ExtraBold.ttf")   format("truetype"); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:"Poppins"; src:url("fonts/Poppins-Black.ttf")       format("truetype"); font-weight:900; font-style:normal; font-display:swap; }


/* ---------- 2. Tokens ------------------------------------- */

:root {
  /* --- Brand palette (the four official colors) ------------ */
  --mc-navy:    #001F3E;   /* primary ink, headlines, dark sections   */
  --mc-green:   #74C365;   /* brand mark, accents, primary action     */
  --mc-cream:   #F6F8ED;   /* light surface, off-white "paper"        */
  --mc-white:   #FFFFFF;

  /* --- Extended neutrals (derived from navy) --------------- */
  --mc-ink:        #001F3E;
  --mc-ink-2:      #2A3C53;   /* secondary text on light bg          */
  --mc-ink-3:      #5C6A7A;   /* tertiary / metadata                 */
  --mc-line:       #DDE3D7;   /* hairline on cream                   */
  --mc-line-2:     #E8EBDF;   /* softer divider                      */
  --mc-line-navy:  #173559;   /* hairline on navy surfaces           */

  /* --- Extended greens (mood + chart) ---------------------- */
  --mc-green-mint:    #94E690;   /* brighter accent (kv2, t-shirt)   */
  --mc-green-deep:    #316451;   /* darker teal-green (kv gradient)  */
  --mc-green-forest:  #153F3E;   /* deepest gradient stop            */
  --mc-green-soft:    #DCEED4;   /* tinted background block          */

  /* --- Semantic surface roles ------------------------------ */
  --mc-bg:          var(--mc-cream);
  --mc-surface:     #FFFFFF;
  --mc-surface-alt: #ECEFE0;            /* slightly darker cream     */
  --mc-bg-dark:     var(--mc-navy);
  --mc-fg:          var(--mc-navy);
  --mc-fg-on-dark:  var(--mc-cream);
  --mc-fg-2:        var(--mc-ink-2);
  --mc-fg-3:        var(--mc-ink-3);

  /* --- Status colors (kept restrained, navy/green family) -- */
  --mc-success: #2E9E54;
  --mc-warning: #D9A441;
  --mc-danger:  #C2433A;
  --mc-info:    #3C7BC4;

  /* --- Type family ----------------------------------------- */
  --mc-font-family: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Type role tokens (font-weight | size / line-height) -
        Use as `font: var(--mc-h1)` then add family separately,
        OR reference --mc-fs-* and --mc-lh-* individually.    */

  --mc-fs-display: clamp(56px, 6vw, 96px);
  --mc-fs-h1:      clamp(40px, 4vw, 64px);
  --mc-fs-h2:      clamp(30px, 3vw, 44px);
  --mc-fs-h3:      24px;
  --mc-fs-h4:      18px;
  --mc-fs-body:    16px;
  --mc-fs-small:   14px;
  --mc-fs-micro:   12px;
  --mc-fs-eyebrow: 12px;

  --mc-lh-tight:   1.05;
  --mc-lh-snug:    1.18;
  --mc-lh-normal:  1.45;
  --mc-lh-relaxed: 1.6;

  --mc-tracking-display: -0.02em;
  --mc-tracking-tight:   -0.01em;
  --mc-tracking-eyebrow:  0.08em;

  /* --- Shape, spacing, motion (kept here for one-stop import) */
  --mc-radius-xs: 6px;
  --mc-radius-sm: 10px;
  --mc-radius-md: 16px;
  --mc-radius-lg: 22px;
  --mc-radius-xl: 32px;
  /* "Squircle" / superellipse, mirrors the logo container.
     Apply with: border-radius: var(--mc-radius-squircle);
     For a TRUE superellipse use the SVG mask in `assets/squircle.svg`. */
  --mc-radius-squircle: 30% / 28%;

  --mc-space-1: 4px;
  --mc-space-2: 8px;
  --mc-space-3: 12px;
  --mc-space-4: 16px;
  --mc-space-5: 24px;
  --mc-space-6: 32px;
  --mc-space-7: 48px;
  --mc-space-8: 64px;
  --mc-space-9: 96px;

  --mc-shadow-sm: 0 1px 2px rgba(0,31,62,.06), 0 1px 1px rgba(0,31,62,.04);
  --mc-shadow-md: 0 8px 24px -8px rgba(0,31,62,.18), 0 2px 6px rgba(0,31,62,.06);
  --mc-shadow-lg: 0 24px 60px -20px rgba(0,31,62,.28), 0 8px 18px rgba(0,31,62,.08);
  --mc-shadow-green: 0 18px 40px -16px rgba(116,195,101,.55);

  --mc-ease:        cubic-bezier(.2,.7,.2,1);
  --mc-ease-out:    cubic-bezier(.16,.84,.32,1);
  --mc-dur-fast:    140ms;
  --mc-dur-normal:  240ms;
  --mc-dur-slow:    420ms;
}


/* ---------- 3. Base element styles ------------------------ */
/*    Importing this file applies sensible defaults to the
      document. Wrap a section in `.mc-on-dark` to flip
      foreground colors for navy backgrounds.                */

html, body {
  font-family: var(--mc-font-family);
  color: var(--mc-fg);
  background: var(--mc-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { font-size: var(--mc-fs-body); line-height: var(--mc-lh-normal); }

h1, .mc-h1 {
  font-family: var(--mc-font-family);
  font-weight: 700;
  font-size: var(--mc-fs-h1);
  line-height: var(--mc-lh-tight);
  letter-spacing: var(--mc-tracking-tight);
  color: var(--mc-fg);
  text-wrap: balance;
  margin: 0;
}

h2, .mc-h2 {
  font-family: var(--mc-font-family);
  font-weight: 700;
  font-size: var(--mc-fs-h2);
  line-height: var(--mc-lh-snug);
  letter-spacing: var(--mc-tracking-tight);
  color: var(--mc-fg);
  text-wrap: balance;
  margin: 0;
}

h3, .mc-h3 {
  font-family: var(--mc-font-family);
  font-weight: 600;
  font-size: var(--mc-fs-h3);
  line-height: var(--mc-lh-snug);
  color: var(--mc-fg);
  margin: 0;
}

h4, .mc-h4 {
  font-family: var(--mc-font-family);
  font-weight: 600;
  font-size: var(--mc-fs-h4);
  line-height: var(--mc-lh-snug);
  color: var(--mc-fg);
  margin: 0;
}

p, .mc-p {
  font-family: var(--mc-font-family);
  font-weight: 400;
  font-size: var(--mc-fs-body);
  line-height: var(--mc-lh-relaxed);
  color: var(--mc-fg-2);
  text-wrap: pretty;
  margin: 0;
}

small, .mc-small {
  font-family: var(--mc-font-family);
  font-weight: 400;
  font-size: var(--mc-fs-small);
  line-height: var(--mc-lh-normal);
  color: var(--mc-fg-3);
}

.mc-display {
  font-family: var(--mc-font-family);
  font-weight: 700;
  font-size: var(--mc-fs-display);
  line-height: var(--mc-lh-tight);
  letter-spacing: var(--mc-tracking-display);
  color: var(--mc-fg);
  text-wrap: balance;
}

.mc-eyebrow {
  font-family: var(--mc-font-family);
  font-weight: 600;
  font-size: var(--mc-fs-eyebrow);
  letter-spacing: var(--mc-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mc-fg-3);
}

/* On-dark variant flips ink colors for navy sections */
.mc-on-dark, .mc-on-dark p, .mc-on-dark small, .mc-on-dark .mc-p {
  color: var(--mc-fg-on-dark);
}
.mc-on-dark h1, .mc-on-dark h2, .mc-on-dark h3, .mc-on-dark h4,
.mc-on-dark .mc-h1, .mc-on-dark .mc-h2, .mc-on-dark .mc-h3, .mc-on-dark .mc-h4,
.mc-on-dark .mc-display { color: #FFFFFF; }
.mc-on-dark .mc-eyebrow { color: var(--mc-green-mint); }

/* The signature squircle container. Apply to any square element to
   clip it into the brand's superellipse shape. Uses CSS mask (with
   alpha mode forced for cross-browser reliability) and falls back
   to a tight border-radius if the SVG mask fails to load. */
.mc-squircle {
  aspect-ratio: 1;
  border-radius: 22%;
  -webkit-mask-image: url("assets/squircle.svg");
          mask-image: url("assets/squircle.svg");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
}