:root {
      --bg-offwhite: #FAF6EF;
      --brand-cream: #F3EDE2;
      --brand-cream-border: #E8DEC8;
      --surface-white: #FFFFFF;
      --btn-primary: #ea580c;
      --btn-primary-hover: #c2410c;
    }
    body {
      background-color: #FAF6EF;
      color: #26140E;
      font-family: 'Plus Jakarta Sans', sans-serif;
      -webkit-tap-highlight-color: transparent;
    }
    .clay-card {
      background: #FFFFFF;
      border: 1px solid rgba(43, 27, 23, 0.07);
      box-shadow: 0 12px 28px -6px rgba(43, 27, 23, 0.07), 0 4px 10px -2px rgba(43, 27, 23, 0.03), inset 0 1px 1px 0 rgba(255, 255, 255, 0.95);
    }
    .clay-input {
      background-color: #FFFFFF;
      border: 1px solid #E8DEC8;
      box-shadow: inset 0 2px 4px rgba(43, 27, 23, 0.04);
      transition: all 0.2s ease;
    }
    .clay-input:focus {
      background-color: #FFFFFF;
      border-color: #ea580c;
      box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.18);
    }
    .clay-btn-primary {
      background-color: #ea580c;
      color: #FFFFFF;
      box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2);
      transition: all 0.18s ease;
    }
    .clay-btn-primary:hover {
      background-color: #c2410c;
      box-shadow: 0 6px 20px rgba(234, 88, 12, 0.45);
      transform: translateY(-1px);
    }
    .clay-btn-primary:active {
      transform: scale(0.98);
      background-color: #9a3412;
    }
    .payment-option-card.selected {
      border-color: #ea580c;
      background-color: #fffaf6;
      box-shadow: 0 0 0 2px rgba(234, 88, 12, 0.2);
    }