/* Standalone CSS - Motif Component Replacements */

/* Theme Variables */
.theme-light {
  --motif-neutral-900: #2e2e38;
  --motif-neutral-700: #656579;
  --motif-neutral-500: #a4a4b2;
  --motif-neutral-300: #d7d7dc;
  --motif-neutral-100: #f3f3f5;
  --motif-neutral-50: #fafafb;
  --motif-primary: #2e2e38;
  --motif-primary-hover: #1a1a24;
  --motif-accent: #ffe600;
  --motif-success: #168736;
  --motif-warning: #b35900;
  --motif-error: #b71c1c;
  --motif-info: #0d47a1;
  --motif-background: #ffffff;
  --motif-surface: #fafafb;
  --motif-text: #2e2e38;
  --motif-text-secondary: #656579;
}

.theme-dark {
  --motif-neutral-900: #ffffff;
  --motif-neutral-700: #c4c4cd;
  --motif-neutral-500: #8e8e9d;
  --motif-neutral-300: #4a4a5a;
  --motif-neutral-100: #2d2d3d;
  --motif-neutral-50: #1a1a2a;
  --motif-primary: #ffe600;
  --motif-primary-hover: #ffd000;
  --motif-accent: #ffe600;
  --motif-background: #1a1a2a;
  --motif-surface: #2d2d3d;
  --motif-text: #ffffff;
  --motif-text-secondary: #c4c4cd;
}

/* Header Component */
motif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--motif-background);
  border-bottom: 1px solid var(--motif-neutral-300);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 64px;
  box-sizing: border-box;
}

motif-header::before {
  content: '';
  display: flex;
  align-items: center;
  background: #1a1a24;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='30' viewBox='0 0 24 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.66653 23.9281H9.98608V20.8391H4.66653V18.4113H10.5507L8.59833 15.0276H0.25415V29.7391H12.0231V26.3554H4.66653V23.9281Z' fill='%23FFFFFF'/%3E%3Cpath d='M19.8556 15.0276L17.3567 19.8287L14.864 15.0276H9.9856L15.1256 23.9281V29.7391H19.5245V23.9281L24.6712 15.0276H19.8556Z' fill='%23FFFFFF'/%3E%3Cpath d='M29.0832 0L0 10.6147L29.0832 5.47733V0Z' fill='%23FFE600'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  margin-right: 12px;
}

motif-header::after {
  content: attr(app-header-name);
  font-weight: 600;
  font-size: 16px;
  color: var(--motif-text);
  position: absolute;
  left: 76px;
}

/* Button Component */
motif-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  gap: 8px;
  text-decoration: none;
}

motif-button[variant="primary"] {
  background: var(--motif-primary);
  color: white;
}

motif-button[variant="primary"]:hover {
  background: var(--motif-primary-hover);
}

motif-button[variant="secondary"] {
  background: transparent;
  color: var(--motif-text);
  border: 1px solid var(--motif-neutral-300);
}

motif-button[variant="secondary"]:hover {
  background: var(--motif-neutral-100);
}

motif-button[size="sm"] {
  padding: 6px 12px;
  font-size: 13px;
}

motif-button[size="lg"] {
  padding: 14px 28px;
  font-size: 16px;
}

/* Chip Component */
motif-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

motif-chip[variant="info"] {
  background: #e3f2fd;
  color: #0d47a1;
}

motif-chip[variant="neutral"] {
  background: var(--motif-neutral-100);
  color: var(--motif-neutral-700);
}

motif-chip[variant="success"] {
  background: #e8f5e9;
  color: #168736;
}

motif-chip[variant="warning"] {
  background: #fff3e0;
  color: #b35900;
}

motif-chip[variant="error"] {
  background: #ffebee;
  color: #b71c1c;
}

/* Card Component */
motif-card {
  display: block;
  background: var(--motif-background);
  border-radius: 8px;
  overflow: hidden;
}

motif-card[variant="card-border"] {
  border: 1px solid var(--motif-neutral-300);
}

motif-card-header {
  display: block;
  padding: 20px 24px 0;
}

motif-card-header h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

motif-card-body {
  display: block;
  padding: 16px 24px 24px;
}

motif-card-body p {
  margin: 0;
  color: var(--motif-text-secondary);
  line-height: 1.6;
}

/* Icon Component */
motif-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

motif-icon[size="sm"] {
  width: 16px;
  height: 16px;
}

motif-icon[size="md"] {
  width: 24px;
  height: 24px;
}

motif-icon[size="lg"] {
  width: 32px;
  height: 32px;
}

motif-icon[size="xl"] {
  width: 48px;
  height: 48px;
}

motif-icon::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

motif-icon[icon-name="calendar"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

motif-icon[icon-name="location"]::before,
motif-icon[icon-name="map-pin"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

motif-icon[icon-name="users"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

motif-icon[icon-name="globe"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E");
}

motif-icon[icon-name="trending-up"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolyline points='23 6 13.5 15.5 8.5 10.5 1 18'/%3E%3Cpolyline points='17 6 23 6 23 12'/%3E%3C/svg%3E");
}

motif-icon[icon-name="check-circle"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
}

motif-icon[icon-name="mail"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}

motif-icon[icon-name="phone"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

motif-icon[icon-name="moon"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}

motif-icon[icon-name="sun"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E");
}

motif-icon[icon-name="image"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
}

motif-icon[icon-name="play-circle"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='10 8 16 12 10 16 10 8'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='10 8 16 12 10 16 10 8'/%3E%3C/svg%3E");
}

motif-icon[icon-name="twitter"]::before,
motif-icon[icon-name="linkedin"]::before,
motif-icon[icon-name="youtube"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");
}

/* Avatar Component */
motif-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--motif-primary);
  color: white;
  font-weight: 600;
}

motif-avatar[size="xl"] {
  width: 80px;
  height: 80px;
  font-size: 24px;
}

motif-avatar::before {
  content: attr(initials);
}

/* Accordion Component */
motif-accordion {
  display: block;
}

motif-accordion-item {
  display: block;
  border: 1px solid var(--motif-neutral-300);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}

motif-accordion-header {
  display: block;
}

motif-accordion-trigger {
  display: flex;
  width: 100%;
  padding: 16px 20px;
  background: var(--motif-background);
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
  color: var(--motif-text);
  align-items: center;
  justify-content: space-between;
}

motif-accordion-trigger::after {
  content: '+';
  font-size: 20px;
  font-weight: 300;
  transition: transform 0.2s ease;
}

motif-accordion-item.open motif-accordion-trigger::after {
  content: '−';
}

motif-accordion-content {
  display: none;
  padding: 0 20px 20px;
  background: var(--motif-background);
}

motif-accordion-item.open motif-accordion-content {
  display: block;
}

/* Form Components */
motif-form-control {
  display: block;
  margin-bottom: 16px;
}

motif-form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--motif-text);
}

motif-input,
motif-select {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--motif-neutral-300);
  border-radius: 4px;
  font-size: 14px;
  background: var(--motif-background);
  color: var(--motif-text);
}

motif-input:focus,
motif-select:focus {
  outline: none;
  border-color: var(--motif-primary);
}

motif-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

motif-select-option {
  display: block;
  padding: 8px 16px;
}

/* Footer Component */
motif-footer {
  display: block;
  background: var(--motif-background);
  border-top: 1px solid var(--motif-neutral-300);
  padding: 0 24px;
}

/* Dark Theme Adjustments */
.theme-dark motif-header {
  background: var(--motif-surface);
  border-color: var(--motif-neutral-300);
}

.theme-dark motif-card {
  background: var(--motif-surface);
}

.theme-dark motif-card[variant="card-border"] {
  border-color: var(--motif-neutral-300);
}

.theme-dark motif-accordion-item {
  border-color: var(--motif-neutral-300);
}

.theme-dark motif-accordion-trigger,
.theme-dark motif-accordion-content {
  background: var(--motif-surface);
}

.theme-dark motif-input,
.theme-dark motif-select {
  background: var(--motif-surface);
  border-color: var(--motif-neutral-300);
  color: var(--motif-text);
}

.theme-dark motif-footer {
  background: var(--motif-surface);
  border-color: var(--motif-neutral-300);
}

.theme-dark motif-chip[variant="info"] {
  background: rgba(13, 71, 161, 0.2);
}

.theme-dark motif-chip[variant="neutral"] {
  background: var(--motif-neutral-300);
}

.theme-dark motif-chip[variant="success"] {
  background: rgba(22, 135, 54, 0.2);
}

.theme-dark motif-chip[variant="warning"] {
  background: rgba(179, 89, 0, 0.2);
}

.theme-dark motif-chip[variant="error"] {
  background: rgba(183, 28, 28, 0.2);
}