/* elegonn.io — brand palette extracted from the logo
   (gold elephant + teal dragon on purple sunburst). */

:root {
  /* surfaces */
  --color-bg: #1a1230;
  --color-bg-elevated: #251a3f;
  --color-bg-overlay: rgba(26, 18, 48, 0.85);

  /* text */
  --color-fg: #f5e9c8;
  --color-muted: #a394c2;

  /* brand */
  --color-gold: #d4a847;
  --color-gold-bright: #f0c862;
  --color-gold-deep: #8e6b2c;

  /* secondary */
  --color-teal: #2dbfb8;
  --color-teal-bright: #5ee3dd;
  --color-teal-deep: #1a8077;

  /* accent */
  --color-coral: #e07a5f;
  --color-purple: #6b3f96;

  /* gradient — the sunburst feel, used sparingly */
  --gradient-brand: linear-gradient(
    135deg,
    var(--color-purple) 0%,
    var(--color-teal-deep) 50%,
    var(--color-coral) 100%
  );

  /* typography */
  --font-sans:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
    Cantarell, 'Helvetica Neue', sans-serif;
  --font-display:
    'Iowan Old Style', 'Palatino', 'Palatino Linotype', 'Book Antiqua', Georgia,
    serif;
}

* {
  box-sizing: border-box;
}

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

a {
  color: var(--color-teal-bright);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease, color 150ms ease;
}
a:hover {
  color: var(--color-gold-bright);
  border-bottom-color: currentColor;
}

::selection {
  background: var(--color-gold);
  color: var(--color-bg);
}

img {
  max-width: 100%;
  height: auto;
}