/* Shared Miel de Corse tokens and components. Keep values aligned with GUIDE-DESIGN-THEME.md. */
:root {
  --mdc-ivory: #fff9f4;
  --mdc-cream: #fff2c6;
  --mdc-cream-border: #ffe9a8;
  --mdc-white: #fff;
  --mdc-orange: #ff7200;
  --mdc-orange-dark: #d65e00;
  --mdc-orange-text: #a94300;
  --mdc-brown: #340000;
  --mdc-muted: #7a5248;
  --mdc-muted-dark: #594039;
  --mdc-teal: #3faba2;
  --mdc-teal-dark: #2c7c76;
  --mdc-teal-pale: #dcf0ee;
  --mdc-font-heading: "Baloo 2", ui-rounded, system-ui, sans-serif;
  --mdc-font-body: "Nunito", ui-sans-serif, system-ui, sans-serif;
  --mdc-radius-button: 14px;
  --mdc-radius-card: 28px;
  --mdc-radius-field: 14px;
  --mdc-radius-pill: 999px;
  --mdc-space-1: .5rem;
  --mdc-space-2: .75rem;
  --mdc-space-3: 1rem;
  --mdc-space-4: 1.5rem;
  --mdc-space-5: 2rem;
  --mdc-focus: 3px solid var(--mdc-teal);
  --mdc-focus-offset: 3px;
}

/* Components are opt-in; native checkout controls use these same declarations. */
.mdc-btn,
:is(#checkout, #order-confirmation) .btn-primary,
:is(#checkout, #order-confirmation) .btn-outline-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3.5rem;
  padding: .75rem 1.4rem;
  border: 2px solid var(--mdc-orange);
  border-bottom: 5px solid var(--mdc-orange-dark);
  border-radius: var(--mdc-radius-button);
  background: var(--mdc-orange);
  color: var(--mdc-brown);
  font: 800 .9375rem/1.25 var(--mdc-font-body);
  letter-spacing: .03em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: normal;
}
.mdc-btn:hover,
:is(#checkout, #order-confirmation) .btn-primary:hover {
  border-color: var(--mdc-teal);
  border-bottom-color: var(--mdc-teal-dark);
  background: var(--mdc-teal);
  color: var(--mdc-brown);
}
.mdc-btn:active,
:is(#checkout, #order-confirmation) :is(.btn-primary, .btn-outline-primary):active {
  border-bottom-width: 2px;
  transform: translateY(3px);
}
.mdc-btn--ghost,
:is(#checkout, #order-confirmation) .btn-outline-primary {
  border-color: var(--mdc-cream-border);
  border-bottom-color: var(--mdc-cream-border);
  background: var(--mdc-white);
  color: var(--mdc-brown);
}
.mdc-btn--ghost:hover,
:is(#checkout, #order-confirmation) .btn-outline-primary:hover {
  border-color: var(--mdc-teal);
  border-bottom-color: var(--mdc-teal);
  background: var(--mdc-teal-pale);
  color: var(--mdc-teal-dark);
}
.mdc-card {
  border: 1px solid var(--mdc-cream-border);
  border-radius: var(--mdc-radius-card);
  background: var(--mdc-white);
}
.mdc-field,
:is(#checkout, #order-confirmation) :is(.form-control, .form-select) {
  min-height: 3.5rem;
  border: 2px solid var(--mdc-cream-border);
  border-radius: var(--mdc-radius-field);
  background-color: var(--mdc-white);
  color: var(--mdc-brown);
  font: 700 1rem/1.35 var(--mdc-font-body);
}
:is(#checkout, #order-confirmation) textarea.form-control { min-height: 6rem; }
.mdc-field:focus,
:is(#checkout, #order-confirmation) :is(.form-control, .form-select):focus {
  border-color: var(--mdc-teal);
  box-shadow: 0 0 0 .2rem rgba(63, 171, 162, .17);
}
.mdc-section { padding-block: clamp(3rem, 6vw, 5rem); }
:is(#checkout, #order-confirmation) :is(a, button, input, select, textarea):focus-visible,
.mdc-btn:focus-visible,
.mdc-field:focus-visible {
  outline: var(--mdc-focus);
  outline-offset: var(--mdc-focus-offset);
}