/**
 * Material Design 3 - Design Tokens
 *
 * This file contains all CSS custom properties (design tokens) for MD3.
 * Includes color system, elevation shadows, and motion tokens.
 *
 * Color scheme generated from coffee brown primary #6F4E37
 */

:root {
  /* ===== Primary Color Palette ===== */
  --md-sys-color-primary: #8B5A2B;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FFDCC2;
  --md-sys-color-on-primary-container: #2E1500;

  /* ===== Secondary Color Palette ===== */
  --md-sys-color-secondary: #755846;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #FFDCC2;
  --md-sys-color-on-secondary-container: #2B1708;

  /* ===== Tertiary Color Palette ===== */
  --md-sys-color-tertiary: #606134;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #E6E6AD;
  --md-sys-color-on-tertiary-container: #1C1D00;

  /* ===== Surface Tones ===== */
  --md-sys-color-surface: #FFFBFF;
  --md-sys-color-surface-dim: #E2D9D4;
  --md-sys-color-surface-bright: #FFFBFF;
  --md-sys-color-surface-variant: #F3DFD2;
  --md-sys-color-on-surface: #201A17;
  --md-sys-color-on-surface-variant: #52443C;

  /* ===== Surface Container Tones ===== */
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #FEF1EA;
  --md-sys-color-surface-container: #F8EBE4;
  --md-sys-color-surface-container-high: #F2E5DE;
  --md-sys-color-surface-container-highest: #EDE0D9;

  /* ===== Outline Colors ===== */
  --md-sys-color-outline: #85746B;
  --md-sys-color-outline-variant: #D7C3B8;

  /* ===== Error Colors ===== */
  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;

  /* ===== Success Colors (Custom Extension) ===== */
  --md-sys-color-success: #386A20;
  --md-sys-color-on-success: #FFFFFF;
  --md-sys-color-success-container: #B8F397;

  /* ===== Elevation Shadows ===== */
  /* Level 0: No elevation */
  --md-sys-elevation-0: none;

  /* Level 1: Cards, elevated buttons */
  --md-sys-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);

  /* Level 2: App bars, search bars */
  --md-sys-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);

  /* Level 3: Dialogs, FABs */
  --md-sys-elevation-3: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);

  /* ===== Motion Durations ===== */
  --md-sys-motion-duration-short: 150ms;
  --md-sys-motion-duration-medium: 300ms;
  --md-sys-motion-duration-long: 500ms;

  /* ===== Motion Easing Curves ===== */
  /* Standard easing for most transitions */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Emphasized easing for important transitions */
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);

  /* Decelerate easing for entering elements */
  --md-sys-motion-easing-decelerate: cubic-bezier(0, 0, 0, 1);

  /* ===== State Layer Opacities ===== */
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.12;
  --md-sys-state-pressed-opacity: 0.12;
  --md-sys-state-dragged-opacity: 0.16;
  --md-sys-state-disabled-opacity: 0.38;
  --md-sys-state-disabled-container-opacity: 0.12;
}