/* ========================================
   Notebook foundation
   ======================================== */

   .nb-root {
    /* Paper and ink */
    --paper: #FFF8EB;
    --ink: #5B4636;
    --ink-soft: #806955;
    --punctuation: #806955;
  
    /* Typography */
    --font-notebook: "Nunito", "Trebuchet MS", sans-serif;
    --font-code: "JetBrains Mono", "SFMono-Regular", monospace;
  
    /* Result-type backgrounds */
    --type-number:     #FBE7CB;
    --type-boolean:    #DDF2D1;
    --type-string:     #DCEBFF;
    --type-collection: #EADFFF;
    --type-object:     #FFDDE5;
    --type-function:   #D7F3EF;
    --type-error:      #FFE0E0;
    --type-null:       #E6E9F0;
    --type-undefined:  #E8E8FF;
    --type-date:       #D6F5E8;
  
    /* Result-type operator accents */
    --accent-number:     #B76527;
    --accent-boolean:    #477A36;
    --accent-string:     #3869AC;
    --accent-collection: #7952AD;
    --accent-object:     #B44765;
    --accent-function:   #287E78;
    --accent-error:      #B83C3C;
    --accent-null:       #596579;
    --accent-undefined:  #5A5DB0;
    --accent-date:       #287A63;
  
    /* Full-area, scrollable paper */
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
  
    padding: 1.5rem;
  
    /* Default appearance */
    color: var(--ink);
    background: var(--paper);
    font-family: var(--font-notebook);
    font-size: 16px;
    line-height: 1.6;
  }
  
  
  /* ========================================
     Expression type semantics
     ======================================== */
  
  .nb-root .expr {
    --type-bg: transparent;
    --type-accent: var(--ink);
  }
  
  .nb-root .expr.number {
    --type-bg: var(--type-number);
    --type-accent: var(--accent-number);
  }
  
  .nb-root .expr.boolean {
    --type-bg: var(--type-boolean);
    --type-accent: var(--accent-boolean);
  }
  
  .nb-root .expr.string {
    --type-bg: var(--type-string);
    --type-accent: var(--accent-string);
  }
  
  .nb-root .expr.array,
  .nb-root .expr.collection {
    --type-bg: var(--type-collection);
    --type-accent: var(--accent-collection);
  }
  
  .nb-root .expr.object {
    --type-bg: var(--type-object);
    --type-accent: var(--accent-object);
  }
  
  .nb-root .expr.function {
    --type-bg: var(--type-function);
    --type-accent: var(--accent-function);
  }
  
  .nb-root .expr.error {
    --type-bg: var(--type-error);
    --type-accent: var(--accent-error);
  }
  
  .nb-root .expr.null {
    --type-bg: var(--type-null);
    --type-accent: var(--accent-null);
  }
  
  .nb-root .expr.undefined {
    --type-bg: var(--type-undefined);
    --type-accent: var(--accent-undefined);
  }
  
  .nb-root .expr.date {
    --type-bg: var(--type-date);
    --type-accent: var(--accent-date);
  }
  
  
  /* ========================================
     Expression typography
     ======================================== */
  
  .nb-root .expr > summary,
  .nb-root details > summary {
    font-family: var(--font-code);
    font-size: 0.95em;
    font-weight: 600;
  }
  
  .nb-root .expr > summary {
    color: var(--type-accent);
  }
  
  /* Results and other content use normal notebook ink */
  .nb-root .expr details {
    color: var(--ink);
  }
  
  /* ========================================
     Form controls
     ======================================== */
  
  .nb-root input,
  .nb-root button,
  .nb-root select,
  .nb-root textarea {
    font: inherit;
    color: inherit;
  }


/* Controls — notebook style */
.nb-root input,
.nb-root select,
.nb-root textarea,
.nb-root button {
  box-sizing: border-box;
  max-width: 100%;
  border: 1.5px solid #D8C5AF;
  border-radius: 0.55em;
  padding: 0.45em 0.7em;
  background: #FFFCF5;
  color: var(--ink);
  font-family: var(--font-notebook);
  font-size: 0.95em;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgb(91 70 54 / 7%);
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    background-color 120ms ease;
}

/* Placeholder */
.nb-root input::placeholder,
.nb-root textarea::placeholder {
  color: #A18B75;
  opacity: 1;
}

/* Focus — clear, warm ink outline */
.nb-root input:focus-visible,
.nb-root select:focus-visible,
.nb-root textarea:focus-visible,
.nb-root button:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: none;
}

/* Hover */
.nb-root input:hover,
.nb-root select:hover,
.nb-root textarea:hover {
  border-color: var(--ink-soft);
}

/* Buttons — slightly more tactile */
.nb-root button {
  background: #F3E5D2;
  border-color: #CDB69B;
  font-weight: 700;
  cursor: pointer;
}

.nb-root button:hover {
  background: #EBD8BE;
  border-color: var(--ink-soft);
}

.nb-root button:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 2px rgb(91 70 54 / 12%);
}

/* Disabled controls */
.nb-root input:disabled,
.nb-root select:disabled,
.nb-root textarea:disabled,
.nb-root button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Checkboxes and radio buttons — browser-native, ink-accented */
.nb-root input[type="checkbox"],
.nb-root input[type="radio"] {
  accent-color: var(--ink);
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  box-shadow: none;
  cursor: pointer;
}

/* Range sliders */
.nb-root input[type="range"] {
  accent-color: var(--ink);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Multiline fields */
.nb-root textarea {
  resize: vertical;
  min-height: 5em;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nb-root input,
  .nb-root select,
  .nb-root textarea,
  .nb-root button {
    transition: none;
  }
}