@layer reset, base, components, modules, utilities;

:root {
  /* typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-serif: ui-serif, serif;
  --font-mono: ui-monospace, monospace;

  --text-xx-small: 0.55rem;
  --text-x-small: 0.75rem;
  --text-small: 0.85rem;
  --text-normal: 1rem;
  --text-medium: 1.1rem;
  --text-large: 1.5rem;
  --text-x-large: 1.8rem;
  --text-xx-large: 2.5rem;

  @media (max-width: 639px) {
    --text-xx-small: 0.65rem;
    --text-x-small: 0.85rem;
    --text-small: 0.95rem;
    --text-normal: 1.1rem;
    --text-medium: 1.2rem;
    --text-large: 1.5rem;
    --text-x-large: 1.8rem;
    --text-xx-large: 2.5rem;
  }

  /* colors */
  --color-primary: #DC143C;
  --color-primary-hover: #B01030;
  --color-primary-border: #8B0D2A;
  --color-primary-rgb: 220, 20, 60;

  /* crimson palette */
  --color-crimson: #DC143C;
  --color-crimson-dark: #B01030;
  --color-crimson-light: #FF4D6A;
  --color-crimson-accent: #FF8A9A;
  --color-crimson-rgb: 220, 20, 60;

  /* success colors */
  --color-success: #d4edda;
  --color-success-border: #c3e6cb;
  --color-success-text: #155724;
  --color-success-dark: #28a745;
  --color-success-dark-hover: #218838;

  /* warning colors */
  --color-warning: #fff3cd;
  --color-warning-text: #856404;
  --color-warning-rgb: 255, 193, 7;

  /* danger colors */
  --color-danger: #dc3545;
  --color-danger-hover: #bb2d3b;
  --color-danger-light: #f8d7da;
  --color-danger-text: #721c24;

  /* WhatsApp colors */
  --color-whatsapp: #25d366;
  --color-whatsapp-hover: #20ba5a;
  --color-whatsapp-border: #1ea952;

  /* gray scale - light mode */
  --color-gray-100: #f8f9fa;
  --color-gray-200: #e9ecef;
  --color-gray-300: #e0e0e0;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #383d41;
  --color-gray-900: #212529;
  --color-black: #000000;

  /* semantic colors - Light mode */
  --color-link: var(--color-primary);
  --color-muted: var(--color-gray-600);
  --color-border: var(--color-gray-300);
  --color-border-hover: var(--color-gray-500);
  --color-text: var(--color-gray-900);
  --color-text-light: var(--color-gray-600);

  /* background colors - light mode */
  --color-bg: #ffffff;
  --color-bg-light: var(--color-gray-100);
  --color-bg-white: #ffffff;
  --color-bg-secondary: var(--color-gray-200);
  --color-bg-other: #e2e3e5;
  --color-bg-primary: #ffffff;
  --color-bg-tertiary: var(--color-gray-200);
  --color-bg-card: var(--color-gray-100);
  --color-bg-card-alt: var(--color-gray-200);

  /* layout and spacing */
  --inline-space: 1ch;
  --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3));
  --main-width: 1400px;

  /* Appointment state colors - light mode */
  --color-state-cancelled-bg: #e5e5e5;
  --color-state-cancelled-text: #666;
  --color-state-cancelled-border: #999;

  --color-state-pending-bg: #dbeafe;
  --color-state-pending-text: #1e40af;
  --color-state-pending-border: #3b82f6;

  --color-state-confirmed-bg: rgba(var(--color-primary-rgb), 0.3);
  --color-state-confirmed-text: var(--color-text);
  --color-state-confirmed-border: var(--color-primary);

  --color-state-completed-bg: #d1fae5;
  --color-state-completed-text: #065f46;
  --color-state-completed-border: #10b981;

  --color-state-payment-due-bg: #fee2e2;
  --color-state-payment-due-text: #991b1b;
  --color-state-payment-due-border: #ef4444;

  /* accent colors for visualizations */
  --color-accent-green: #22c55e;
  --color-accent-blue: #3b82f6;
  --color-accent-red: #ef4444;
  --color-accent-amber: #f59e0b;
  --color-accent-amber-light: #fffbeb;
  --color-accent-amber-dark: #b45309;
  --color-accent-amber-soft: #fcd34d;

  /* z index */
  --z-popup: 10;
  --z-nav: 1000;
  --z-flash: 1010;
  --z-tooltip: 1020;
  --z-page: 1050;
  --z-modal: 1100;

  /* Focus rings for keyboard navigation */
  --focus-ring-color: var(--color-link);
  --focus-ring-offset: 1px;
  --focus-ring-size: 2px;
  --focus-ring: var(--focus-ring-size) solid var(--focus-ring-color);

  /* dialogs */
  --dialog-duration: 150ms;
}

/* dark theme */
[data-theme="dark"] {
  /* colors: gray scale */
  --color-gray-100: #212529;
  --color-gray-200: #2c3034;
  --color-gray-300: #383d41;
  --color-gray-400: #495057;
  --color-gray-500: #6c757d;
  --color-gray-600: #adb5bd;
  --color-gray-700: #ced4da;
  --color-gray-800: #dee2e6;
  --color-gray-900: #f8f9fa;

  /* Nubank-style dark backgrounds */
  --color-bg-primary: #121212;
  --color-bg-secondary: #1E1E1E;
  --color-bg-tertiary: #2A2A2A;
  --color-bg-card: #2E1A1A;
  --color-bg-card-alt: #3D2525;

  /* semantic colors */
  --color-link: var(--color-crimson-light);
  --color-muted: #9E9E9E;
  --color-border: #2A2A2A;
  --color-border-hover: #3D3D3D;
  --color-text: #FFFFFF;
  --color-text-light: #9E9E9E;

  /* background colors */
  --color-bg-light: #1E1E1E;
  --color-bg-white: #121212;
  --color-bg-other: #2A2A2A;
  --color-bg: #121212;

  /* success colors */
  --color-success: #1e4620;
  --color-success-border: #2d5a2e;
  --color-success-text: #75b798;
  --color-success-rgb: 30, 70, 32;

  /* warning colors */
  --color-warning: #664d03;
  --color-warning-text: #ffda6a;

  /* danger colors */
  --color-danger-light: #58151c;
  --color-danger-text: #ea868f;

  /* Appointment state colors - dark mode */
  --color-state-cancelled-bg: #3a3a3a;
  --color-state-cancelled-text: #aaa;
  --color-state-cancelled-border: #666;

  --color-state-pending-bg: #1e3a5f;
  --color-state-pending-text: #93c5fd;
  --color-state-pending-border: #3b82f6;

  --color-state-confirmed-bg: rgba(var(--color-primary-rgb), 0.3);
  --color-state-confirmed-text: var(--color-text);
  --color-state-confirmed-border: var(--color-primary);

  --color-state-completed-bg: #1e4620;
  --color-state-completed-text: #86efac;
  --color-state-completed-border: #22c55e;

  --color-state-payment-due-bg: #58151c;
  --color-state-payment-due-text: #fca5a5;
  --color-state-payment-due-border: #ef4444;

  /* accent colors for visualizations */
  --color-accent-green: #4ade80;
  --color-accent-blue: #60a5fa;
  --color-accent-red: #f87171;
  --color-accent-amber: #fbbf24;
  --color-accent-amber-light: #422006;
  --color-accent-amber-dark: #fcd34d;
  --color-accent-amber-soft: #d97706;
}