/* ==============================
   Seadays カラーシステム
   label / button / alert の色を統一管理する。
   Usage:
     <span class="uk-label sd-label-success">...</span>
     <button class="uk-button sd-btn-primary">...</button>
     <div class="uk-alert sd-alert-success" uk-alert>...</div>
   ============================== */

:root {
  /* セマンティックカラー */
  --sd-primary:     #2d8fbf;  /* ocean blue */
  --sd-success:     #52b788;  /* green */
  --sd-warning:     #f4a261;  /* amber */
  --sd-danger:      #e05c5c;  /* red */
  --sd-info:        #4ea8c4;  /* sky blue */
  --sd-muted:       #95a5a6;  /* gray */

  /* ブランド固有カラー */
  --sd-anniversary: #e91e8c;  /* pink */
  --sd-waiting:     #f2ede4;  /* sand/beige */
  --sd-waiting-fg:  #555555;
}

/* ----------
   Labels
   ---------- */
.sd-label-success     { background-color: var(--sd-success);     color: #fff; }
.sd-label-warning     { background-color: var(--sd-warning);     color: #fff; }
.sd-label-danger      { background-color: var(--sd-danger);      color: #fff; }
.sd-label-primary     { background-color: var(--sd-primary);     color: #fff; }
.sd-label-info        { background-color: var(--sd-info);        color: #fff; }
.sd-label-muted       { background-color: var(--sd-muted);       color: #fff; }
.sd-label-anniversary { background-color: var(--sd-anniversary); color: #fff; }
.sd-label-waiting     { background-color: var(--sd-waiting); color: var(--sd-waiting-fg); }

/* ----------
   Buttons
   ---------- */
.sd-btn-primary {
  background-color: var(--sd-primary);
  border-color: var(--sd-primary);
  color: #fff;
}
.sd-btn-primary:hover,
.sd-btn-primary:focus {
  background-color: color-mix(in srgb, var(--sd-primary) 82%, black);
  border-color:     color-mix(in srgb, var(--sd-primary) 82%, black);
  color: #fff;
}
.sd-btn-primary:active {
  background-color: color-mix(in srgb, var(--sd-primary) 70%, black);
  border-color:     color-mix(in srgb, var(--sd-primary) 70%, black);
}

.sd-btn-default {
  background-color: #fff;
  border: 1px solid #d0d0d0;
  color: #444;
}
.sd-btn-default:hover,
.sd-btn-default:focus {
  background-color: #f5f5f5;
  border: 1px solid #b0b0b0;
  color: #333;
}

.sd-btn-success {
  background-color: var(--sd-success);
  border-color: var(--sd-success);
  color: #fff;
}
.sd-btn-success:hover,
.sd-btn-success:focus {
  background-color: color-mix(in srgb, var(--sd-success) 82%, black);
  border-color:     color-mix(in srgb, var(--sd-success) 82%, black);
  color: #fff;
}

.sd-btn-danger {
  background-color: var(--sd-danger);
  border-color: var(--sd-danger);
  color: #fff;
}
.sd-btn-danger:hover,
.sd-btn-danger:focus {
  background-color: color-mix(in srgb, var(--sd-danger) 82%, black);
  border-color:     color-mix(in srgb, var(--sd-danger) 82%, black);
  color: #fff;
}

.sd-btn-info {
  background-color: var(--sd-info);
  border-color: var(--sd-info);
  color: #fff;
}
.sd-btn-info:hover,
.sd-btn-info:focus {
  background-color: color-mix(in srgb, var(--sd-info) 82%, black);
  border-color:     color-mix(in srgb, var(--sd-info) 82%, black);
  color: #fff;
}

/* ----------
   Alerts
   ---------- */
.sd-alert-success {
  background-color: color-mix(in srgb, var(--sd-success) 12%, white);
  border-color:     color-mix(in srgb, var(--sd-success) 30%, white);
  color:            color-mix(in srgb, var(--sd-success) 75%, black);
}
.sd-alert-warning {
  background-color: color-mix(in srgb, var(--sd-warning) 12%, white);
  border-color:     color-mix(in srgb, var(--sd-warning) 30%, white);
  color:            color-mix(in srgb, var(--sd-warning) 75%, black);
}
.sd-alert-danger {
  background-color: color-mix(in srgb, var(--sd-danger) 12%, white);
  border-color:     color-mix(in srgb, var(--sd-danger) 30%, white);
  color:            color-mix(in srgb, var(--sd-danger) 75%, black);
}
.sd-alert-info {
  background-color: color-mix(in srgb, var(--sd-info) 12%, white);
  border-color:     color-mix(in srgb, var(--sd-info) 30%, white);
  color:            color-mix(in srgb, var(--sd-info) 75%, black);
}
.sd-alert-default {
  background-color: #f8f8f8;
  border-color: #e0e0e0;
  color: #555;
}