/* Saulera Design System — Colors & Typography */

:root {
  /* ============================================
     COLORS — Sunrise Palette
     ============================================ */

  /* Anchors */
  --color-deep-ocean: #264653;
  --color-amber:      #F59E0B;
  --color-amber-hov:  #D98708;
  --color-amber-act:  #B97208;
  --color-teal:       #2A7E8F;

  /* Legacy aliases — retained for back-compat; map to new palette */
  --color-black:      var(--color-deep-ocean);
  --color-vermillion: var(--color-amber);

  /* Backgrounds & Surfaces */
  --color-stone: #EAE6DE;
  --color-cream: #F4F1EA;
  --color-grey-border: #C8C0B0;
  --color-grey-mid: #5A5A5A;

  /* Semantic Colors */
  --color-fg-primary: var(--color-deep-ocean);
  --color-fg-secondary: var(--color-grey-mid);
  --color-fg-muted: var(--color-grey-border);
  --color-bg-default: var(--color-stone);
  --color-bg-surface: var(--color-cream);
  --color-signal-primary: var(--color-amber);
  --color-signal-secondary: var(--color-teal);
  --color-border: var(--color-grey-border);

  /* ============================================
     TYPOGRAPHY — Homizio Medium / Montserrat Ace Light
     ============================================ */

  /* Font Families */
  --font-display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type Scale */
  --type-display-size: 56px;
  --type-display-line: 64px;
  --type-h2-size: 32px;
  --type-h2-line: 40px;
  --type-body-size: 17px;
  --type-body-line: 26px;
  --type-caption-size: 14px;
  --type-caption-line: 22px;

  /* ============================================
     SPACING SCALE
     ============================================ */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;

  /* ============================================
     RADIUS & ELEVATION
     ============================================ */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;

  --shadow-sm: 0 1px 2px rgba(38, 70, 83, 0.06);
  --shadow-md: 0 4px 6px rgba(38, 70, 83, 0.09);
  --shadow-lg: 0 10px 15px rgba(38, 70, 83, 0.12);
}

/* ============================================
   GLOBAL STYLES
   ============================================ */

html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-fg-primary);
  background-color: var(--color-bg-default);
}

body {
  margin: 0;
  padding: 0;
}

/* ============================================
   TYPOGRAPHY SEMANTICS
   ============================================ */

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--type-display-size);
  line-height: var(--type-display-line);
  font-weight: 300;
  margin: 0;
  letter-spacing: 2px;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  font-weight: 300;
  margin: 0;
  letter-spacing: 2px;
}

/* Buttons — Homizio Medium, uppercase */
button, .btn {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: 400;
  margin: 0;
}

.caption {
  font-family: var(--font-body);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  font-weight: 400;
  color: var(--color-fg-secondary);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-primary {
  color: var(--color-fg-primary);
}

.text-secondary {
  color: var(--color-fg-secondary);
}

.text-signal {
  color: var(--color-signal-primary);
}

.text-teal {
  color: var(--color-signal-secondary);
}

.bg-black {
  background-color: var(--color-black);
}

.bg-stone {
  background-color: var(--color-stone);
}

.bg-cream {
  background-color: var(--color-cream);
}

.bg-vermillion {
  background-color: var(--color-vermillion);
}

.bg-teal {
  background-color: var(--color-signal-secondary);
}