/* 
  BELUGA GLOBAL THEME
  -------------------
  This file is dynamically served by server.ts.
  Values marked with [TOKEN] are replaced at runtime with data from Builder.io.
  
  Understandable and maintainable by humans.
*/

:root {
  /* Typography */
  --beluga-font-heading: TTRamillas, serif;
  --beluga-font-body: Belfast Grotesk, sans-serif;

  /* Brand Colors */
  --beluga-color-primary: #1C0445;
  --beluga-color-secondary: #FFFFFF;
  --beluga-color-accent: #FFD100;
  --beluga-color-info: #0C6FF9;
  --beluga-color-muted: #F2F0EF;
  --beluga-color-surface: #FCFCFC;

  /* UI States */
  --beluga-disabled-text: #A0A0A0;
  --beluga-disabled-bg: #E5E5E5;

  /* Spacing & Radius */
  --beluga-radius-button: 37px;
  --beluga-radius-input: 8px;

  /* Transitions */
  --beluga-transition-fast: all 0.2s ease;

  /* Typography Sizes & Weights */
  --beluga-h1-size: 3.2rem;
  --beluga-h1-weight: 700;
  --beluga-h1-line-height: 1.1;
  
  --beluga-h2-size: 2.4rem;
  --beluga-h2-weight: 700;
  --beluga-h2-line-height: 1.15;
  
  --beluga-h3-size: 2.25rem;
  --beluga-h3-weight: 700;
  --beluga-h3-line-height: 1.2;

  --beluga-body-size: 1rem;
  --beluga-body-weight: 400;
  --beluga-body-line-height: 1.7;

  /* Color Palette */
  --beluga-violet: #9C66FD;
  --beluga-rose: #F12E70;
  --beluga-blush: #FFA2B8;
  --beluga-peach: #FDBFA2;
  --beluga-magenta: #E700FF;
  --beluga-purple: #AE1ED8;
  --beluga-indigo: #331C9D;
  --beluga-coral: #FC707D;
  --beluga-pink: #FF2EAF;
  --beluga-blue: #2E58FF;
  --beluga-hubspot-yellow: #FCD100;

  /* Additional Typography */
  --beluga-paragraph-font-size: 1rem;
  --beluga-paragraph-line-height: 1.7;
  --beluga-small-font-size: 0.875rem;
  --beluga-small-line-height: 1.7;
  --beluga-label-color: #1C0445;
}

/* Prose Overrides */
.prose {
  font-family: var(--beluga-font-body) !important;
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: var(--beluga-font-heading) !important;
}

/* Base Styles */
body::after {
  content: "Theme Loaded";
  display: none;
}

body {
  color: #1C0445;
  font-family: var(--beluga-font-body);
  font-size: var(--beluga-body-size);
  line-height: var(--beluga-body-line-height);
  font-weight: var(--beluga-body-weight);
}

h1 {
  font-family: var(--beluga-font-heading);
  font-size: var(--beluga-h1-size);
  line-height: var(--beluga-h1-line-height);
  font-weight: var(--beluga-h1-weight);
}

h2 {
  font-family: var(--beluga-font-heading);
  font-size: var(--beluga-h2-size);
  line-height: var(--beluga-h2-line-height);
  font-weight: var(--beluga-h2-weight);
}

h3 {
  font-family: var(--beluga-font-heading);
  font-size: var(--beluga-h3-size);
  line-height: var(--beluga-h3-line-height);
  font-weight: var(--beluga-h3-weight);
}

h4 {
  font-size: 1.875rem;
  line-height: 1.25;
  font-weight: 700;
}

h5 {
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 700;
}

h6 {
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 700;
}

a {
  color: #1C0445;
  text-decoration: none;
  transition: var(--beluga-transition-fast);
}

a:hover {
  color: #FFD100;
}

button,
.button,
[role="button"] {
  font-family: Belfast Grotesk, sans-serif;
  font-weight: 600;
  background: #1C0445;
  color: #FFFFFF;
  border: 1px solid #1C0445;
  border-radius: var(--beluga-radius-button);
  padding: 12px 24px 12px 24px;
  transition: var(--beluga-transition-fast);
  cursor: pointer;
}

input,
textarea,
select {
  border-radius: var(--beluga-radius-input);
  padding: 8px 12px;
}

input {
  color: #1C0445;
  border: 1px solid #1C0445;
  background: #FFFFFF;
}

textarea {
  color: #1C0445;
  border: 1px solid #1C0445;
  background: #FFFFFF;
}

select {
  color: #1C0445;
  border: 1px solid #1C0445;
  background: #FFFFFF;
}