/*
 * Design Studio skin.
 *
 * Maps the studio's own scoped CSS variables onto the ScreenUsed tokens so the
 * editor feels part of the site. It overrides the custom properties and font
 * stack, plus three cosmetic touches (header colour, wordmark font, focus
 * ring). No layout or behaviour changes, and the plugin's code is untouched. Selection blue stays as it is because it is a
 * working colour on the canvas, not decoration.
 */
body .mrds-studio {
	--ink: #1A120D;          /* ink */
	--ink-2: #4A3428;        /* cocoa */
	--muted: #6E5A4B;        /* muted */
	--line: #E6DCCB;         /* hairline, one step lighter than theme line for dense UI */
	--line-2: #D9CCB7;       /* line */
	--paper: #FBF7F0;        /* paper */
	--panel: #FFFFFF;        /* white */
	--stage: #F4EBDD;        /* cream */
	--accent: #D9A441;       /* mustard */
	--accent-soft: #F6E7C6;  /* mustard tint */
	--accent-ink: #4A3428;   /* cocoa, 8.6:1 on the tint */
	--radius: 6px;           /* panel radius from theme.json */
	font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
}

body .mrds-studio .mrds-header { background: #2B1F18; }      /* espresso, matches site top bar */
body .mrds-studio .mrds-brand-name { font-family: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.02em; text-transform: none; font-size: 17px; font-weight: 800; }
body .mrds-studio :focus-visible { outline: 3px solid #D9A441; outline-offset: 2px; }