/* Cello Design System v1.0 — additive compatibility layer */
:root {
  --cello-color-primary: #f58220;
  --cello-color-primary-hover: #df6f0d;
  --cello-color-accent: #ff6600;
  --cello-color-success: #169b62;
  --cello-color-danger: #d93025;
  --cello-color-warning: #f5a623;
  --cello-color-info: #2474b5;
  --cello-color-text: #222;
  --cello-color-muted: #666;
  --cello-color-border: #e3e3e3;
  --cello-color-surface: #fff;
  --cello-color-surface-muted: #f4f4f4;
  --cello-space-1: 4px;
  --cello-space-2: 8px;
  --cello-space-3: 12px;
  --cello-space-4: 16px;
  --cello-space-5: 20px;
  --cello-space-6: 24px;
  --cello-space-8: 32px;
  --cello-space-10: 40px;
  --cello-radius-sm: 4px;
  --cello-radius-md: 8px;
  --cello-radius-lg: 12px;
  --cello-shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --cello-shadow-md: 0 6px 20px rgba(0,0,0,.10);
  --cello-font-family: Montserrat, Arial, sans-serif;
  --cello-transition: 180ms ease;
}

/* Predictable sizing without changing component layouts. */
*, *::before, *::after { box-sizing: border-box; }
body { color: var(--cello-color-text); font-family: var(--cello-font-family); }
img, svg, video, canvas { max-width: 100%; }

/* Typography tokens */
.cello-heading-1, .cello-heading-2, .cello-heading-3 { margin-top: 0; color: var(--cello-color-text); font-weight: 600; line-height: 1.3; }
.cello-heading-1 { font-size: clamp(24px, 3vw, 34px); }
.cello-heading-2 { font-size: clamp(20px, 2.4vw, 28px); }
.cello-heading-3 { font-size: clamp(17px, 2vw, 22px); }
.cello-text-muted { color: var(--cello-color-muted) !important; }
.cello-price { color: var(--cello-color-accent); font-weight: 700; }

/* Buttons */
.cello-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--cello-space-2); min-height: 42px; padding: 10px 18px; border: 1px solid transparent; border-radius: var(--cello-radius-md); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color var(--cello-transition), border-color var(--cello-transition), transform var(--cello-transition); }
.cello-btn:hover, .cello-btn:focus { text-decoration: none; transform: translateY(-1px); }
.cello-btn:focus-visible { outline: 3px solid rgba(245,130,32,.28); outline-offset: 2px; }
.cello-btn--primary { color: #fff; background: var(--cello-color-primary); border-color: var(--cello-color-primary); }
.cello-btn--primary:hover, .cello-btn--primary:focus { color: #fff; background: var(--cello-color-primary-hover); border-color: var(--cello-color-primary-hover); }
.cello-btn--secondary { color: var(--cello-color-text); background: var(--cello-color-surface-muted); border-color: var(--cello-color-border); }
.cello-btn--outline { color: var(--cello-color-primary); background: transparent; border-color: var(--cello-color-primary); }
.cello-btn--danger { color: #fff; background: var(--cello-color-danger); border-color: var(--cello-color-danger); }
.cello-btn[disabled], .cello-btn.is-disabled { opacity: .55; pointer-events: none; }

/* Cards and surfaces */
.cello-card { background: var(--cello-color-surface); border: 1px solid var(--cello-color-border); border-radius: var(--cello-radius-lg); box-shadow: var(--cello-shadow-sm); overflow: hidden; }
.cello-card__header, .cello-card__body, .cello-card__footer { padding: var(--cello-space-4); }
.cello-card__header { border-bottom: 1px solid var(--cello-color-border); }
.cello-card__footer { border-top: 1px solid var(--cello-color-border); }

/* Forms */
.cello-field { margin-bottom: var(--cello-space-4); }
.cello-label { display: block; margin-bottom: var(--cello-space-2); font-weight: 600; }
.cello-control { width: 100%; min-height: 42px; padding: 9px 12px; color: var(--cello-color-text); background: #fff; border: 1px solid var(--cello-color-border); border-radius: var(--cello-radius-md); transition: border-color var(--cello-transition), box-shadow var(--cello-transition); }
.cello-control:focus { border-color: var(--cello-color-primary); outline: 0; box-shadow: 0 0 0 3px rgba(245,130,32,.16); }

/* Badges */
.cello-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.cello-badge--sale, .cello-badge--hot { color: #fff; background: var(--cello-color-danger); }
.cello-badge--new { color: #fff; background: var(--cello-color-info); }
.cello-badge--official { color: #fff; background: var(--cello-color-success); }
.cello-badge--installment { color: #7a4b00; background: #fff0c7; }

/* Alerts */
.cello-alert { padding: 12px 16px; border: 1px solid; border-radius: var(--cello-radius-md); }
.cello-alert--success { color: #0b6b42; background: #eaf8f2; border-color: #a9dfc8; }
.cello-alert--danger { color: #96261e; background: #fff0ee; border-color: #f2b5b0; }
.cello-alert--warning { color: #704600; background: #fff8e6; border-color: #f3d89a; }
.cello-alert--info { color: #18527e; background: #eef7fd; border-color: #b8daef; }

/* Layout and spacing utilities */
.cello-stack { display: flex; flex-direction: column; gap: var(--cello-space-4); }
.cello-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cello-space-3); }
.cello-grid { display: grid; gap: var(--cello-space-4); }
.cello-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cello-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.cello-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.cello-mt-0 { margin-top: 0 !important; } .cello-mt-4 { margin-top: var(--cello-space-4) !important; } .cello-mb-4 { margin-bottom: var(--cello-space-4) !important; }
.cello-p-4 { padding: var(--cello-space-4) !important; } .cello-gap-2 { gap: var(--cello-space-2) !important; } .cello-gap-4 { gap: var(--cello-space-4) !important; }

/* Shared focus and accessibility improvements for existing controls. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(245,130,32,.28); outline-offset: 2px; }

@media (max-width: 767px) {
  .cello-grid--2, .cello-grid--3, .cello-grid--4 { grid-template-columns: 1fr; }
  .cello-btn--mobile-block { display: flex; width: 100%; }
  .cello-card__header, .cello-card__body, .cello-card__footer { padding: var(--cello-space-3); }
}