/** Palette **/

:root {
  --bg:          #f4f4f4;   /* page background, off-white */
  --panel:       #ffffff;   /* card surfaces */
  --ink:         #1a1916;   /* primary text, dark surfaces */
  --muted:       #6b6963;   /* secondary text, captions */
  --line:        #d8d4cc;   /* default borders */
  --line2:       #e8e6e1;   /* subtle dividers */

	--hat:         #f5b700;   /* hat-yellow */
	--hat-soft:    #fff6d6;   /* hat-soft */

  --accent:      #191b16;   /* olive — brand / active state */
  --accent-soft: #e8edd8;   /* selected chip fill */

  --warn:        #c9961f;   /* hat-yellow — Run, lock warning */
  --warn-soft:   #fdf3d4;   /* warn fill */

  --danger:      #b8442a;   /* production, errors, destructive */
  --danger-soft: #f9e4dc;   /* danger fill */

  --info:        #4a6b8a;   /* info / muted blue (rare) */
  --info-soft:   #dde7f0;

  --success:      #3f7a4a;   /* success / upload */
  --success-soft: #dfeede;
}

/** Typography **/

:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

/** Spacing & radii **/

:root {
  --r-sm:  4px;   /* badges, kbd hints */
  --r-md:  6px;   /* chip buttons, logo */
  --r-lg:  8px;   /* form controls, inputs, dropdowns */
  --r-xl:  10px;  /* cards, sidebar panels, Run button */
  --r-2xl: 12px;  /* modals only */

  --shadow-dropdown: 0 8px 24px rgba(0,0,0,.06);
  --shadow-modal:    0 20px 60px rgba(0,0,0,.25);
  --shadow-toast:    0 12px 32px rgba(0,0,0,.3);
}