/* ==========================================================================
   Design System — Warm Orange
   Importe este arquivo antes de qualquer outro CSS.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');

:root {
  /* --- Cores primárias --- */
  --color-ink:            #000000;
  --color-primary:        #FF6600;
  --color-primary-300:    #FF9E5E;
  --color-primary-100:    #FCEBD9;
  --color-primary-hover:  #E65C00;

  /* --- Cores secundárias --- */
  --color-ink-deep:       #06171E;
  --color-brick:          #D85930;
  --color-brick-hover:    #BE4826;
  --color-peach:          #FFBE9E;
  --color-sand:           #F9DBB9;
  --color-amber:          #FA990E;
  --color-amber-soft:     #F4AF4A;

  /* --- Neutras --- */
  --color-bg:             #F0EDE8;
  --color-surface:        #FFFFFF;
  --color-border:         #DEDEE0;
  --color-text:           #202020;
  --color-muted:          #AFADAE;

  /* --- Tipografia --- */
  --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-display:   34px;
  --text-title:     26px;
  --text-heading:   22px;
  --text-section:   16px;
  --text-body:      16px;
  --text-sub:       14px;
  --text-footnote:  13px;
  --text-label:     12px;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* --- Espaçamento --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- Raio --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 999px;

  /* --- Elevação --- */
  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  --focus-ring:  0 0 0 3px rgba(255,102,0,.16);

  /* --- Layout --- */
  --container: 1200px;
  --control-h: 48px;
  --control-h-sm: 40px;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--color-ink); font-weight: var(--weight-bold); margin: 0 0 var(--space-3); }
h1 { font-size: var(--text-display); line-height: 1.15; letter-spacing: -.02em; }
h2 { font-size: var(--text-title);   line-height: 1.2;  letter-spacing: -.01em; }
h3 { font-size: var(--text-heading); line-height: 1.3;  letter-spacing: -.01em; }
h4 { font-size: var(--text-section); line-height: 1.4; }

p { margin: 0 0 var(--space-4); max-width: 62ch; }

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.text-sub      { font-size: var(--text-sub);      font-weight: var(--weight-light); }
.text-footnote { font-size: var(--text-footnote); color: var(--color-muted); }
.text-muted    { color: var(--color-muted); }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Botões
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: var(--control-h); padding: 0 var(--space-6);
  border: 0; border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: var(--text-body); font-weight: var(--weight-medium);
  line-height: 1; cursor: pointer;
  transition: background-color .15s ease, filter .15s ease;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--primary { background: var(--color-primary);     color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--color-primary-hover); }

.btn--soft    { background: var(--color-primary-100); color: var(--color-ink); }
.btn--soft:hover:not(:disabled)    { background: var(--color-sand); }

.btn--ghost   { background: transparent; color: var(--color-primary); }
.btn--ghost:hover:not(:disabled)   { background: var(--color-primary-100); }

.btn--danger  { background: var(--color-brick); color: #fff; }
.btn--danger:hover:not(:disabled)  { background: var(--color-brick-hover); }

.btn--compact { height: var(--control-h-sm); padding: 0 var(--space-5); border-radius: var(--radius-sm); font-size: var(--text-sub); }
.btn--block   { width: 100%; }

.fab {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border: 0; border-radius: var(--radius-full);
  background: var(--color-primary-300); color: #fff;
  box-shadow: var(--shadow-card); cursor: pointer;
  transition: background-color .15s ease;
}
.fab:hover { background: var(--color-primary); }

/* ==========================================================================
   Campos
   ========================================================================== */

.field {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-height: 56px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field--filled { min-height: 72px; }
.field:focus-within { border-color: var(--color-primary); box-shadow: var(--focus-ring); }

.field__label {
  font-size: var(--text-label); font-weight: var(--weight-medium);
  color: var(--color-muted);
}
.field__input {
  border: 0; padding: 0; width: 100%; background: transparent;
  font-family: var(--font-sans); font-size: var(--text-body); color: var(--color-text);
}
.field__input::placeholder { color: var(--color-muted); }
.field__input:focus { outline: none; }

.field__action {
  position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--color-muted); cursor: pointer;
}
.field__action:hover { color: var(--color-primary); }

.field--error { border-color: var(--color-brick); }
.field--error:focus-within { box-shadow: 0 0 0 3px rgba(216,89,48,.16); }
.field-message { font-size: var(--text-footnote); color: var(--color-brick); margin-top: var(--space-2); }

.field:has(.field__input:disabled) { background: var(--color-bg); }

/* ==========================================================================
   Superfícies
   ========================================================================== */

.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-5); }
@media (max-width: 640px) { .container { padding-inline: var(--space-4); } }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 28px; padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-primary-100); color: var(--color-ink);
  font-size: var(--text-footnote); font-weight: var(--weight-medium);
}

.badge {
  display: inline-block; width: 8px; height: 8px;
  border-radius: var(--radius-full); background: var(--color-brick);
}

/* ==========================================================================
   Feedback
   ========================================================================== */

.alert { border-radius: var(--radius-md); padding: var(--space-4); font-size: var(--text-sub); }
.alert--success { background: var(--color-primary-100); color: var(--color-ink); }
.alert--warning { background: var(--color-sand);        color: var(--color-ink); }
.alert--error   { background: rgba(255,190,158,.5);     color: var(--color-brick); }
.alert--info    { background: var(--color-bg);          color: var(--color-ink-deep); }

/* ==========================================================================
   Calendário
   ========================================================================== */

.calendar { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-card); }
.calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1); }
.calendar__dow { font-size: var(--text-footnote); font-weight: var(--weight-medium); color: var(--color-muted); text-align: center; padding-bottom: var(--space-2); }
.calendar__day {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-inline: auto;
  border: 0; border-radius: var(--radius-full); background: transparent;
  font-family: var(--font-sans); font-size: var(--text-sub); color: var(--color-text); cursor: pointer;
}
.calendar__day:hover { background: var(--color-primary-100); }
.calendar__day--muted { color: var(--color-muted); }
.calendar__day--today,
.calendar__day--selected { background: var(--color-primary); color: #fff; font-weight: var(--weight-medium); }
.calendar__day--range { background: var(--color-primary-100); border-radius: 0; }