:root {
  /* Color Variables */
  --color-dark: #333333;
  --color-light: #FCFCFB;
  --color-light-purple: #9C94FF;
  --color-medium-purple: #7F59F7;
  --color-dark-purple: #4836C6;
  --color-light-gold: #F6DBA2;
  --color-medium-gold: #F5C660;
  --color-dark-gold: #EFB746;
  --color-light-bg: #F7F8F9;
  --color-dark-bg: var(--color-dark);
  --color-success: #7B9E3A;
  --color-danger: #F17C6B;

  /* Font Variables */
  --font-heading: 'Dongle', sans-serif;          /* For titles and headings */
  --font-body: 'Nata Sans', sans-serif;          /* For body copy and text */
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Font Sizes */
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  --font-size-4xl: 2.25rem;  /* 36px */

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
}

/* Import component styles */
@import "components/buttons.css";
@import "components/navigation.css";
@import "devise_login.css";



/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */