/* ==========================================================================
   BEAUTYLINK DESIGN TOKENS
   Єдине місце теми: кольори, шрифти, радіуси, відступи, тіні, z-index,
   motion-токени та службові alias-и для старих компонентів.

   Правило теми:
   - тільки цей файл має право визначати :root;
   - інші CSS-файли тільки використовують var(--primary), var(--bg), var(--text) тощо;
   - нові токени додаються тут, а не в page-specific CSS.
   ========================================================================== */

:root {
  /* RGB channels for theme colors. Solid colors and alpha colors both read from here. */
  --primary-rgb: 207 83 99;
  --primary-dark-rgb: 170 63 85;
  --primary-soft-rgb: 255 227 223;
  --secondary-rgb: 238 138 107;
  --secondary-soft-rgb: 247 220 216;
  --accent-rgb: var(--secondary-rgb);
  --accent-soft-rgb: var(--secondary-soft-rgb);
  --bg-rgb: 255 248 244;
  --bg-soft-rgb: 255 241 235;
  --surface-rgb: 255 255 255;
  --surface-soft-rgb: 255 250 247;
  --white-rgb: 255 255 255;
  --black-rgb: 0 0 0;
  --text-rgb: 33 20 18;
  --text-secondary-rgb: 69 51 47;
  --text-muted-rgb: 123 102 95;
  --muted-rgb: var(--text-muted-rgb);
  --success-rgb: 159 169 135;
  --success-dark-rgb: 82 96 55;
  --warning-rgb: var(--secondary-rgb);
  --danger-rgb: var(--primary-dark-rgb);
  --error-rgb: var(--danger-rgb);
  --shadow-rgb: 91 54 47;
  --theme-clay-rgb: 198 170 154;
  --theme-preview-rose-1-rgb: 255 248 244;
  --theme-preview-rose-2-rgb: 207 83 99;
  --theme-preview-rose-3-rgb: 33 20 18;
  --theme-preview-sage-1-rgb: 244 240 228;
  --theme-preview-sage-2-rgb: 88 112 80;
  --theme-preview-sage-3-rgb: 20 24 8;
  --theme-preview-lavender-1-rgb: 247 244 255;
  --theme-preview-lavender-2-rgb: 104 72 192;
  --theme-preview-lavender-3-rgb: 20 12 40;
  --theme-preview-dark-1-rgb: 13 6 8;
  --theme-preview-dark-2-rgb: 30 15 20;
  --theme-preview-dark-3-rgb: 232 137 154;
  --theme-preview-dark-4-rgb: 245 232 236;

  /* Colors */
  --primary: rgb(var(--primary-rgb));
  --primary-dark: rgb(var(--primary-dark-rgb));
  --primary-soft: rgb(var(--primary-soft-rgb));
  --secondary: rgb(var(--secondary-rgb));
  --secondary-soft: rgb(var(--secondary-soft-rgb));
  --accent: var(--secondary);
  --accent-soft: var(--secondary-soft);

  --bg: rgb(var(--bg-rgb));
  --bg-soft: rgb(var(--bg-soft-rgb));
  --surface: rgb(var(--surface-rgb));
  --surface-soft: rgb(var(--surface-soft-rgb));
  --white: rgb(var(--white-rgb));
  --black: rgb(var(--black-rgb));

  --text: rgb(var(--text-rgb));
  --text-secondary: rgb(var(--text-secondary-rgb));
  --text-muted: rgb(var(--text-muted-rgb));

  --success: rgb(var(--success-rgb));
  --success-dark: rgb(var(--success-dark-rgb));
  --warning: var(--secondary);
  --danger: var(--primary-dark);
  --error: var(--danger);

  /* Borders and surfaces */
  --border: rgb(var(--primary-rgb) / .38);
  --border-input: rgb(var(--primary-rgb) / .28);
  --border-soft: rgb(var(--surface-rgb) / .78);
  --border-light: rgb(var(--primary-rgb) / .12);
  --line: rgb(var(--primary-rgb) / .22);

  --surface-page: linear-gradient(160deg, var(--primary-soft) 0%, var(--bg-soft) 45%, var(--bg) 100%);
  --surface-card: linear-gradient(145deg,
    rgb(var(--surface-rgb) / .94) 0%,
    rgb(var(--bg-soft-rgb) / .9) 50%,
    rgb(var(--primary-rgb) / .06) 100%
  );
  --surface-glass: rgb(var(--surface-rgb) / .62);
  --surface-input: rgb(var(--surface-rgb) / .68);
  --surface-input-focus: rgb(var(--surface-rgb) / .9);
  --surface-border: rgb(var(--primary-rgb) / .20);
  --surface-border-accent: rgb(var(--primary-rgb) / .34);
  --surface-card-elevated: var(--surface-card);
  --surface-card-muted: linear-gradient(145deg, rgb(var(--bg-soft-rgb) / .78) 0%, rgb(var(--primary-rgb) / .10) 100%);

  /* Shadows */
  --shadow: rgb(var(--shadow-rgb) / .14);
  --shadow-sm: 0 1px 4px rgb(var(--text-rgb) / .07);
  --shadow-md: 0 4px 24px rgb(var(--text-rgb) / .11);
  --shadow-lg: 0 12px 48px rgb(var(--text-rgb) / .16);
  --shadow-card: 0 18px 58px rgb(var(--shadow-rgb) / .14), 0 2px 14px rgb(var(--primary-rgb) / .10);
  --shadow-soft: 0 8px 24px rgb(var(--text-rgb) / .09);
  --focus-ring: 0 0 0 3px rgb(var(--primary-rgb) / .18);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --spacing-xs: var(--space-1);
  --spacing-sm: var(--space-2);
  --spacing-md: var(--space-4);
  --spacing-lg: var(--space-6);
  --spacing-xl: var(--space-8);
  --spacing-2xl: var(--space-12);

  /* Typography source of truth: page CSS uses only these two font variables. */
  --font-ui: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Alegreya', Georgia, serif;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 40px;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* Radius */
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-5: 5px;
  --radius-6: 6px;
  --radius-7: 7px;
  --radius-8: 8px;
  --radius-9: 9px;
  --radius-10: 10px;
  --radius-11: 11px;
  --radius-12: 12px;
  --radius-13: 13px;
  --radius-14: 14px;
  --radius-15: 15px;
  --radius-16: 16px;
  --radius-17: 17px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-22: 22px;
  --radius-24: 24px;
  --radius-26: 26px;
  --radius-28: 28px;
  --radius-30: 30px;
  --radius-31: 31px;
  --radius-34: 34px;
  --radius-42: 42px;
  --radius-52: 52px;
  --radius-circle: 50%;
  --radius-xs: 12px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl: 34px;
  --radius-full: 9999px;
  --radius: var(--radius-lg);

  /* Buttons and controls */
  --button-height-sm: 36px;
  --button-height-md: 46px;
  --button-height-lg: 52px;
  --button-height-xl: 54px;
  --button-height-touch: 44px;
  --input-height: 44px;
  --icon-button-sm: 36px;
  --icon-button-md: 44px;
  --icon-button-lg: 48px;

  /* Button colour tokens — змінюй тут, щоб оновити кнопки по всьому проєкту */
  --btn-primary-bg:           linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 60%, var(--text) 100%);
  --btn-primary-color:        var(--white);
  --btn-primary-shadow:       0 2px 12px rgb(var(--primary-rgb) / 0.3);
  --btn-primary-shadow-hover: 0 8px 28px rgb(var(--primary-rgb) / 0.42);
  --btn-primary-shadow-active:0 2px 8px  rgb(var(--primary-rgb) / 0.3);

  --btn-secondary-bg:         rgb(var(--white-rgb) / 0.8);
  --btn-secondary-color:      var(--text);
  --btn-secondary-border:     var(--surface-border);

  --btn-danger-bg:            rgb(var(--danger-rgb) / 0.08);
  --btn-danger-color:         var(--danger);
  --btn-danger-border:        rgb(var(--danger-rgb) / 0.24);
  --btn-danger-bg-hover:      rgb(var(--danger-rgb) / 0.12);
  --btn-danger-border-hover:  rgb(var(--danger-rgb) / 0.38);
  --btn-danger-bg-active:     rgb(var(--danger-rgb) / 0.16);

  --btn-outline-color:        var(--primary-dark);
  --btn-outline-border:       var(--primary-dark);

  --btn-ghost-color:          var(--text-secondary);

  /* Pill / segmented-control buttons (period tabs, chart toggle) */
  --btn-pill-color:           var(--text-muted);
  --btn-pill-active-bg:       var(--primary);
  --btn-pill-active-color:    var(--white);

  /* Ghost icon buttons (calendar nav, etc.) */
  --btn-icon-ghost-color:       var(--text-secondary);
  --btn-icon-ghost-hover-bg:    rgb(var(--primary-rgb) / .1);
  --btn-icon-ghost-hover-color: var(--primary);
  --btn-icon-ghost-active-bg:   rgb(var(--primary-rgb) / .18);

  /* Edit / delete icon buttons (services list) */
  --btn-icon-edit-color:        var(--text-muted);
  --btn-icon-edit-hover-bg:     rgb(var(--primary-rgb) / .1);
  --btn-icon-edit-hover-color:  var(--primary);
  --btn-icon-delete-color:      var(--text-muted);
  --btn-icon-delete-hover-bg:   rgb(var(--danger-rgb) / .1);
  --btn-icon-delete-hover-color:var(--danger);

  /* Status colours — for booking/delta indicators */
  --status-done-rgb: 58 158 111;
  --status-done: rgb(var(--status-done-rgb));

  /* Layout */
  --mobile-width: 480px;
  --mobile-width-sm: 440px;
  --mobile-width-md: 460px;
  --mobile-width-lg: 470px;
  --app-max-width: var(--mobile-width);
  --container-width: 1200px;
  --header-height: 56px;
  --nav-height: 64px;

  /* App theme aliases */
  --app-radius-xs: var(--radius-xs);
  --app-radius: 20px;
  --app-radius-lg: 26px;
  --app-page-bg: linear-gradient(165deg, var(--primary-soft) 0%, var(--bg) 46%, var(--bg-soft) 100%);
  --app-surface: linear-gradient(145deg, rgb(var(--bg-rgb) / .94) 0%, rgb(var(--primary-soft-rgb) / .86) 52%, rgb(var(--bg-soft-rgb) / .74) 100%);
  --app-surface-strong: linear-gradient(145deg, rgb(var(--white-rgb) / .72) 0%, rgb(var(--bg-rgb) / .92) 100%);
  --app-surface-muted: linear-gradient(145deg, rgb(var(--primary-soft-rgb) / .58), rgb(var(--bg-soft-rgb) / .36));
  --app-border: rgb(var(--text-rgb) / .11);
  --app-border-strong: rgb(var(--primary-rgb) / .28);
  --app-shadow: 0 14px 42px rgb(var(--text-rgb) / .12), 0 2px 10px rgb(var(--primary-rgb) / .08);
  --app-shadow-soft: var(--shadow-soft);
  --app-focus: var(--focus-ring);
  --app-page-pad: clamp(14px, 4vw, 24px);
  --app-gap: clamp(10px, 3vw, 18px);

  /* Admin theme aliases */
  --admin-sidebar: 280px;
  --admin-content: 1180px;
  --admin-radius-xl: 30px;
  --admin-radius-lg: var(--radius-lg);
  --admin-radius-md: 16px;
  --admin-radius-sm: 12px;
  --admin-border: var(--surface-border);
  --admin-border-strong: var(--surface-border-accent);
  --admin-card: var(--surface-card);
  --admin-card-elevated: var(--surface-card-elevated);
  --admin-card-muted: var(--surface-card-muted);
  --admin-input: var(--surface-input);
  --admin-input-focus: var(--surface-input-focus);
  --admin-shadow: var(--shadow-card);
  --admin-shadow-soft: 0 14px 42px rgb(var(--ink-rgb) / .10);

  /* Motion */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --ease-default: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --transition: var(--duration-normal) var(--ease-default);
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-fast: 180ms;
  --motion-mid: 460ms;
  --motion-slow: 680ms;

  /* Z-index */
  --z-base: 1;
  --z-above: 10;
  --z-sticky: 100;
  --z-nav: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-top: 1000;

  /* Backward compatibility aliases */
  --coral: var(--accent);
  --ink: var(--text);
  --muted: var(--text-muted);
  --theme-surface: var(--surface);
  --theme-primary: var(--primary);
  --theme-accent-soft: var(--accent-soft);
  --theme-text-rgb: var(--text-rgb);
  --theme-clay: rgb(var(--theme-clay-rgb));
  --theme-success-dark: var(--success-dark);
  --theme-success-rgb: var(--success-rgb);
  --bg-secondary: var(--bg-soft);
  --bg-tertiary: var(--primary-soft);
  --chocolate: var(--text);
  --aloewood: var(--primary-dark);
  --neutral-rgb: var(--text-muted-rgb);
  --ink-rgb: var(--text-rgb);
  --coral-rgb: var(--accent-rgb);
  --icon-pink: var(--primary);
  --icon-green: var(--success);
}

/* ── Linen & Sage theme ─────────────────────────────────────────────── */
html[data-theme="linen-sage"] {
  --primary-rgb: 88 112 80;
  --primary-dark-rgb: 64 88 56;
  --primary-soft-rgb: 228 237 216;
  --secondary-rgb: 160 184 144;
  --secondary-soft-rgb: 216 232 200;
  --bg-rgb: 244 240 228;
  --bg-soft-rgb: 235 229 212;
  --surface-rgb: 255 255 255;
  --surface-soft-rgb: 250 248 242;
  --text-rgb: 20 24 8;
  --text-secondary-rgb: 60 72 48;
  --text-muted-rgb: 122 136 112;
  --shadow-rgb: 64 88 56;
  --btn-primary-bg: linear-gradient(135deg, rgb(var(--primary-rgb)) 0%, rgb(var(--primary-dark-rgb)) 60%, rgb(var(--text-rgb)) 100%);
}

/* ── Lavender Mist theme ────────────────────────────────────────────── */
html[data-theme="lavender"] {
  --primary-rgb: 104 72 192;
  --primary-dark-rgb: 72 48 160;
  --primary-soft-rgb: 237 232 255;
  --secondary-rgb: 152 120 216;
  --secondary-soft-rgb: 220 212 248;
  --bg-rgb: 247 244 255;
  --bg-soft-rgb: 240 235 255;
  --surface-rgb: 255 255 255;
  --surface-soft-rgb: 252 250 255;
  --text-rgb: 20 12 40;
  --text-secondary-rgb: 60 40 112;
  --text-muted-rgb: 136 122 176;
  --shadow-rgb: 72 48 160;
  --btn-primary-bg: linear-gradient(135deg, rgb(var(--primary-rgb)) 0%, rgb(var(--primary-dark-rgb)) 60%, rgb(var(--text-rgb)) 100%);
}

/* ── Dark Elegance theme ────────────────────────────────────────────── */
html[data-theme="dark-elegance"] {
  --primary-rgb: 232 137 154;
  --primary-dark-rgb: 207 83 99;
  --primary-soft-rgb: 55 20 30;
  --secondary-rgb: 238 138 107;
  --secondary-soft-rgb: 55 30 18;
  --bg-rgb: 13 6 8;
  --bg-soft-rgb: 22 10 14;
  --surface-rgb: 30 15 20;
  --surface-soft-rgb: 38 20 26;
  --text-rgb: 245 232 236;
  --text-secondary-rgb: 210 185 192;
  --text-muted-rgb: 150 115 128;
  --shadow-rgb: 0 0 0;
  --theme-clay-rgb: 80 50 60;
  --status-done-rgb: 100 178 140;
  --btn-primary-bg: linear-gradient(135deg, rgb(var(--primary-rgb)) 0%, rgb(var(--primary-dark-rgb)) 60%, rgb(13 6 8) 100%);
  --btn-primary-shadow:        0 2px 12px rgb(var(--primary-rgb) / 0.25);
  --btn-primary-shadow-hover:  0 8px 28px rgb(var(--primary-rgb) / 0.35);
  --border-light: rgb(var(--primary-rgb) / .10);
  --app-border: rgb(var(--text-rgb) / .08);
  --surface-page: linear-gradient(160deg, rgb(var(--primary-soft-rgb)) 0%, rgb(var(--bg-soft-rgb)) 45%, rgb(var(--bg-rgb)) 100%);
  --surface-card: linear-gradient(145deg,
    rgb(var(--surface-rgb) / .94) 0%,
    rgb(var(--bg-soft-rgb) / .9) 50%,
    rgb(var(--primary-rgb) / .04) 100%
  );
}