/* ==========================================================================
   mc2i Design System — colors & type tokens
   Source: Figma DESIGN SYSTEM.2026.fig
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap');

/* Brand-uploaded Lato fonts (self-hosted) */
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 100; font-display: swap; src: url('../assets/fonts/Lato-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 100; font-display: swap; src: url('../assets/fonts/Lato-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url('../assets/fonts/Lato-Light.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 300; font-display: swap; src: url('../assets/fonts/Lato-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/Lato-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: swap; src: url('../assets/fonts/Lato-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/Lato-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 700; font-display: swap; src: url('../assets/fonts/Lato-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-style: normal; font-weight: 900; font-display: swap; src: url('../assets/fonts/Lato-Black.ttf') format('truetype'); }
@font-face { font-family: 'Lato'; font-style: italic; font-weight: 900; font-display: swap; src: url('../assets/fonts/Lato-BlackItalic.ttf') format('truetype'); }

:root {
  /* ---- PRIMARY (blue) ------------------------------------------------ */
  --primary-0:  #C7EDFF;
  --primary-1:  #9FD3EC;
  --primary-2:  #77B9D8;
  --primary-3:  #509EC5;
  --primary-4:  #2884B1;
  --primary-5:  #006A9E;   /* brand anchor — the "mc" in the logo */
  --primary-6:  #00557E;
  --primary-7:  #00405F;
  --primary-8:  #002A3F;
  --primary-9:  #001520;

  /* ---- SECONDARY (magenta / pink) ------------------------------------ */
  --secondary-0: #FFEAF3;
  --secondary-1: #F8CCDF;
  --secondary-2: #F199CA;
  --secondary-3: #EA66B4;
  --secondary-4: #E3349F;
  --secondary-5: #DD0061;   /* brand anchor — the "2i" in the logo */
  --secondary-6: #B00050;
  --secondary-7: #84003D;
  --secondary-8: #580029;
  --secondary-9: #2C0014;

  /* ---- TERTIARY scales (accent / data-viz) --------------------------- */
  --tertiary-indigo-5:  #170B8F;
  --tertiary-indigo-3:  #6A5EC2;
  --tertiary-indigo-1:  #CCC7FB;

  --tertiary-teal-5:    #004D4D;
  --tertiary-teal-3:    #4FA3A3;   /* used for focus rings */
  --tertiary-teal-1:    #CCF5F5;

  --tertiary-steel-5:   #002D4D;
  --tertiary-steel-3:   #4A7A99;
  --tertiary-steel-1:   #C7DDEF;

  --tertiary-aqua-5:    #0D5F73;
  --tertiary-aqua-3:    #5EA6B8;
  --tertiary-aqua-1:    #D5EEF3;

  /* ---- NEUTRAL (greyscale) ------------------------------------------- */
  --neutral-0:   #FFFFFF;
  --neutral-05:  #FAFAFA;
  --neutral-1:   #F5F5F5;
  --neutral-2:   #E4E5E6;
  --neutral-3:   #B9B9B9;
  --neutral-4:   #8B8B8B;
  --neutral-5:   #626B6E;
  --neutral-6:   #484C4D;
  --neutral-7:   #2E2F30;
  --neutral-8:   #222221;
  --neutral-9:   #181A1A;

  /* ---- SEMANTIC ------------------------------------------------------- */
  --success-0:   #D2FFB0;
  --success-3:   #4EA64E;
  --success-5:   #007D00;
  --success-7:   #003F00;

  --warning-0:   #FFF3D2;
  --warning-3:   #DBB24D;
  --warning-5:   #B37C00;
  --warning-7:   #664700;

  --error-0:     #FFD6CC;
  --error-3:     #D46652;
  --error-5:     #B3260E;
  --error-7:     #5C1307;

  --info-0:      #E8DEF8;
  --info-3:      #8F7AC6;
  --info-5:      #65558F;
  --info-7:      #332B48;

  /* ---- SEMANTIC SURFACES --------------------------------------------- */
  --bg:                 var(--neutral-0);
  --bg-subtle:          var(--neutral-05);
  --bg-muted:           var(--neutral-1);
  --surface-card:       var(--neutral-0);
  --surface-overlay:    var(--neutral-0);
  --border:             var(--neutral-2);
  --border-strong:      var(--neutral-3);
  --divider:            #EBEBEB;

  /* ---- TEXT ---------------------------------------------------------- */
  --text-primary:       var(--neutral-9);     /* titles */
  --text-default:       var(--neutral-8);     /* body */
  --text-secondary:     var(--neutral-6);     /* captions, meta */
  --text-disabled:      var(--neutral-4);
  --text-light:         var(--neutral-0);     /* on dark / on brand */
  --text-link:          var(--primary-5);
  --text-link-hover:    var(--primary-6);

  --text-on-primary:    #FFFFFF;
  --text-on-secondary:  #FFFFFF;
  --text-on-error:      #FFFFFF;
  --text-on-warning:    #3A2600;
  --text-on-success:    #FFFFFF;
  --text-on-info:       #FFFFFF;

  --text-warning:       var(--warning-5);
  --text-error:         var(--error-5);
  --text-success:       var(--success-5);
  --text-info:          var(--info-5);

  --text-focused:       var(--tertiary-teal-5);
  --text-container-selected: var(--primary-7);

  /* ---- RADIUS -------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-s:    8px;
  --radius-m:    12px;
  --radius-md:   16px;
  --radius-l:    24px;
  --radius-xl:   32px;
  --radius-2xl:  40px;
  --radius-pill: 9999px;

  /* ---- SPACING (8pt grid) -------------------------------------------- */
  --space-2xs:   2px;
  --space-xs:    4px;
  --space-s:     8px;
  --space-m:     16px;
  --space-l:     24px;
  --space-xl:    32px;
  --space-2xl:   40px;
  --space-3xl:   64px;

  /* ---- STROKES ------------------------------------------------------- */
  --stroke-xs:   1px;
  --stroke-s:    2px;

  /* ---- ELEVATION ---------------------------------------------------- */
  --elevation-1: 0 1px 2px rgba(0,42,63,.06);
  --elevation-2: 0 2px 4px rgba(0,42,63,.08), 0 1px 2px rgba(0,42,63,.04);
  --elevation-3: 0 4px 8px rgba(0,42,63,.10), 0 2px 4px rgba(0,42,63,.06);
  --elevation-4: 0 8px 16px rgba(0,42,63,.12), 0 4px 8px rgba(0,42,63,.08);
  --elevation-5: 0 16px 32px rgba(0,42,63,.14), 0 8px 16px rgba(0,42,63,.10);

  /* ---- FOCUS RING --------------------------------------------------- */
  --focus-ring: 0 0 0 2px var(--neutral-0), 0 0 0 4px var(--tertiary-teal-3);

  /* ---- TYPOGRAPHY --------------------------------------------------- */
  --font-sans: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Display / heading sizes (from Figma Typography page) */
  --fs-h1: 64px;   --lh-h1: 76px;
  --fs-h2: 56px;   --lh-h2: 68px;
  --fs-h3: 48px;   --lh-h3: 56px;
  --fs-h4: 40px;   --lh-h4: 48px;
  --fs-h5: 32px;   --lh-h5: 40px;
  --fs-p1: 32px;   --lh-p1: 42px;
  --fs-p2: 24px;   --lh-p2: 32px;
  --fs-p3: 20px;   --lh-p3: 28px;
  --fs-p4: 18px;   --lh-p4: 24px;
  --fs-p5: 14px;   --lh-p5: 20px;
  --fs-caption: 12px; --lh-caption: 16px;
  --fs-micro:   10px; --lh-micro: 14px;

  --tracking-display: 2px;     /* mc2i display signature */
  --tracking-body:    0px;
  --tracking-caps:    0.08em;

  --weight-regular: 400;
  --weight-bold:    700;
  --weight-black:   900;
}

/* ==========================================================================
   SEMANTIC TYPE CLASSES
   ========================================================================== */
html, body {
  font-family: var(--font-sans);
  color: var(--text-default);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ds-h1, h1.ds { font: var(--weight-bold) var(--fs-h1)/var(--lh-h1) var(--font-sans); letter-spacing: var(--tracking-display); color: var(--text-primary); margin: 0; }
.ds-h2, h2.ds { font: var(--weight-bold) var(--fs-h2)/var(--lh-h2) var(--font-sans); letter-spacing: var(--tracking-display); color: var(--text-primary); margin: 0; }
.ds-h3, h3.ds { font: var(--weight-bold) var(--fs-h3)/var(--lh-h3) var(--font-sans); letter-spacing: var(--tracking-display); color: var(--text-primary); margin: 0; }
.ds-h4, h4.ds { font: var(--weight-bold) var(--fs-h4)/var(--lh-h4) var(--font-sans); letter-spacing: var(--tracking-display); color: var(--text-primary); margin: 0; }
.ds-h5, h5.ds { font: var(--weight-bold) var(--fs-h5)/var(--lh-h5) var(--font-sans); letter-spacing: var(--tracking-display); color: var(--text-primary); margin: 0; }

.ds-p1 { font: var(--weight-regular) var(--fs-p1)/var(--lh-p1) var(--font-sans); color: var(--text-default); margin: 0; }
.ds-p2 { font: var(--weight-regular) var(--fs-p2)/var(--lh-p2) var(--font-sans); color: var(--text-default); margin: 0; }
.ds-p3 { font: var(--weight-regular) var(--fs-p3)/var(--lh-p3) var(--font-sans); color: var(--text-default); margin: 0; }
.ds-p4, p.ds { font: var(--weight-regular) var(--fs-p4)/var(--lh-p4) var(--font-sans); color: var(--text-default); margin: 0; }
.ds-p5 { font: var(--weight-regular) var(--fs-p5)/var(--lh-p5) var(--font-sans); color: var(--text-default); margin: 0; }
.ds-p-bold { font-weight: var(--weight-bold); }
.ds-caption { font: var(--weight-regular) var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--text-secondary); letter-spacing: var(--tracking-caps); text-transform: uppercase; margin: 0; }

code, pre, .ds-code { font-family: var(--font-mono); font-size: var(--fs-p5); }

a.ds, .ds-link { color: var(--text-link); text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease; }
a.ds:hover, .ds-link:hover { color: var(--text-link-hover); border-bottom-color: currentColor; }