/* Coruscate Studio shared theme */

:root {
  --color-background: #0a101d;
  --color-scaffolding-background: #0a101d;
  --color-surface: #0f172a;
  --color-text: #f8fafc;
  --color-text-muted: #cccccc;
  --color-primary: gold;
  --color-primary-muted: #14532d;
  --color-border: #334155;
  --color-error: #f87171;
  --color-inactive: #94a3b8;
  --color-star: gold;
  --color-star-empty: #94a3b8;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --font-title-size: 28px;
  --font-title-weight: 700;

  --font-subtitle-size: 20px;
  --font-subtitle-weight: 600;

  --font-section-title-size: 22px;
  --font-section-title-weight: 600;

  --font-label-size: 18px;
  --font-label-weight: 600;

  --font-body-size: 18px;
  --font-body-weight: 400;

  --font-body-large-size: 22px;
  --font-body-large-weight: 400;

  --font-caption-size: 16px;
  --font-caption-weight: 400;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: sans-serif;
  font-size: var(--font-body-size);
  font-weight: var(--font-body-weight);
  color: var(--color-text);
  background-color: var(--color-background);
  padding: var(--space-xl);
}

.page-shell {
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  color: var(--color-text);
  padding: 0 0 var(--space-xl) 0;
}

.page-header {
  margin-bottom: var(--space-xl);
}

.page-title {
  font-size: var(--font-title-size);
  font-weight: var(--font-title-weight);
  color: var(--color-text);
}

.page-subtitle {
  font-size: var(--font-subtitle-size);
  font-weight: var(--font-subtitle-weight);
  color: var(--color-text);
}

.section-title {
  font-size: var(--font-section-title-size);
  font-weight: var(--font-section-title-weight);
  margin-top: var(--space-xxl);
  margin-bottom: var(--space-sm);
}

.sub-section-title {
  font-size: var(--font-subtitle-size);
  font-weight: var(--font-subtitle-weight);
  margin-top: var(--space-xxl);
  margin-bottom: var(--space-sm);
}

a {
  color: var(--color-primary);
  text-decoration: underline;
}

a:hover {
  text-decoration: underline;
}