/* =============================================================
   HAUT RITUALE — CSS Custom Properties
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&display=swap');

:root {

  /* -----------------------------------------------------------
     Color Palette — Base
     ----------------------------------------------------------- */
  --color-accent:          #a07878;
  --color-accent-light:    #b89090;
  --color-accent-dark:     #876060;
  --color-accent-muted:    #a0787820;
  --color-accent-subtle:   #a0787812;

  /* -----------------------------------------------------------
     Color Palette — Sidebar
     ----------------------------------------------------------- */
  --color-sidebar-bg:       #1a1614;
  --color-sidebar-hover:    #2a2220;
  --color-sidebar-active:   #332826;
  --color-sidebar-border:   #2e2522;
  --color-sidebar-text:     #c8bebe;
  --color-sidebar-text-dim: #7a6e6e;
  --color-sidebar-icon:     #8a7878;

  /* -----------------------------------------------------------
     Color Palette — Main Surface
     ----------------------------------------------------------- */
  --color-bg:               #f7f4f2;
  --color-bg-secondary:     #f0ebe8;
  --color-surface:          #ffffff;
  --color-surface-raised:   #fdfbfa;
  --color-surface-overlay:  rgba(26, 22, 20, 0.45);

  /* -----------------------------------------------------------
     Color Palette — Text
     ----------------------------------------------------------- */
  --color-text-primary:     #1e1816;
  --color-text-secondary:   #5c4f4f;
  --color-text-muted:       #9a8a8a;
  --color-text-disabled:    #c4b8b8;
  --color-text-on-accent:   #ffffff;
  --color-text-on-dark:     #e8e0de;

  /* -----------------------------------------------------------
     Color Palette — Border
     ----------------------------------------------------------- */
  --color-border:           #e2d8d5;
  --color-border-strong:    #c8bab8;
  --color-border-focus:     #a07878;

  /* -----------------------------------------------------------
     Color Palette — Status / Semantic
     ----------------------------------------------------------- */
  --color-success:          #6a9e7f;
  --color-success-bg:       #edf5f0;
  --color-warning:          #c49a4a;
  --color-warning-bg:       #fdf6e8;
  --color-error:            #b85c5c;
  --color-error-bg:         #faeaea;
  --color-info:             #5c7ea0;
  --color-info-bg:          #eaf0f7;

  /* -----------------------------------------------------------
     Color Palette — Appointment Status
     ----------------------------------------------------------- */
  --color-status-pending:   #c49a4a;
  --color-status-confirmed: #5c7ea0;
  --color-status-completed: #6a9e7f;
  --color-status-cancelled: #9a9a9a;
  --color-status-no-show:   #b85c5c;

  /* -----------------------------------------------------------
     Typography — Font Families
     ----------------------------------------------------------- */
  --font-display:  'Cormorant Garamond', 'Georgia', serif;
  --font-body:     'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* -----------------------------------------------------------
     Typography — Font Sizes (fluid scale)
     ----------------------------------------------------------- */
  --text-xs:   0.70rem;   /* 11.2px */
  --text-sm:   0.813rem;  /* 13px   */
  --text-base: 0.9375rem; /* 15px   */
  --text-md:   1.0625rem; /* 17px   */
  --text-lg:   1.25rem;   /* 20px   */
  --text-xl:   1.5rem;    /* 24px   */
  --text-2xl:  1.875rem;  /* 30px   */
  --text-3xl:  2.25rem;   /* 36px   */
  --text-4xl:  3rem;      /* 48px   */

  /* -----------------------------------------------------------
     Typography — Font Weights
     ----------------------------------------------------------- */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;

  /* -----------------------------------------------------------
     Typography — Line Heights
     ----------------------------------------------------------- */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* -----------------------------------------------------------
     Typography — Letter Spacing
     ----------------------------------------------------------- */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.14em;

  /* -----------------------------------------------------------
     Spacing Scale
     ----------------------------------------------------------- */
  --space-1:   0.25rem;   /* 4px  */
  --space-2:   0.5rem;    /* 8px  */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */

  /* -----------------------------------------------------------
     Layout
     ----------------------------------------------------------- */
  --sidebar-width:           240px;
  --sidebar-width-collapsed: 64px;
  --topbar-height:           60px;
  --content-max-width:       1280px;
  --content-padding:         var(--space-8);
  --card-padding:            var(--space-6);

  /* -----------------------------------------------------------
     Border Radius
     ----------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 9999px;

  /* -----------------------------------------------------------
     Shadows
     ----------------------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(26, 22, 20, 0.06);
  --shadow-sm:  0 1px 4px rgba(26, 22, 20, 0.08), 0 1px 2px rgba(26, 22, 20, 0.04);
  --shadow-md:  0 4px 12px rgba(26, 22, 20, 0.10), 0 2px 4px rgba(26, 22, 20, 0.06);
  --shadow-lg:  0 8px 24px rgba(26, 22, 20, 0.12), 0 4px 8px rgba(26, 22, 20, 0.08);
  --shadow-xl:  0 16px 40px rgba(26, 22, 20, 0.16);
  --shadow-accent: 0 4px 16px rgba(160, 120, 120, 0.28);

  /* -----------------------------------------------------------
     Transitions
     ----------------------------------------------------------- */
  --transition-fast:   100ms ease;
  --transition-base:   180ms ease;
  --transition-slow:   300ms ease;
  --transition-spring: 250ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* -----------------------------------------------------------
     Z-Index Scale
     ----------------------------------------------------------- */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* -----------------------------------------------------------
     Focus Ring
     ----------------------------------------------------------- */
  --focus-ring: 0 0 0 3px rgba(160, 120, 120, 0.35);
}