@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:wght@600;800&family=Noto+Sans:wght@400;600;700&display=swap');

:root {
  --edo-ivie-300: #E8806A;
  --edo-ivie-500: #C23F2A;
  --edo-ivie-600: #B3321F;
  --edo-ivie-800: #7A1F12;
  --edo-clay-200: #E6C3A8;
  --edo-clay-500: #A8512F;
  --edo-clay-700: #6E3320;
  --edo-brass-100: #F6E4B8;
  --edo-brass-300: #E6BE6B;
  --edo-brass-500: #C8932E;
  --edo-brass-700: #7D5A1C;
  --edo-chalk-50: #FBF8F4;
  --edo-chalk-100: #F4ECE6;
  --edo-chalk-300: #D9C4B6;
  --edo-ebony-950: #140B08;
  --edo-ebony-900: #1B0F0B;
  --edo-ebony-800: #28160F;
  --edo-ebony-700: #33201A;
  --edo-ebony-500: #5A3A2B;
  --edo-patina-300: #8DBBA9;
  --edo-patina-600: #3F7A66;

  --edo-font-display: 'Noto Serif Display', Georgia, 'Times New Roman', serif;
  --edo-font-ui: 'Noto Sans', 'Segoe UI', Roboto, Arial, sans-serif;

  --edo-text-xs: 0.75rem;
  --edo-text-sm: 0.875rem;
  --edo-text-md: 1rem;
  --edo-text-lg: 1.25rem;
  --edo-text-xl: 1.625rem;
  --edo-text-2xl: 2.25rem;
  --edo-text-3xl: 3.25rem;

  --edo-space-1: 0.25rem;
  --edo-space-2: 0.5rem;
  --edo-space-3: 0.75rem;
  --edo-space-4: 1rem;
  --edo-space-5: 1.5rem;
  --edo-space-6: 2.25rem;
  --edo-space-7: 3.5rem;

  --edo-radius-sm: 4px;
  --edo-radius-md: 10px;
  --edo-radius-pill: 999px;

  --edo-ease: cubic-bezier(0.22, 0.8, 0.28, 1);

  --edo-bg: var(--edo-ebony-900);
  --edo-bg-raised: var(--edo-ebony-800);
  --edo-surface: var(--edo-ebony-700);
  --edo-line: var(--edo-ebony-500);
  --edo-text: #F3EADF;
  --edo-text-muted: #BFA796;
  --edo-primary: var(--edo-ivie-500);
  --edo-on-primary: #FFF7EE;
  --edo-brass: var(--edo-brass-500);
  --edo-on-brass: var(--edo-ebony-950);
  --edo-brass-text: var(--edo-brass-300);
  --edo-frame: var(--edo-brass-500);
  --edo-bead: var(--edo-ivie-500);
  --edo-success: var(--edo-patina-300);
  --edo-danger: var(--edo-ivie-300);
  --edo-shadow: 0 10px 28px rgba(10, 4, 2, 0.55);
  --edo-focus: var(--edo-brass-300);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --edo-bg: var(--edo-chalk-100);
    --edo-bg-raised: var(--edo-chalk-50);
    --edo-surface: #FFFFFF;
    --edo-line: var(--edo-chalk-300);
    --edo-text: #2A1710;
    --edo-text-muted: #6D5547;
    --edo-primary: var(--edo-ivie-600);
    --edo-brass-text: var(--edo-brass-700);
    --edo-frame: var(--edo-brass-500);
    --edo-bead: var(--edo-ivie-600);
    --edo-success: var(--edo-patina-600);
    --edo-danger: var(--edo-ivie-600);
    --edo-shadow: 0 10px 24px rgba(110, 51, 32, 0.16);
    --edo-focus: var(--edo-ivie-600);
  }
}

:root[data-theme="light"] {
  --edo-bg: var(--edo-chalk-100);
  --edo-bg-raised: var(--edo-chalk-50);
  --edo-surface: #FFFFFF;
  --edo-line: var(--edo-chalk-300);
  --edo-text: #2A1710;
  --edo-text-muted: #6D5547;
  --edo-primary: var(--edo-ivie-600);
  --edo-brass-text: var(--edo-brass-700);
  --edo-frame: var(--edo-brass-500);
  --edo-bead: var(--edo-ivie-600);
  --edo-success: var(--edo-patina-600);
  --edo-danger: var(--edo-ivie-600);
  --edo-shadow: 0 10px 24px rgba(110, 51, 32, 0.16);
  --edo-focus: var(--edo-ivie-600);
}

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

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--edo-bg);
  color: var(--edo-text);
  font-family: var(--edo-font-ui);
  font-size: var(--edo-text-md);
  line-height: 1.55;
}

:focus-visible {
  outline: 3px solid var(--edo-focus);
  outline-offset: 2px;
}

.edo-display {
  font-family: var(--edo-font-display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}

.edo-display--xl { font-size: var(--edo-text-3xl); }
.edo-display--lg { font-size: var(--edo-text-2xl); }
.edo-display--md { font-size: var(--edo-text-xl); }

.edo-muted {
  color: var(--edo-text-muted);
}

.edo-beads {
  height: 14px;
  border: 0;
  margin: var(--edo-space-4) 0;
  background-image: radial-gradient(circle at 50% 50%, var(--edo-bead) 0 4px, transparent 4.5px);
  background-size: 16px 14px;
  background-repeat: repeat-x;
  background-position: center;
}

.edo-beads--brass {
  background-image: radial-gradient(circle at 50% 50%, var(--edo-brass-500) 0 4px, transparent 4.5px);
}

.edo-panel {
  position: relative;
  background: var(--edo-surface);
  border: 2px solid var(--edo-frame);
  border-radius: var(--edo-radius-sm);
  box-shadow: var(--edo-shadow);
  padding: var(--edo-space-5);
}

.edo-panel::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--edo-line);
  border-radius: 2px;
  pointer-events: none;
}

.edo-panel__title {
  font-family: var(--edo-font-display);
  font-weight: 800;
  font-size: var(--edo-text-lg);
  margin: 0 0 var(--edo-space-3);
}

.edo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--edo-space-2);
  min-height: 44px;
  padding: 0 var(--edo-space-5);
  border: 2px solid transparent;
  border-radius: var(--edo-radius-sm);
  font-family: var(--edo-font-ui);
  font-size: var(--edo-text-md);
  font-weight: 700;
  cursor: pointer;
  transition: transform 140ms var(--edo-ease), background-color 140ms var(--edo-ease);
}

.edo-btn:active {
  transform: translateY(1px);
}

.edo-btn--primary {
  background: var(--edo-primary);
  color: var(--edo-on-primary);
}

.edo-btn--primary:hover {
  background: var(--edo-ivie-800);
}

.edo-btn--brass {
  background: var(--edo-brass);
  color: var(--edo-on-brass);
}

.edo-btn--brass:hover {
  background: var(--edo-brass-300);
}

.edo-btn--ghost {
  background: transparent;
  color: var(--edo-text);
  border-color: var(--edo-line);
}

.edo-btn--ghost:hover {
  border-color: var(--edo-frame);
}

.edo-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.edo-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--edo-space-2);
  padding: var(--edo-space-1) var(--edo-space-3);
  border-radius: var(--edo-radius-pill);
  background: var(--edo-bg-raised);
  border: 1px solid var(--edo-line);
  font-size: var(--edo-text-sm);
  font-weight: 700;
}

.edo-chip--naira::before {
  content: "\20A6";
  color: var(--edo-brass-text);
  font-weight: 700;
}

.edo-chip--ivie::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--edo-ivie-300), var(--edo-bead) 55%, var(--edo-ivie-800));
}

.edo-meter {
  --edo-meter-color: var(--edo-brass-500);
  display: grid;
  gap: var(--edo-space-1);
}

.edo-meter__label {
  display: flex;
  justify-content: space-between;
  font-size: var(--edo-text-sm);
  font-weight: 600;
}

.edo-meter__track {
  height: 10px;
  border-radius: var(--edo-radius-pill);
  background: var(--edo-bg-raised);
  border: 1px solid var(--edo-line);
  overflow: hidden;
}

.edo-meter__fill {
  height: 100%;
  width: var(--edo-meter-value, 50%);
  background: var(--edo-meter-color);
  border-radius: var(--edo-radius-pill);
  transition: width 400ms var(--edo-ease);
}

.edo-meter--hunger { --edo-meter-color: var(--edo-brass-500); }
.edo-meter--energy { --edo-meter-color: var(--edo-clay-500); }
.edo-meter--mood { --edo-meter-color: var(--edo-ivie-300); }
.edo-meter--social { --edo-meter-color: var(--edo-clay-200); }
.edo-meter--hygiene { --edo-meter-color: var(--edo-patina-300); }
.edo-meter--respect { --edo-meter-color: var(--edo-brass-300); }

.edo-bubble {
  max-width: 34rem;
  padding: var(--edo-space-3) var(--edo-space-4);
  border-radius: var(--edo-radius-md);
  background: var(--edo-bg-raised);
  border: 1px solid var(--edo-line);
}

.edo-bubble--self {
  background: var(--edo-primary);
  border-color: transparent;
  color: var(--edo-on-primary);
  margin-left: auto;
}

.edo-bubble__name {
  display: block;
  font-size: var(--edo-text-xs);
  font-weight: 700;
  color: var(--edo-brass-text);
  margin-bottom: var(--edo-space-1);
}

.edo-bubble--self .edo-bubble__name {
  color: var(--edo-brass-100);
}

.edo-toast {
  display: flex;
  align-items: center;
  gap: var(--edo-space-3);
  padding: var(--edo-space-3) var(--edo-space-4);
  border-radius: var(--edo-radius-sm);
  background: var(--edo-surface);
  border-left: 5px solid var(--edo-brass-500);
  box-shadow: var(--edo-shadow);
}

.edo-toast--success { border-left-color: var(--edo-success); }
.edo-toast--danger { border-left-color: var(--edo-danger); }

@media (max-width: 600px) {
  :root {
    --edo-text-2xl: 1.875rem;
    --edo-text-3xl: 2.5rem;
  }

  .edo-panel {
    padding: var(--edo-space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .edo-btn,
  .edo-meter__fill {
    transition: none;
  }
}