/*
 * 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 maintainability.
 */

@import "components/toasts.css";

/* Test basic Inter font loading */
@font-face {
  font-family: 'Inter';
  src: url("../fonts/Inter/Inter-VariableFont_opsz,wght.ttf") format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url("../fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf") format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Fallback static fonts for older browsers */
@font-face {
  font-family: 'Inter';
  src: url("../fonts/Inter/static/Inter_18pt-Regular.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url("../fonts/Inter/static/Inter_18pt-Medium.ttf") format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url("../fonts/Inter/static/Inter_18pt-SemiBold.ttf") format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url("../fonts/Inter/static/Inter_18pt-Bold.ttf") format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* CSS Custom Properties for Tailwind CSS v4 */
:root {
  --font-inter: 'Inter', Tahoma, Geneva, Verdana, 'Inter', sans-serif;
  --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, 'Inter', sans-serif;
  
  /* Brand Color Palette - Change these values to update the entire app's color scheme */
  --brand-primary: 0 0 128;         /* Navy Blue (#000080) - Main brand color */
  --brand-primary-dark: 0 0 80;     /* Darker Navy - Darker shade for hover states */
  --brand-primary-light: 51 51 179; /* Lighter Navy - Lighter shade for backgrounds */
  
  /* Secondary Colors */
  --brand-secondary: 0 0 255;       /* Cobalt Blue (#0000FF) - Secondary brand color */
  --brand-secondary-dark: 0 0 204;  /* Darker Cobalt - Darker secondary */
  --brand-secondary-light: 102 102 255; /* Lighter Cobalt - Lighter secondary */
  
  /* Accent Colors */
  --brand-accent: 0 0 128;          /* Navy Blue - Accent color for CTAs */
  --brand-accent-dark: 0 0 80;      /* Darker Navy - Darker accent */
  --brand-accent-light: 51 51 179;  /* Lighter Navy - Lighter accent */
  
  /* Success/Positive Colors */
  --brand-success: 34 197 94;       /* Green-500 - Success states */
  --brand-success-dark: 22 163 74;  /* Green-600 - Darker success */
  
  /* Warning Colors */
  --brand-warning: 245 158 11;      /* Amber-500 - Warning states */
  --brand-warning-dark: 217 119 6;  /* Amber-600 - Darker warning */
  
  /* Neutral Colors - Using white and navy variations */
  --brand-gray-50: 255 255 255;     /* White (#FFFFFF) - Very light backgrounds */
  --brand-gray-100: 245 245 255;    /* Very light navy tint - Light backgrounds */
  --brand-gray-200: 230 230 255;    /* Light navy tint - Borders */
  --brand-gray-300: 200 200 230;    /* Medium navy tint - Light text */
  --brand-gray-400: 150 150 200;    /* Medium navy tint - Medium text */
  --brand-gray-500: 100 100 150;    /* Medium navy tint - Default text */
  --brand-gray-600: 75 75 120;      /* Darker navy tint - Dark text */
  --brand-gray-700: 50 50 100;      /* Dark navy tint - Very dark text */
  --brand-gray-800: 25 25 80;       /* Dark navy - Headings */
  --brand-gray-900: 0 0 60;         /* Very dark navy - Very dark headings */
  
  /* Semantic Color Mappings */
  --color-primary: rgb(var(--brand-primary));
  --color-primary-dark: rgb(var(--brand-primary-dark));
  --color-primary-light: rgb(var(--brand-primary-light));
  --color-secondary: rgb(var(--brand-secondary));
  --color-secondary-dark: rgb(var(--brand-secondary-dark));
  --color-secondary-light: rgb(var(--brand-secondary-light));
  --color-accent: rgb(var(--brand-accent));
  --color-accent-dark: rgb(var(--brand-accent-dark));
  --color-accent-light: rgb(var(--brand-accent-light));
  --color-success: rgb(var(--brand-success));
  --color-success-dark: rgb(var(--brand-success-dark));
  --color-warning: rgb(var(--brand-warning));
  --color-warning-dark: rgb(var(--brand-warning-dark));
}

/* Fallback to system fonts if Inter fails to load */
body {
  font-family: 'Inter', Tahoma, Geneva, Verdana, sans-serif;
}

/* Pencil/Sharpie-style underline effect */
.pencil-underline::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(to right, #000080 0%, #000080 70%, transparent 100%);
  border-radius: 6px 2px 2px 6px;
  transform: rotate(-0.3deg);
  opacity: 0.8;
  clip-path: polygon(0 0, 95% 0, 100% 100%, 0 100%);
}