/**
 * Textellent design tokens for appt (iframe addon).
 * Brand palette: textellent-brand-palette.css (Figma Brand Refresh swatch fills).
 * Semantic aliases below stay compatible with react_web/src/styles/global.css.
 */

@import url("textellent-brand-palette.css");

:root {
  --primary-color: var(--black-800);
  --secondary-color: var(--white-800);
  --input-border-color: var(--white-320);
  --white: var(--white-40);
  --figma-primary: var(--midnight-320);

  --input-border-radius: 8px;
  --btn-border-radius: 999px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --btn-action-height: 48px;

  --figma-bg-primary: var(--white-160);
  --figma-bg-secondary: var(--midnight-720);
  --figma-bg-tertiary: var(--white-240);
  --figma-text-primary: var(--black-800);
  --figma-text-tertiary: var(--black-640);
  --figma-text-secondary: var(--black-480);
  --figma-accent-purple: var(--midnight-320);
  --figma-border-light: var(--white-320);
  --figma-border-medium: var(--white-240);
  --figma-border-dark: var(--midnight-240);
  --figma-white: var(--white-40);
  --figma-text-light: var(--white-800);
  --figma-gradient-twilight: var(--gradient-twilight-pop);

  --button-primary-bg: var(--midnight-320);
  --button-primary-hover-bg: var(--midnight-480);
  --button-disabled-bg: var(--white-320);
  --button-disabled-text: var(--white-800);

  --error-text: #b8001d;

  --spacing-base: 8px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --table-row-min-height: 48px;
  --table-header-font-weight: var(--font-weight-bold);
  --table-cell-padding-y: 12px;
  --table-cell-padding-x: 16px;

  --page-layout-gutter: 24px;
}

/* Funnel Sans / Funnel Display loaded via Google Fonts in backend/header.php */

body.backend {
  font-family: "Funnel Sans", sans-serif;
}

body.backend h1,
body.backend h2,
body.backend h3,
body.backend h4,
body.backend h5,
body.backend h6 {
  font-family: "Funnel Display", serif;
  color: inherit;
}

/* Bootstrap 3 — backend iframe */
body.backend .btn-primary {
  background-color: var(--button-primary-bg);
  border-color: var(--button-primary-bg);
  border-radius: var(--btn-border-radius);
  color: var(--figma-white);
}

body.backend .btn-primary:hover,
body.backend .btn-primary:focus,
body.backend .btn-primary:active,
body.backend .btn-primary.active,
body.backend .open > .dropdown-toggle.btn-primary {
  background-color: var(--button-primary-hover-bg);
  border-color: var(--button-primary-hover-bg);
  color: var(--figma-white);
}

body.backend .btn-primary:disabled,
body.backend .btn-primary.disabled {
  background-color: var(--button-disabled-bg);
  border-color: var(--button-disabled-bg);
  color: var(--button-disabled-text);
}

body.backend .form-control {
  border-radius: var(--input-border-radius);
  border-color: var(--figma-border-light);
  box-shadow: none;
}

body.backend .form-control:focus {
  border-color: var(--figma-accent-purple);
  outline: none;
  box-shadow: 0 0 0 2px rgba(107, 95, 242, 0.2);
}

body.backend .modal-header {
  background-color: var(--button-primary-bg);
  border-color: var(--button-primary-bg);
}

body.backend .modal-header .modal-title,
body.backend .modal-header h3,
body.backend .modal-header .close {
  color: var(--figma-white);
}

/* Backend top nav — light chrome (matches parent content area) */
body.backend nav#header.navbar .navbar-collapse {
  background-color: inherit;
}

body.backend #header #header-menu .menu-item {
  color: var(--black-480);
}

body.backend #header #header-menu .menu-item:hover,
body.backend #header #header-menu .menu-item:focus {
  color: var(--midnight-320);
}

body.backend #header #header-menu li.active .menu-item {
  color: var(--midnight-320);
  font-weight: var(--font-weight-bold);
}

body.backend #header .navbar-header .navbar-toggle .icon-bar {
  background-color: var(--black-800);
}

/* Appearance tab — colorpicker preview swatch (keep input-group table-cell layout) */
body.backend #appearance .appearance-color-picker .input-group-addon {
  padding: 0;
  width: 48px;
  min-width: 48px;
  vertical-align: middle;
}

body.backend #appearance .appearance-color-picker .appearance-color-swatch {
  display: block;
  width: 100%;
  height: 34px;
  min-height: 34px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
}