/* =========================================================
GLOBAL DESIGN VARIABLES
Used across entire property system
=========================================================*/
:root {
  --cks-primary: #232f63;
  --cks-secondary: #d0ad6d;
  --cks-white: #ffffff;
  
  /* Brand */
  --cks-dark:         #2c1810;
  --cks-accent:       #c8874a;
  --cks-accent-dark:  #a0612a;
  --cks-danger:       #b43c32;

  /* Surfaces */
  --cks-bg:           #faf7f3;
  --cks-bg-hover:     #fdf5ec;

  /* Borders */
  --cks-border:       #e8e0d4;
  --cks-border-hover: #d8c8b4;
  --cks-divider:      #f0e8de;
  --cks-border-inner: #f0e8de;
  --cks-border-mid:   #f0e8de;

  /* Text */
  --cks-text:         #5a4535;
  --cks-muted:        #9e8c78;
  --cks-placeholder:  #9e8c78;
  --cks-nearme-text:  #7a5030;

  /* Shadows */
  --cks-shadow:       rgba(80, 50, 20, 0.07);
  --cks-shadow-hover: rgba(80, 50, 20, 0.14);
  --cks-shadow-float: rgba(80, 50, 20, 0.18);
  
  /* GRADIENT HOVER */
  --cks-accent-hover1: #d4944f;
  --cks-accent-hover2: #b06e35;

  /* Radius */
  --cks-radius-xl:    16px;
  --cks-radius-lg:    14px;
  --cks-radius-md:    10px;
  --cks-radius-sm:    6px;
  
  --cks-h:           48px;
  --cks-tab-h:       46px;
}

/* =========================================================
BUTTONS
=========================================================*/
.cks-btn-primary {
  background: var(--cks-primary);
  color: #fff;
  border: none;
}

.cks-btn-primary:hover {
  background: var(--cks-secondary);
  color: #000;
}