/* Co-mex tokens.css — copied verbatim from Co-mex/tokens/tokens.css so this folder deploys on its own.
   Do not edit here. Re-sync with: cp ../../Co-mex/tokens/tokens.css css/co-mex-tokens.css (then re-add this header). */
/* ============================================================
   Co-mex — tokens.css
   Generated from tokens/dexcom.tokens.json + tokens/synergy.tokens.json.
   Both layers are flattened here. Corporate values are prefixed --dx-,
   event values --syn-. Components must reference these variables only:
   a raw hex in a component file is a bug.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

:root {
  /* --- Dexcom MasterBrand: primary --- */
  --dx-green:            #30AB0D;
  --dx-white:            #FFFFFF;

  /* --- Dexcom MasterBrand: secondary --- */
  --dx-subtle-gray:      #F6F6F6;
  --dx-cool-gray:        #D9D6D6;
  --dx-mid-gray:         #808285;
  --dx-bold-gray:        #434141;
  --dx-contrast-green:   #137D00;

  /* --- Dexcom expressive palette: photography & illustration ONLY --- */
  --dx-x-green-mid:      #61CC45;
  --dx-x-green-light:    #BCEDAF;
  --dx-x-blue:           #538BD8;
  --dx-x-blue-mid:       #9CB9E6;
  --dx-x-blue-light:     #DBE8F7;
  --dx-x-orange:         #FF671D;
  --dx-x-orange-mid:     #FFB28C;
  --dx-x-orange-light:   #FFD9B2;

  /* --- Synergy 2027 semantic layer --- */
  --syn-ink:             var(--dx-bold-gray);
  --syn-accent:          var(--dx-green);
  --syn-accent-hover:    #258A09;
  --syn-on-accent:       var(--dx-white);
  --syn-panel:           var(--dx-white);
  --syn-wedge:           #EDEDED;
  --syn-surface:         var(--dx-white);
  --syn-surface-muted:   #F9FAFB;
  --syn-tint:            #E8F7E3;
  --syn-border:          #E5E7EB;
  --syn-body:            #374151;
  --syn-muted:           #6B7280;

  /* --- Type --- */
  --syn-font:            'Montserrat', 'Gilroy', 'Helvetica Neue', Arial, sans-serif;
  --syn-font-office:     Arial, Helvetica, sans-serif;

  --syn-fs-display:      clamp(38px, 6.5vw, 70px);
  --syn-fs-h1:           clamp(28px, 5vw, 50px);
  --syn-fs-h2:           clamp(24px, 4vw, 34px);
  --syn-fs-h3:           21px;
  --syn-fs-h4:           19px;
  --syn-fs-quote:        clamp(20px, 3vw, 28px);
  --syn-fs-lead:         18px;
  --syn-fs-body:         16px;
  --syn-fs-body-sm:      14.5px;
  --syn-fs-label:        11.5px;
  --syn-fs-caption:      12.5px;

  --syn-lh-display:      1.05;
  --syn-lh-heading:      1.18;
  --syn-lh-body:         1.72;
  --syn-lh-tight:        1.5;

  --syn-ls-display:      -0.02em;
  --syn-ls-heading:      -0.01em;
  --syn-ls-label:        0.14em;
  --syn-ls-button:       0.08em;
  --syn-ls-nav:          0.07em;

  /* --- Space --- */
  --syn-space-1:  4px;
  --syn-space-2:  8px;
  --syn-space-3:  12px;
  --syn-space-4:  16px;
  --syn-space-5:  20px;
  --syn-space-6:  24px;
  --syn-space-8:  32px;
  --syn-space-10: 40px;
  --syn-space-13: 52px;
  --syn-space-18: 72px;
  --syn-space-20: 80px;

  /* --- Layout --- */
  --syn-max:       1100px;
  --syn-content:   780px;
  --syn-gutter:    24px;
  --syn-nav-h:     110px;

  /* --- Shape --- */
  --syn-radius-button: 6px;
  --syn-radius-card:   10px;
  --syn-radius-pill:   20px;

  --syn-shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --syn-shadow-md:  0 4px 16px rgba(0,0,0,.10);
  --syn-shadow-nav: 0 2px 12px rgba(0,0,0,.18);

  /* --- Motion --- */
  --syn-fast: 150ms;
  --syn-base: 180ms;
  --syn-slow: 550ms;

  /* --- Key visual geometry (see rules.md) --- */
  --syn-seam-top:     84%;
  --syn-seam-bottom:  27.5%;
  --syn-wedge-offset: 20%;
}

@media (max-width: 700px) {
  :root { --syn-nav-h: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --syn-fast: 0ms; --syn-base: 0ms; --syn-slow: 0ms; }
}

/* ------------------------------------------------------------
   Base reset + type defaults. Import this file first, then your
   component CSS.
   ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--syn-font);
  font-size: var(--syn-fs-body);
  line-height: var(--syn-lh-body);
  color: var(--syn-body);
  background: var(--syn-surface);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
ul { list-style: none; }

.syn-container         { max-width: var(--syn-max);     margin: 0 auto; padding: 0 var(--syn-gutter); }
.syn-container--narrow { max-width: var(--syn-content); margin: 0 auto; padding: 0 var(--syn-gutter); }
.syn-section           { padding: var(--syn-space-18) 0; }

@media (max-width: 700px) {
  .syn-section { padding: var(--syn-space-13) 0; }
}