/**
 * Material Design 3 - Complete Style System
 *
 * Main entry point that imports all MD3 CSS modules.
 * Import this file to get the complete MD3 design system.
 *
 * Usage:
 *   <link rel="stylesheet" href="/css/md3/index.css">
 *
 * Or import individual modules as needed:
 *   <link rel="stylesheet" href="/css/md3/tokens.css">
 *   <link rel="stylesheet" href="/css/md3/components/buttons.css">
 */

/* ===== Design Tokens ===== */
/* Color palette, elevation, motion */
@import url('./tokens.css');

/* ===== Typography ===== */
/* Type scale classes */
@import url('./typography.css');

/* ===== Components ===== */
/* Buttons: filled, outlined, text, icon */
@import url('./components/buttons.css');

/* Cards: elevated, stat, list, option */
@import url('./components/cards.css');

/* Text Fields: outlined with floating labels */
@import url('./components/text-fields.css');

/* Chips: filter, input, assist, segmented */
@import url('./components/chips.css');

/* Dialogs: modal with scrim */
@import url('./components/dialogs.css');

/* Navigation Drawer: modal and standard */
@import url('./components/nav-drawer.css');

/* App Bar: top app bar with variants */
@import url('./components/app-bar.css');

/* Select Fields: styled dropdowns */
@import url('./components/select.css');

/* Global Navigation: bottom bar + top bar actions */
@import url('./components/global-nav.css');

/* Navigation Rail: vertical nav for desktop */
@import url('./components/nav-rail.css');


/* ===== Base Styles ===== */
/* Common reset and body styles */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ===== Utility Classes ===== */

/* Text colors */
.text-primary {
  color: var(--md-sys-color-primary);
}

.text-on-primary {
  color: var(--md-sys-color-on-primary);
}

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

.text-on-surface {
  color: var(--md-sys-color-on-surface);
}

.text-on-surface-variant {
  color: var(--md-sys-color-on-surface-variant);
}

.text-error {
  color: var(--md-sys-color-error);
}

/* Background colors */
.bg-surface {
  background-color: var(--md-sys-color-surface);
}

.bg-surface-container {
  background-color: var(--md-sys-color-surface-container);
}

.bg-surface-container-low {
  background-color: var(--md-sys-color-surface-container-low);
}

.bg-surface-container-high {
  background-color: var(--md-sys-color-surface-container-high);
}

.bg-primary-container {
  background-color: var(--md-sys-color-primary-container);
}

.bg-secondary-container {
  background-color: var(--md-sys-color-secondary-container);
}

/* Elevation shadows */
.elevation-0 {
  box-shadow: var(--md-sys-elevation-0);
}

.elevation-1 {
  box-shadow: var(--md-sys-elevation-1);
}

.elevation-2 {
  box-shadow: var(--md-sys-elevation-2);
}

.elevation-3 {
  box-shadow: var(--md-sys-elevation-3);
}

/* Border radius */
.rounded-small {
  border-radius: 4px;
}

.rounded-medium {
  border-radius: 8px;
}

.rounded-large {
  border-radius: 12px;
}

.rounded-extra-large {
  border-radius: 28px;
}

.rounded-full {
  border-radius: 9999px;
}

/* Spacing */
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }

.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }

.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-6 { padding: 24px; }

/* Flex utilities */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-2 {
  gap: 8px;
}

.gap-3 {
  gap: 12px;
}

.gap-4 {
  gap: 16px;
}

/* Text alignment */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* Width utilities */
.w-full {
  width: 100%;
}

.max-w-sm {
  max-width: 400px;
}

.max-w-md {
  max-width: 600px;
}

.max-w-lg {
  max-width: 800px;
}


/* ===== Link Styles ===== */
a {
  color: var(--md-sys-color-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


/* ===== Security Text ===== */
/* Helper for payment security notices */
.security-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 16px;
}

.security-text .material-symbols-outlined {
  font-size: 18px;
}


/* ===== Footer ===== */
/* Page footer styles */
footer {
  text-align: center;
  padding: 16px;
  color: var(--md-sys-color-on-surface-variant);
}

footer a {
  color: var(--md-sys-color-primary);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}