/* ============================================================
   base.css — Reset, variáveis e primitivas de layout
   ============================================================ */

:root {
  /* Brand MEDIUM */
  --medium-red:           #C5234A;  /* RGB 197 35 74  */
  --medium-red-dark:      #8C1530;
  --medium-red-light:     #F9E6EC;
  --medium-bordeaux:      #822B45;
  --medium-bordeaux-dark: #5E1F34;
  --medium-bordeaux-light:#F3E0E6;
  --medium-gold:          #B9966C;  /* RGB 185 150 108 */
  --medium-gold-light:    #F5EDE0;

  /* Brand bygga */
  --bygga-navy:       #132937;  /* RGB 19 41 55 */
  --bygga-teal:       #CD001A;
  --bygga-teal-light: #FCEAEA;

  /* Estado: Amber (pendente) */
  --amber:            #BA7517;
  --amber-light:      #FAEEDA;
  --amber-dark:       #854F0B;

  /* Layout */
  --sidebar-w: 220px;
  --topbar-h:  52px;

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

  /* Cores — modo claro */
  --color-text-primary:        #1C1C1E;
  --color-text-secondary:      #6E6E73;
  --color-text-tertiary:       #AEAEB2;

  --color-background-primary:  #FFFFFF;
  --color-background-secondary:#F5F5F7;
  --color-background-tertiary: #F2F2F7;

  --color-border-primary:      #C7C7CC;
  --color-border-secondary:    #D1D1D6;
  --color-border-tertiary:     #E5E5EA;

  /* Border radius */
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 10px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text-primary);
  background: var(--color-background-tertiary);
  height: 100%;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
img { display: block; max-width: 100%; }

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 0.8s linear infinite; }

/* Utilitários */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}