:root /* Metrics */ {
  --gut-small: 16px;
  --gut: 16px;
  --column: 400px;
  --code-size: 0.96em;
  --code-line-height: 1.5;
  --area-width: 1232px; /* calc(var(--column) * 3 + 32px); */
}

:root /* Fonts */ {
  /* Sans font */
  --system-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;

  /* Monospace font */
  --system-mono: 'SFMono-Regular', Consolas, Menlo, 'Liberation Mono',
    'Ubuntu Mono', Courier, monospace;

  /* Fonts */
  --body-font: var(--system-sans);
  --heading-font: var(--system-sans);
  --monospace-font: cousine, var(--system-mono);
}

:root /* Base colors */ {
  /* Neutral palette */
  --bg-card: #ffffff;
  --bg-body: #f1f3f5;
  --bg-gray: #f8f9fa;
  --text-mute: #667788;
  --text-body: #334455;
  --text-bold: #111111;

  /* Accent palette */
  --brand-a: #745fb5; /* Indigo */
  --brand-b: #26648e; /* Blue */
  --brand-c: #14af83; /* Teal */

  /* Accent variations */
  --brand-a3: color-mod(var(--brand-a) hue(-20) lightness(+16%));
  --brand-a4: color-mod(var(--brand-a) hue(-10) lightness(+8%));
  --brand-a5: color-mod(var(--brand-a));
  --brand-a6: color-mod(var(--brand-a) hue(+15) lightness(-8%));
  --brand-a7: color-mod(var(--brand-a) hue(+20) lightness(-16%));

  --brand-b3: color-mod(var(--brand-b) hue(-20) lightness(+16%));
  --brand-b4: color-mod(var(--brand-b) hue(-10) lightness(+8%));
  --brand-b5: color-mod(var(--brand-b));
  --brand-b6: color-mod(var(--brand-b) hue(+10) lightness(-8%));
  --brand-b7: color-mod(var(--brand-b) hue(+20) lightness(-16%));

  /* Mute variations */
  --text-mute3: color-mod(var(--text-mute) lightness(+16%));
  --text-mute4: color-mod(var(--text-mute) lightness(+8%));
  --text-mute6: color-mod(var(--text-mute) lightness(-8%));
  --text-mute7: color-mod(var(--text-mute) lightness(-16%));

  /* Line colors */
  --line-color: color-mod(var(--text-mute) alpha(5%));
  --dark-line-color: color-mod(var(--text-mute) alpha(20%));
}

:root /* Gradients */ {
  --brand-a-gradient: linear-gradient(
    5deg,
    var(--brand-a),
    color-mod(var(--brand-a) lightness(+2%) hue(+32))
  );
}

:root /* Shadows */ {
  --shadow2: 0 1px 1px color-mod(var(--text-mute) alpha(55%));

  --shadow3: 0 6px 8px color-mod(var(--text-mute) alpha(3%)),
    0 1px 2px color-mod(var(--text-mute) alpha(30%));

  --shadow6: 0 6px 8px color-mod(var(--text-mute) alpha(3%)),
    0 1px 2px color-mod(var(--text-mute) alpha(30%)),
    0 8px 12px color-mod(var(--brand-b3) alpha(1%));

  /* TODO improve shadow9 */
  --shadow9: 0 6px 8px color-mod(var(--brand-b3) alpha(3%)),
    0 1px 2px color-mod(var(--brand-b3) alpha(30%)),
    0 10px 18px color-mod(var(--brand-b3) alpha(5%));
}

:root /* Modular scale */ {
  --ms-ratio-sm: 1.12;
  --ms-ratio-md: 1.15;
  --ms-ratio-lg: 1.16;
  --ms-base: 14px;
  --ms-base-sm: 13px;
  --ms-base-md: 14px;
  --ms-base-lg: 14px;
}

@custom-media --ms-viewport-md (width > 480px);
@custom-media --ms-viewport-lg (width > 768px);
