/* Hookd Color Palette
 * 
 * This file documents the official color palette for the Hookd website.
 * All colors should be referenced from this file to maintain consistency.
 */

@import 'nav.css';

:root {
  /* Primary Color Palette */
  --hookd-sand: #C7CFC7;
  --hookd-blue-light: #899AAA;
  --hookd-blue-med: #70859F;
  --hookd-red: #DB1C05;
  --hookd-blue-dark: #47607F;
}

/* Utility Classes for Colors */
.text-sand { color: var(--hookd-sand); }
.text-blue-light { color: var(--hookd-blue-light); }
.text-blue-med { color: var(--hookd-blue-med); }
.text-red { color: var(--hookd-red); }
.text-blue-dark { color: var(--hookd-blue-dark); }

.bg-sand { background-color: var(--hookd-sand); }
.bg-blue-light { background-color: var(--hookd-blue-light); }
.bg-blue-med { background-color: var(--hookd-blue-med); }
.bg-red { background-color: var(--hookd-red); }
.bg-blue-dark { background-color: var(--hookd-blue-dark); }

.border-sand { border-color: var(--hookd-sand); }
.border-blue-light { border-color: var(--hookd-blue-light); }
.border-blue-med { border-color: var(--hookd-blue-med); }
.border-red { border-color: var(--hookd-red); }
.border-blue-dark { border-color: var(--hookd-blue-dark); }

/* Hover States */
.hover\:text-sand:hover { color: var(--hookd-sand); }
.hover\:text-blue-light:hover { color: var(--hookd-blue-light); }
.hover\:text-blue-med:hover { color: var(--hookd-blue-med); }
.hover\:text-red:hover { color: var(--hookd-red); }
.hover\:text-blue-dark:hover { color: var(--hookd-blue-dark); }

.hover\:bg-sand:hover { background-color: var(--hookd-sand); }
.hover\:bg-blue-light:hover { background-color: var(--hookd-blue-light); }
.hover\:bg-blue-med:hover { background-color: var(--hookd-blue-med); }
.hover\:bg-red:hover { background-color: var(--hookd-red); }
.hover\:bg-blue-dark:hover { background-color: var(--hookd-blue-dark); }

/* Usage Examples and Documentation */
/*
 * Color Usage Guidelines:
 * 
 * SAND (#C7CFC7): Use for subtle text, backgrounds, and secondary elements
 * BLUE_LIGHT (#899AAA): Use for buttons, links, and interactive elements
 * BLUE_MED (#70859F): Use for headings, important text, and navigation
 * RED (#DB1C05): Use for warnings, errors, and critical information
 * BLUE_DARK (#47607F): Use for primary headings, brand elements, and main navigation
 * 
 * Example usage in HTML:
 * <h1 class="text-blue-dark">Main Heading</h1>
 * <p class="text-blue-med">Important text</p>
 * <button class="bg-blue-light text-white">Action Button</button>
 * <div class="bg-sand">Subtle background</div>
 * <span class="text-red">Warning message</span>
 */