/* Raven's Immortal Art Studios: "work mode" look for the studio tools.
   Loaded last on every studio page so it wins over each page's own styles.
   Storefront pages keep the classic gold-serif look. */

:root {
  --ui-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --btn-font: var(--ui-font);
  --text: #ede4d1;
  --text-mid: #c2b79f;
  --text-dim: #b4aa96;
  --border: #2c3452;
  --panel: #0d1222;
  --panel-2: #121831;
  --studios-line: #3a4363;
}

body { font-family: var(--ui-font) !important; font-size: 15px; -webkit-font-smoothing: antialiased; }
input, select, textarea, button { font-family: var(--ui-font); }

/* Panels: a step lighter than the picture area, with visible edges */
.bar, .side, #left, #right, .tabs, .sheet, .box, #exportBox, .ed { background-color: var(--panel) !important; }
.pane { border-bottom-color: var(--border) !important; }

/* Buttons: normal capitals, quiet outline; gold shows only on hover / selected / main action */
button, .ib, a.ib, .chip, .tabs button, .lab, .cpad, .big button, #libFam button {
  text-transform: none !important; letter-spacing: 0.005em !important; font-family: var(--ui-font) !important;
}
.ib { font-weight: 600; font-size: 0.86rem; border-color: var(--studios-line); color: var(--text); background-color: var(--panel-2); }
.ib.mini, .mini { font-size: 0.76rem; }
.ib:hover { border-color: var(--studios); background-color: #1a2140; }
.ib.on { border-color: var(--studios); background-color: rgba(205,187,146,0.2); color: var(--studios-bright); }
.ib.primary, .primary { background: var(--studios); border-color: var(--studios); color: #12131a; }
.ib.primary:hover, .primary:hover { background: var(--studios-bright); }
.ib:disabled { opacity: 0.4; }
.chip { font-weight: 600; font-size: 0.8rem; border-color: var(--border); background: var(--panel-2); color: var(--text); }
.chip.on { border-color: var(--studios); background: rgba(205,187,146,0.22); color: var(--studios-bright); }
.tabs button { font-weight: 600 !important; font-size: 0.85rem !important; }

/* Section labels stay small capitals, but clean and readable */
.ph, .sec, .famtag, #topHeads div, table.st th {
  font-family: var(--ui-font) !important; font-weight: 700 !important; font-size: 0.7rem !important; letter-spacing: 0.09em !important; color: var(--studios) !important;
}

/* Text sizes inside panels */
.note { color: var(--text-mid) !important; font-size: 0.9rem !important; line-height: 1.45 !important; }
.small { color: var(--text-dim) !important; }
.row > label { color: var(--text-mid) !important; }

/* Form fields */
select.f, input.f, textarea.f, select, .num { background-color: #090d1a; border-color: var(--border) !important; color: var(--text); }

/* Your project's name keeps the studio's elegant lettering */
#title, .title-in { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 700 !important; font-size: 1.2rem !important; letter-spacing: 0.02em !important; color: var(--studios-bright) !important; }

/* Fields and small print use the same clean letters */
input, select, textarea, .big button small { font-family: var(--ui-font) !important; }

/* Floating hints wrap instead of running off a phone screen */
#hint { font-size: 0.8rem; white-space: normal !important; max-width: calc(100vw - 24px); box-sizing: border-box; text-align: center; }