/*
 * Simeron visual theme
 * ====================
 * This is the main file to edit when changing the appearance of the site.
 * Most day-to-day visual changes can be made by editing only the values below.
 *
 * Tip: run ./style-editor.sh and use the visual editor in your browser.
 */

:root {
  --logo-width-header: 300px;
  --logo-width-footer: 170px;
  /* Brand and background colours */
  --color-ink: #071421;
  --color-panel: #0d2235;
  --color-panel-raised: #102a40;
  --color-accent: #66c4e5;
  --color-accent-dark: #2c84b4;
  --color-page: #f5f8fa;
  --color-text-on-dark: #eef5f8;
  --color-text-muted-on-dark: #90a6b5;
  --color-text-muted: #526a7a;
  --color-line: #20384a;
  --color-support-section: #0e6b92;

  /* Typography */
  --font-body: Inter, "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --font-technical: "IBM Plex Mono", Consolas, monospace;
  --font-size-base: 16px;
  --line-height-body: 1.6;
  --heading-letter-spacing: -0.045em;

  /* Layout */
  --content-width: 1200px;
  --page-gutter: 28px;
  --section-spacing: 84px;
  --header-height: 96px;

  /* Shapes and effects */
  --corner-radius: 18px;
  --corner-radius-large: 28px;
  --button-radius: 999px;
  --shadow-main: 0 24px 70px rgba(5, 18, 30, 0.18);
  --shadow-card: 0 12px 35px rgba(20, 53, 72, 0.06);

  /* Animation. Set to 0s to make transitions immediate. */
  --transition-speed: 0.2s;
  --reveal-speed: 0.7s;
}

/* Smaller screens use narrower page gutters and section spacing. */
@media (max-width: 640px) {
  :root {
    --page-gutter: 28px;
    --section-spacing: 84px;
  }
}